Vue+Vue-router微信分享功能

在使用vue和vue-router路由框架已經開發過好幾個項目了，其中也遇到不少坑，有些坑各種搜也沒有找到非常理想的答案。

vue學習相對來說還是比較簡單，官方文檔說明非常清楚（https://cn.vuejs.org/v2/guide/），多做一些Demo就可以熟練上手了，並且現在也有好多框架（vuex，MintUI，Element，iView等），根據項目需要自行學則，因此本人也就沒有怎麼寫過關於vue這方面的文章。

這次主要是把自己在微信中分享遇到的問題分享一下，Android機器中分享不會存在問題，主要是IOS分享各種簽名，標題、內容、圖片不改變問題。

1.微信分享當然要引入微信JS-SDK

　　微信JS-SDK說明文檔：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

　　分享頁面引入：http://res.wx.qq.com/open/js/jweixin-1.2.0.js

　　vue框架可以使用：https://github.com/yanxi-me/weixin-js-sdk   命令：npm install weixin-js-sdk

　　2.封裝一下微信分享的功能，如下：

  1 import wx from 'weixin-js-sdk';
  2 import apiUrl from "@/config/apiUrl.js";
  3 export default {
  4   wxChat : ($vue, param) => {
  5     let appId = "";
  6     let timestamp="";
  7     let nonceStr = "";
  8     let signature = "";
  9     let options = {
 10       title: "",
 11       desc: "",
 12       link: "",
 13       imgUrl: "",
 14       type: "link",
 15       dataUrl: "",
 16       localUrl: ""
 17     };
 18     options = Object.assign({}, options, param);
 19     //
 20     $vue.$httpPost(apiUrl.weChatShare, {shareLink: options.localUrl}).then((res) => {
 21       if(res.data&&res.data.status==="1000") {
 22         wx.config({
 23           debug: false,
 24           appId: res.data.appId, // 和獲取Ticke的必須一樣------必填，公衆號的唯一標識
 25           timestamp: res.data.timestamp, // 必填，生成簽名的時間戳
 26           nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機串
 27           signature: res.data.signature, // 必填，簽名
 28           jsApiList: [
 29             'onMenuShareAppMessage', 'onMenuShareTimeline',
 30             'onMenuShareQQ', 'onMenuShareQZone'
 31           ]
 32         });
 33         //處理驗證失敗的信息
 34         wx.error(function (res) {
 35           console.log('驗證失敗返回的信息:', res);
 36         });
 37         //處理驗證成功的信息
 38         wx.ready(function () {
 39           //分享到朋友圈
 40           wx.onMenuShareTimeline({
 41             title: options.title, // 分享標題
 42             link: options.link, // 分享鏈接
 43             imgUrl: options.imgUrl, // 分享圖標
 44             success: function (res) {
 45               // 用戶確認分享後執行的回調函數
 46               console.log("分享到朋友圈成功返回的信息爲:", res);
 47               showMsg("分享成功!");
 48             },
 49             cancel: function (res) {
 50               // 用戶取消分享後執行的回調函數
 51               console.log("取消分享到朋友圈返回的信息爲:", res);
 52             }
 53           });
 54           //分享給朋友
 55           wx.onMenuShareAppMessage({
 56             title: options.title,
 57             desc: options.desc,
 58             link: options.link,
 59             imgUrl: options.imgUrl,
 60             type: options.type, // 分享類型,music、video或link，不填默認爲link
 61             dataUrl: options.dataUrl, // 如果type是music或video，則要提供數據鏈接，默認爲空
 62             success: function (res) {
 63               // 用戶確認分享後執行的回調函數
 64               console.log("分享給朋友成功返回的信息爲:", res);
 65               showMsg(JSON.stringify(options));
 66             },
 67             cancel: function (res) {
 68               // 用戶取消分享後執行的回調函數
 69               console.log("取消分享給朋友返回的信息爲:", res);
 70             }
 71           });
 72           //分享到QQ
 73           wx.onMenuShareQQ({
 74             title: options.title,
 75             desc: options.desc,
 76             link: options.link,
 77             imgUrl: options.imgUrl,
 78             success: function (res) {
 79               // 用戶確認分享後執行的回調函數
 80               console.log("分享到QQ好友成功返回的信息爲:", res);
 81             },
 82             cancel: function (res) {
 83               // 用戶取消分享後執行的回調函數
 84               console.log("取消分享給QQ好友返回的信息爲:", res);
 85             }
 86           });
 87           //分享到QQ空間
 88           wx.onMenuShareQZone({
 89             title: options.title,
 90             desc: options.desc,
 91             link: options.link,
 92             imgUrl: options.imgUrl,
 93             success: function (res) {
 94               // 用戶確認分享後執行的回調函數
 95               console.log("分享到QQ空間成功返回的信息爲:", res);
 96             },
 97             cancel: function (res) {
 98               // 用戶取消分享後執行的回調函數
 99               console.log("取消分享到QQ空間返回的信息爲:", res);
100             }
101           });
102         });
103       } else {
104         console.log(res.data.msg);
105       }
106     }).catch((err) => {
107       console.log(err);
108     });
109   }
110 };

3.如何使用封裝的分享

　　如果使用vue路由hash模式，IOS中打開頁面獲取的地址永遠都是一開始打開的地址，不是跳轉後的當前頁面地址，所以可以在打開的頁面進行初始化調用或者在分享頁面初始化滿足（android），可以獲取不同內核區分；要不就在跳轉頁面的時候使用location.href = ""，不要使用路由，這樣只需要在分享頁面調用微信初始化。爲了保險可以在router.beforeEach鉤子裏面保存跳轉後的地址到localStorage.set("LocalUrl",document.URL)。

　　跳轉頁面：location.href = "?#/invite?userId=3" ;

 1 import weixin from "@/utils/wechat.js";
 2 initWxChat: function() {
 3       let url = window.localStorage.getItem("LocalUrl")||window.location.href;
 4       let param = {
 5         title: "邀請有禮",
 6         desc: "歡迎您參加邀請有禮",
 7         link: window.location.href,
 8         imgUrl: this.headPortrait,
 9         localUrl: url
10       };
11       weixin.wxChat(this, param);
12     }

4.微信簽名認證可以通過，但是自定義分享的內容不一定好使

　　這個問題主要是分享的頁面帶參數，由於路由Hash模式自動會加入#號，微信在IOS中自動加入了自己的內容，然後把#後面的內容放在了它的後面所以獲取參數就會出現問題，或許簽名認證也會出現問題，這樣就想到了加入一個特殊符號去處理，在傳入地址的參數#號前面加入一個?號，並且傳遞的參數最好只有一個，如果是多個話還是會存在問題。

　　獲取當前頁面地址：let url = window.localStorage.getItem("LocalUrl")||window.location.href;

　　分享授權認證頁面localUrl：http://localhost:9000/?#/invite?userId=3;

　　真正要分享的頁面link：window.location.href.split('#')[0] + "#/invite_share?userId=3";

　　

如過沒有看明白的可以私信我，或者大家有其它更好的解決辦法歡迎留言，共同學習。