js-sdk微信分享功能的實現(vue)

經過處理了各種bug后的最終版本代碼

在index.html：
引入 <script type="text/javascript" src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>



在需要做分享功能的頁面：
created(){
    this.getVideoDetails()
}
methods:{
    //獲取視頻數據
    getVideoDetails(){
        this.$axios.get(`${api.videoApi}/getVideo?vid=${this.vid}`).then(res=>{
            if(res.data.code==200){
                this.videoDetails=res.data.data
                this.wxShareCheck()  //此函數應在獲取數據的接口成功獲取數據后執行，以免數據為空時調用分享函數出現bug。
            }
        }).catch(err=>{})
    }
    //檢查是否是微信端，是微信端則調用微信分享功能
    wxShareCheck(){
        let ua = navigator.userAgent.toLowerCase();  
        if (ua.match(/MicroMessenger/i) == "micromessenger") {
            this.getWxShare()
        }        
    }
    //微信分享功能調用
    getWxShare(){
        let url =encodeURIComponent(window.location.href.split('#')[0])
        axios.get(`${common.coper}/getWxShareParam?url=${url}`).then(res=>{
            if(res.data.code==200){
                let wxInfo=res.data.data
                wx.config({
                    debug: false, // 是否開啟調試模式
                    appId: wxInfo.appid, //appid:需與公眾號一致
                    timestamp: wxInfo.timestamp, // 時間戳
                    nonceStr: wxInfo.nonceStr, // 隨機字符串
                    signature: wxInfo.signature, // 簽名
                    jsApiList: [
                        'onMenuShareAppMessage',
                        'onMenuShareTimeline',
                        'updateAppMessageShareData',
                        'updateTimelineShareData',
                    ] // 需要使用的JS接口列表
                })
                wx.ready(()=>{  
                    wx.onMenuShareAppMessage({ 
                        title: this.videoDetails.title?this.videoDetails.title:'',     // 分享標題
                        desc: this.videoDetails.name?`電影主演：${this.videoDetails.name}`:'',     // 分享描述
                        link: window.location.href,     // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                        imgUrl: this.videoDetails.image?this.videoDetails.image:'',     // 分享圖標
                        success: function () {
                            console.log("成功")
                        },
                        cancel:function(){
                            console.log("取消")
                        }
                    })
                    wx.onMenuShareTimeline({ 
                        title: this.videoDetails.title?this.videoDetails.title:'',     // 分享標題
                        link: window.location.href,     // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                        imgUrl: this.videoDetails.image?this.videoDetails.image:'',     // 分享圖標
                        success: function () {
                            console.log("成功")
                        },
                        cancel:function(){
                            console.log("取消")
                        }
                    })
                })
                wx.error(function(res){
                    console.log(res.errMsg)
                })
            }else{
                console.log(res.data.msg)   //請求接口不為200時，輸出失敗信息，比如401未登錄
            }
        }).catch()
    },
}

坑：

1、微信分享函數在何時執行？

------ 很多人說是在vue的mounted周期里執行，但我認為更保險的執行時期是在拿到頁面數據之后。因為若執行分享函數時，數據還沒拿到的話，那么第一可能分享功能失效，第二可能分享出去的圖文是undefined。

2、報錯63002(意思是無效的簽名)是什么原因造成的？

------ 很大因素可能就是域名不符合的問題，要與后端溝通好域名，config里的每一個配置都要確認無誤才可以。

3、直接使用新api：updateAppMessageShareData，updateTimelineShareData時有一些兼容性問題怎么辦？

------ 這是微信的問題，微信在js-sdk1.4.0和1.6.0新版本里發布的這新api在某些環境會有問題出現。現在我也不知道怎么辦，目前我用的是舊版本api，等以后解決了再來補上

4、微信鏈接第一次分享成功，但點進此鏈接后再次分享此鏈接便會失效是怎么回事？

------ 原因是微信分享后會自動給當前鏈接拼接上from等參數，再次進入此鏈接，因為此次鏈接攜帶了from等參數。wx.config時若兩次的url不一樣，則wx.config失敗，因此分享功能失效。如
分享前：http://test.com/test.html
分享后：http://test.com/test.html?from=singlemessage&isappinstalled=0
------ 那么怎么辦呢？思路是去除from等參數帶來的影響

• 方案1：在調用分享函數前，先判斷當前url是否帶有from等參數，若有，則重置url

getWxShare(){
    function getQueryString(name) {  //根據字段看網址是否拼接&字符串
        let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        let r = window.location.search.substr(1).match(reg);
        if (r != null)
            return unescape(r[2]);
        return null;
    }
    let from = getQueryString('from');
    let appinstall = getQueryString('appinstall');
    let sec = getQueryString('sec');
    let timekey = getQueryString('timekey');
    if(from || appinstall || sec || timekey){
        window.location.href =window.location.href.split("?")[0]
    }

    。。。。。。
}


弊端：①、重置頁面url會導致進入頁面時頁面會閃一下，用戶體驗不好。②、安卓微信有部分兼容性問題：二次分享時好時壞，穩定性差

• 方案2：轉化url格式，使用encodeURIComponent格式請求后端接口

getWxShare(){
    let url =encodeURIComponent(window.location.href.split('#')[0])
    。。。。。。
}
提醒：
wx.updateAppMessageShareData({ 
    title: 
    desc:  
    link: window.location.href, // 值得一提的是，這里請使用window.location.href而不要圖省事使用url，url可是經過轉碼的，這里不可使用
    imgUrl: 
    success: function () {},
    cancel:function(){}
})

暫時沒有發現什么弊端

5、若分享的鏈接是這樣的http://192.168.1.164/web#/live/liveroom?islive=0&lid=17&roomid=23456，鏈接中帶有&會導致請求接口時被自動解析

如上，使用encodeURIComponent轉碼后上傳即可