前言
继前几天总结了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 function wxConfig() {
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 function wxShare(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: function success(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{
}
}
);最后
其实在微信分享和微信支付上面，最重要的还是注意细节~~~
