微信分享遇到的问题
一开始的时候，微信的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>
