Vue中的微信分享

微信分享遇到的问题

一开始的时候，微信的sdk，是通过script引入的。

但是，因为我们的页面是短链接，会有一次转换变成长链接，这就造成了在我们的系统不能正常使用微信分享。

最终经过N多次失败，不得不重头再来，一步步的走下来，最终发现是还是短链接转长链接造成的问题，因为在初始化的时候是进来的时候是短链接，因为是通过script在开头引入的，所以微信sdk已经监控到了，但是我们 wxsdk 配置里面的 link 是我们要分享的长链接，微信会认为这是无效配置，所以微信分享不生效。

如果你的微信分享还是使用script引入的方式，但是微信分享不生效，可以试试换一种方式

解决问题的代码

PS：多余代码就不写了

main.js

import wxInit from '@/utils/wxjsdk'
wxInit.install()

wxsdk.js

// 微信的配置
import Vue from 'vue'
// 我们自己查要分享的数据的接口
import { getWxConfig, getWxShareData } from '../api/bvent.js'
import Store from '@/store'
// 引入微信sdk的包
import wx from 'weixin-js-sdk'
window.wx = wx

const wxSdk = {
  install() {
    Vue.prototype.$wxSdkInit = wxSdk.init
  },
  init() {
    getWxConfig({ url: location.href }).then(res => {
      wx.config({
        debug: false, // 生产环境需要关闭debug模式
        appId: res.appId, // appId通过微信服务号后台查看
        timestamp: res.timestamp, // 生成签名的时间戳
        nonceStr: res.nonceStr, // 生成签名的随机字符串
        signature: res.signature, // 签名
        jsApiList: [
          // 需要调用的JS接口列表
          'updateTimelineShareData', // 分享给好友
          'updateAppMessageShareData', // 分享到朋友圈
          'onMenuShareAppMessage', // 1.0 分享到朋友
          'onMenuShareTimeline' // 1.0分享到朋友圈
        ]
      })
      wx.ready(function() {
        getWxShareData({ id: Store.getters.bventId }).then(e => {
          let shareData = {
            title: e.shareTitle, // 分享标题
            desc: e.shareDescribe, // 分享描述
            link: e.shareLink, // 分享链接
            imgUrl:
              e.shareImage && e.shareImage.indexOf('http') === -1
                ? window.domainConfig.fileServer + '/' + e.shareImage
                : e.shareImage // 分享图标
          }
          wx.ready(function() {
            wx.onMenuShareAppMessage(shareData)
            wx.onMenuShareTimeline(shareData)
            wx.updateAppMessageShareData(shareData)
            wx.updateTimelineShareData(shareData)
          })
        })
      })
    })
  }
}
export default wxSdk

App.vue

<template>
  <router-view />
</template>
<script>
export default {
  name: 'App',
  mounted() {
    // 微信分享使用的，所以判断微信浏览器执行该方法
    let ua = navigator.userAgent.toLowerCase()
    var isWeixin = ua.indexOf('micromessenger') !== -1
    if (isWeixin && !/miniprogram/.test(ua)) {
      this.$wxSdkInit()
    }
  }
}
</script>