在使用vue和vue-router路由框架已经开发过好几个项目了，其中也遇到不少坑，有些坑各种搜也没有找到非常理想的答案。
vue学习相对来说还是比较简单，官方文档说明非常清楚（），多做一些Demo就可以熟练上手了，并且现在也有好多框架（vuex，MintUI，Element，iView等），根据项目需要自行学则，因此本人也就没有怎么写过关于vue这方面的文章。
这次主要是把自己在微信中分享遇到的问题分享一下，Android机器中分享不会存在问题，主要是IOS分享各种签名，标题、内容、图片不改变问题。
1.微信分享当然要引入微信JS-SDK
微信JS-SDK说明文档：
分享页面引入：
vue框架可以使用： 命令：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: url10 };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";
如过没有看明白的可以私信我，或者大家有其它更好的解决办法欢迎留言，共同学习。