单页应用vue框架开发微信投票系统中填过的坑

本人一直做前端、webGIS开发，因其他机缘做了一次微信公众号系统开发，使用vue2.0 开发，过程中遇到很多坑，一一都解决了还是比较有意思，现在有时间好好总结一下，希望能对一些正在进行微信公众号开发的人提供一些参考。第一次写博客，页面有些粗糙，还请多多包涵。

1.准备工作

进入微信公众平台（mp.weixin.qq.com），设置->公众号设置->功能设置->网页授权域名。设置公众号需链接的网站域名，只填写主域名即可，如（nongshiwang.com）等。此配置是所有微信操作的基础。如下图所示：

支付开发所需的配置有进入商户平台（pay.weixin.qq.com）

个人设置->操作证书，需安装证书且保存至本地，开发时需要证书。
账户设置->API 安全-> 设置key, 注：key 可以通过第三方网站生成。生成由小写字符和数字组成的32位key。在线生成key的工具如：http://www.sexauth.com/
公众号支付目录配置。参考：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=7_3

2.微信认证中的坑

迎合微信的appid和secretID的高度私密性，appid和secretID不要在前端配置，都通过后台配置。后台提供接口跳转至配置的页面。

微信认证回调配置为单页的首页地址。如：http://ip/。

首先微信认证回调的首页url不支持带#，所以vue 不适用history模式时，路由可添加能跳转至根目录的路由，如path:'/'，这样通过http://ip/就可以访问http://ip/#/index。

附前端微信认证部分源码：

var userId = this.$utils.getUrlKey("openid"); //判断地址栏中有没有openid
 //判断当前用户是否已经登录，使用sessionStorage 防止其他页面分享来的无效的openid
var isFirst = sessionStorage.getItem('isLogined');
//如果sessionStorage 没有，则调用后台接口，重新认证。如果没有，且地址栏没有openid,则调用后台接口，发起认证
if(!isFirst || (!this.$store.state.wxUser.openid && !userId)) {
	window.location.href =this.ApiSever.OAUTH;
	sessionStorage.setItem('isLogined', 1);
} 
////如果sessionStorage 有，则判断地址栏是否有openid,地址栏有openid,表示认证成功
else if(!this.$store.state.wxUser.openid && userId) {
	let this_ = this;	
	//已通过认证
}

3.微信公众号支付

微信支付在商户页面配置的url针对ios 系统和 Android系统的不同，同一个页面ios 系统可支付，Android的提示目录不对，此问题是因为付款页面的路由参数问题，我把付款页面的路由都改为http://地址/#/gift,不附带参数的形式，付款成功。支付授权目录最多支持5个，中间支持#，设置支付页面的路由即可，如：http://地址/#/gift。

单页微信公众号开发中还是有很多坑，不过很多在配置正确后基本都可以解决。列一些需要注意的点：

fee的单位为分。测试可以设置1，表示1分测试。
前端调用后台支付接口，只需要传body,fee,openid即可。
支付过程出现 “未授权”，请检查是否是因为从其他人的页面分享过来的，这时候用到openid其实还是其他人的openid,实际支付的openid 和传给后台的openid 不一致导致的。
前端接受支付结果信息，使用WeixinJSBridge 即可。

附上接收支付消息部分源码如下：

let _this=this;
let jsApiParameters={};
let onBridgeReady=function(){
	WeixinJSBridge.invoke(
			'getBrandWCPayRequest',
			jsApiParameters,
			(res)=>{
				//alert('orderpay:'+alert(JSON.stringify(res)));
				if (res.err_msg == "get_brand_wcpay_request:ok") {		                        	
					//alert('支付成功');
				}
					
				if (res.err_msg == "get_brand_wcpay_request:cancel") {
					//_this.alert('取消支付');
					window.location.reload();
				}
			}
	);
}
let callpay=function() {
	//alert(WeixinJSBridge);
	if (typeof WeixinJSBridge == "undefined") {
		if (document.addEventListener) {
			document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
		} else if (document.attachEvent) {
			document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
			document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
		}
	} else {
		onBridgeReady();
	}
}

只要配置对，细心分析原因，多多查看微信开发文档，微信公众号的开发还是比较容易实现的。

PS: 微信公众号的开发还挺有趣。前端的投票系统源码链接，点击查看

单页应用vue框架开发微信投票系统中填过的坑

猜你喜欢