js-sdk微信分享功能的实现(vue)

Posted 2020-11-25 huihuihero

代码

mounted(){   //在mounted里执行
    let ua = navigator.userAgent.toLowerCase();  //判断是否是微信端
    if (ua.match(/MicroMessenger/i) == "micromessenger") {
        this.getWxShare()
    }
}

methods:{
    getWxShare(){
        let url = window.location.href.split('#')[0]
        axios.get(`${common.coper}/getWxShareParam?url=${url}`).then(res=>{
            if(res.data.code==200){
                let wxInfo=res.data.data
                // let videoInfo=this.videoDetails  //①将动态数据赋值给变量供微信内置函数使用，因videoDetails是其他接口异步请求来的，所以请保证在其他接口执行完毕videoDetails赋了值之后，再执行此行代码，否则videoDetails没有值即为undefined,会导致微信分享功能失效(重点：注意异步请求)
                wx.config({
                    debug: false, // 是否开启调试模式
                    appId: wxInfo.appid, //appid
                    timestamp: wxInfo.timestamp, // 时间戳
                    nonceStr: wxInfo.nonceStr, // 随机字符串
                    signature: wxInfo.signature, // 签名
                    jsApiList: [
                        'updateAppMessageShareData',
                        'updateTimelineShareData',
                        'onMenuShareTimeline',
                        'onMenuShareAppMessage',
                    ] // 需要使用的JS接口列表
                })
                wx.ready(()=>{  //这里本来是wx.ready(function(){，为了更方便使用数据，我改成了箭头函数。若是坚持用普通函数，请在上方①处进行赋值(请看注意事项)，在下方直接这样使用 title:videoInfo.title即可
                    wx.onMenuShareAppMessage({ 
                        title: this.videoDetails.title?this.videoDetails.title:'',     // 分享标题
                        desc: this.videoDetails.name?`电影主演：${this.videoDetails.name}`:'',     // 分享描述
                        link: url,     // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                        imgUrl: this.videoDetails.image?this.videoDetails.image:'',     // 分享图标
                        success: function () {
                            console.log("成功")
                        },
                        cancel:function(){
                            console.log("取消")
                        }
                    })
                })
                wx.error(function(res){
                    console.log(res.errMsg)
                })
            }
        }).catch()
    },
}

坑：

1、若报错63002(意思是无效的签名)，很大因素可能就是域名不符合的问题，要与后端沟通好。
2、目前新的api，updateAppMessageShareData我用起来有一些问题。暂时用旧的api，onMenuShareAppMessage等以后旧的彻底废弃后再使用新api并看看bug是否解决