微信公众号记

设置动态的title

使用vue-wechat-title

npm install vue-wechat-title --save
// main.js引入
import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

// router.js设置
   {
      path: '/',
      name: 'Home',
      component: Home,
      meta: { title: '首页' }
    }

// app.vue使用
<template>
  <div id="app">
    <router-view v-wechat-title='$route.meta.title' />
  </div>
</template>

自定义分享内容

安装sdk

npm install weixin-js-sdk --save

utils下新建xxx.js文件

import { getWeixinConfig } from '@/utils/api' // 请求api

export default {
  wechatConfig() {
    // android () {
    //   let u = navigator.userAgent
    //   return u.indexOf('Android') > -1 || u.indexOf('Adr') > -1
    // },
    let condition = window.location.href
    if (condition.includes('/home/productDetails?')) { // 路径包含/home/productDetails就执行下面代码
      getWeixinConfig({ url: location.href.split('#')[0] }).then((res) => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.noncestr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ['onMenuShareTimeline',
            'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表hideMenuItems
        })
        wx.ready(function() {
          //分享到朋友圈
          wx.onMenuShareTimeline({
            title: '分享标题',
            desc: '分享介绍',
            link: '分享链接',     // 分享时的链接
            imgUrl:'',    // 分享时的图标
            success: function() {

            },
            cancel: function() {
            }
          })
          //分享给朋友
          wx.onMenuShareAppMessage({
            wx.onMenuShareTimeline({
            title: '分享标题',
            desc: '分享介绍',
            link: '分享链接',     // 分享时的链接
            imgUrl:'',    // 分享时的图标
            success: function() {

            },
            cancel: function() {
            }
          })
        })
      })
    } else {
      getWeixinConfig({ url: location.href.split('#')[0] }).then((res) => {
        wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.data.appId, // 必填，公众号的唯一标识
          timestamp: res.data.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.data.noncestr, // 必填，生成签名的随机串
          signature: res.data.signature, // 必填，签名
          jsApiList: ['onMenuShareTimeline',
            'onMenuShareAppMessage'] // 必填，需要使用的JS接口列表hideMenuItems
        })
        wx.ready(function() {
          //分享到朋友圈
          wx.onMenuShareTimeline({
          wx.onMenuShareTimeline({
            title: '分享标题',
            desc: '分享介绍',
            link: '分享链接',     // 分享时的链接
            imgUrl:'',    // 分享时的图标
            success: function() {

            },
            cancel: function() {
            }
          })
          //分享给朋友
          wx.onMenuShareAppMessage({
            wx.onMenuShareTimeline({
            title: '分享标题',
            desc: '分享介绍',
            link: '分享链接',     // 分享时的链接
            imgUrl:'',    // 分享时的图标
            success: function() {

            },
            cancel: function() {
            }
          })
        })
      })
    }
  }
}

main.js引入

import wx from 'weixin-js-sdk'
import utils from './utils/xxx' 

Vue.prototype.$utils = utils
global.wx = wx

页面当中使用

  created() {
    this.$utils.wechatConfig()
  },