wx_gzh.js

export function config(params, success, fail) {
  // wx.config({
  //     debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  //     appId: '', // 必填，公众号的唯一标识
  //     timestamp: , // 必填，生成签名的时间戳
  //     nonceStr: '', // 必填，生成签名的随机串
  //     signature: '',// 必填，签名
  //     jsApiList: [] // 必填，需要使用的JS接口列表
  // })
  // console.log('wx_gzh 获取到了配置')
  // console.log(params)
  wx.config(params)

  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  wx.ready(success)

  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
  wx.error(fail)
}

export function shareFriends(params, success) {
  // if (!params) {
  //   params = {
  //     title: '拼起来', // 分享标题
  //     desc: '来，来，来~ 大家拼起来', // 分享描述
  //     link: location.origin, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  //     imgUrl: 'https://shoppub-test.oss-cn-shanghai.aliyuncs.com/gb-along-buy-success%402x.png', // 分享图标
  //   }
  // }
  wx.updateAppMessageShareData({ 
    title: params.title, // 分享标题
    desc: params.desc, // 分享描述
    link: params.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: params.imgUrl, // 分享图标
    success: success
  })
}

export function shareTimeline(params, success) {
  // if (!params) {
  //   params = {
  //     title: '拼起来', // 分享标题
  //     desc: '来，来，来~ 大家拼起来', // 分享描述
  //     link: location.origin, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
  //     imgUrl: 'https://shoppub-test.oss-cn-shanghai.aliyuncs.com/gb-along-buy-success%402x.png', // 分享图标
  //   }
  // }
  wx.updateTimelineShareData({ 
    title: params.title, // 分享标题
    desc: params.desc, // 分享描述
    link: params.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
    imgUrl: params.imgUrl, // 分享图标
    success: success
  })
}

export default {
  config,
  shareFriends,
  shareTimeline
}

router.js中的配置

import VueRouter from 'vue-router'
import Vue from 'vue'
import wx_gzh from '@/utils/wx_gzh.js'
import ajax from '@/merchant_kzl/ajax.js'

// 注册 VueRouter 组件
Vue.use(VueRouter)

var routes = [
  {
    path: '/',
    meta: {
      title: '邀请好友'
    },
    component: () => import('@/merchant_kzl/pages/index.vue')
  },
  // 未知路由重定向到首页
  {
    path: '*',
    redirect: '/',
    meta: {
      title: '邀请好友'
    },
    component: () => import('@/merchant_kzl/pages/index.vue')
  }
]

var router = new VueRouter({
  // mode: 'history',
  routes: routes
})

router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

router.afterEach((to, from) => {
  console.log('to === ', to)
  console.log('from === ', from)
  console.log('location.href ===', location.href)
  let params = {
    // url: encodeURIComponent(location.href),
    url: location.href,
    apis: [
      'updateAppMessageShareData',
      'updateTimelineShareData',
      // https://www.qdfuns.com/article/14398/29d024e3d55ff33bcf7c9a1c6082ec29.html
      // 为啥要加下面的两个方法，微信渣渣文档说废弃了，但是尼玛安卓还是要加上要不然分享内容不生效
      'onMenuShareAppMessage',
      'onMenuShareTimeline'
    ]
  }
  //在没有配置分享的时候，配置默认分享内容
  ajax.post('wechat/jssdk-config', params, (res) => {
    res.data.jssdk_config.debug = true
    wx_gzh.config(res.data.jssdk_config, () => {
      console.log('wechat/jssdk-config sucess')
      let shareParams = {
        title: '好友邀请您领取100元新人券+免费健身体验券', // 分享标题
        desc: '来英睿抗阻力健身，迎接属于你的好身材', // 分享描述
        link: location.origin, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
        imgUrl: 'https://dianle.oss-cn-shanghai.aliyuncs.com/%E8%8B%B1%E7%9D%BF%E5%81%A5%E8%BA%AB/kzl_logo.png' // 分享图标
      }
      wx_gzh.shareFriends(shareParams, () => {
        console.log('朋友设置成功')
      })
      shareParams.title = '英睿健身'
      wx_gzh.shareTimeline(shareParams, () => {
        console.log('圈设置成功')
      })
    }, (res) => {
      console.log('wechat/jssdk-config fail')
      console.log(res)
    })
  })
})

router.push('/')

export default router

使用：将方法引入所需要的分享页面，然后调用下面的方法

shareConfig(shareUrl) {
      let params = {
        url: location.href,
        apis: [
          'updateAppMessageShareData',
          'updateTimelineShareData',
          // https://www.qdfuns.com/article/14398/29d024e3d55ff33bcf7c9a1c6082ec29.html
          // 为啥要加下面的两个方法，微信渣渣文档说废弃了，但是尼玛安卓还是要加上要不然分享内容不生效
          'onMenuShareAppMessage',
          'onMenuShareTimeline'
        ]
      }
      let loader = this.$loading.show()
      this.$ajax.post(
        '/basis/wx/jssdk',
        params,
        res => {
          // res.data.jssdk_config.debug = true
          wx_gzh.config(
            res.data.jssdk,
            () => {
              loader.hide()
              console.log('wechat/jssdk-config sucess')
              let shareParams = {
                title: '好友邀请您领取100元新人券+免费健身体验券', // 分享标题
                desc: '来英睿抗阻力健身，迎接属于你的好身材', // 分享描述
                link: shareUrl, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'https://dianle.oss-cn-shanghai.aliyuncs.com/%E8%8B%B1%E7%9D%BF%E5%81%A5%E8%BA%AB/kzl_logo.png' // 分享图标
              }
              wx_gzh.shareFriends(shareParams, () => {
                this.shareShow = true
                console.log('朋友设置成功')
              })

              wx_gzh.shareTimeline(shareParams, () => {
                console.log('圈设置成功')
              })
            },
            () => {
              loader.hide()
              console.log('wechat/jssdk-config fail')
              console.log(res)
            }
          )
        },
        () => {
          loader.hide()
          console.log('wechat/jssdk-config fail')
        }
      )
    }