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

Posted huihuihero

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js-sdk微信分享功能的实现(vue)相关的知识,希望对你有一定的参考价值。

代码

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是否解决

以上是关于js-sdk微信分享功能的实现(vue)的主要内容,如果未能解决你的问题,请参考以下文章

微信公众号开发--微信JS-SDK分享到朋友圈和分享给朋友

实战模拟│微信 JSSDK 实现自定义分享手机选图拍照图片音频处理地理位置摇一摇等功能

实战模拟│微信 JSSDK 实现自定义分享手机选图拍照图片音频处理地理位置摇一摇等功能

实战模拟│微信 JSSDK 实现自定义分享手机选图拍照图片音频处理地理位置摇一摇等功能

c#微信开发,使用JS-SDK自定义分享功能,分享朋友圈,分享给朋友等

如何使用微信JS-SDK实际分享功能