摘要：
前言继前几天总结了vue开发小结(上)后，发现还有很多的点没有能列举出来，于是还是打算新建一个下篇，再补充一些vue开发中需要注意的细节，确实还是都是细节的问题，我只是在这里强调下，希望对大家有帮助。正文这次主要大概总结下vuehistory模式下微信分享和微信支付的细节。
前言
继前几天总结了vue开发小结(上)后，发现还有很多的点没有能列举出来，于是还是打算新建一个下篇，再补充一些vue开发中需要注意的细节，确实还是都是细节的问题，我只是在这里强调下，希望对大家有帮助(ps：另关于管理端的貌似我还没写，说不定还有一篇，哈哈)。
正文
这次主要大概总结下vue history模式下微信分享和微信支付的细节。
一、微信分享
首先vue history模式下，vue是通过history.pushState API 来完成 URL 跳转实现路由的加载的，因此和多页面的实现是不一致的。而在安卓和IOS URL的切换上却有这不同的实现。
对于Android，它的每次路由的变换，URL都跟着改变，也就是说它的Landing Page和Current Page同时在变，这就和多页应用实现一样需要在对应做分享的页面做签名。但是对IOS而言，每次路由的变换，URL却不变，也就是说虽然它的Currernt Page在变，但是它的Landing Page不变，所以在做分享的时候就可不需要做处理，只需在Loading Page做分享即可。
另，还要一个需要注意的重点，即时做微信分享时候，对应的title，desc，img_url等参数需要用绝对路径。
附上封装的wxShare文件，则只需要在mounted时候调用分享即可
import wx from 'weixin-js-sdk' import { getSign} from '../api/index' const jsApiList = ['onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ','onMenuShareWeibo'] export functionwxConfig() { const data={ requestUrl:window.location.href } getSign(data) .then(res=>{ wx.config({ debug: false, appId: res.appId, timestamp: res.timestamp, nonceStr: res.nonceStr, signature: res.signature, jsApiList: jsApiList }) }) } export functionwxShare(title,desc,curUrl,img_url,inviteCode) { const u=navigator.userAgent const link=curUrl //强调：参数需绝对路径 if(u.indexOf('Android')>-1){ requireConfig() } wx.ready(()=>{ wx.onMenuShareTimeline({ title: title, desc:desc, imgUrl:img_url, link:link }) wx.onMenuShareAppMessage({ title: title, desc:desc, imgUrl:img_url, link:link, success: functionsuccess(result) { }, }); wx.onMenuShareTimeline({ title: title, desc:desc, imgUrl:img_url, link:link }); wx.onMenuShareQQ({ title: title, desc:desc, imgUrl:img_url, link:link }); wx.onMenuShareWeibo({ title: title, desc:desc, imgUrl:img_url, link:link }); wx.onMenuShareQZone({ title: title, desc:desc, imgUrl:img_url, link:link }); }) }
二、微信支付
微信支付需要强调的点就是参数不要写错，包括大小写(ps：前端要是唤起支付失败，我总结出来的点就是参数写错了，如果还有其他问题的话，我觉得你可以直接甩锅为后台)
前端唤起支付大致流程即，前端调用后台支付接口换取appId公众号id，timeStrap时间戳，nonceStr随机数，package预支付id，签名paySign和前端设置加密为MD5(ps：一般为md5加密)，然后调用WeixinJSBridge即可
//传必要参数后获取公众号id等信息回调后判断是否有WeixinJSBridge事件 if (typeof WeixinJSBridge == "undefined"){ if( document.addEventListener ){ document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady, false); }else if(document.attachEvent){ document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady); document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady); } }else{ this.onBridgeReady(); } //后通过WeixinJSBridge唤起支付 WeixinJSBridge.invoke( 'getBrandWCPayRequest', { debug:true, "appId": appId, "timeStamp": response.timestamp, "nonceStr": response.noncestr, "package": response.package, "signType": "MD5", "paySign": response.sign, }, function(res){ const errMsg=res.errMsg ?res.errMsg :res.err_msg if(errMsg.indexOf("ok") != -1) { }else if(errMsg.indexOf("cancel") != -1){ }else if(errMsg.indexOf("fail") != -1){ } else{ } } );
最后
其实在微信分享和微信支付上面，最重要的还是注意细节~~~