使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅 - XIN.

使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅

  in   tech with  3  comment

目前正在写一个微信公众号的小项目,记录一下遇到的问题和解决方法(主要是前端)。内容持续更新中~

主要实现

前后端分离
前端为 SPA 单页面
使用微信的JSSDK
微信支付

技术方案

后端使用 php 搭建接口
vux ui框架
vu2.0e全家桶(vue、vue-router、vue-resource、vuex)

问题列表

跨域问题

~~因为生产环境下是同域名,不存在跨域问题。~~生产环境配置反向代理解决了跨域。这里遇到的问题主要是开发环境下,后端和前端分别在两个 http 服务器上。因为前端项目直接用 vue-cli 生成,所以用到了 webpack,正好 webpack 的 dev-server 可以设置反向代理。在config/index.js里找到 dev 下的 proxyTable 配置项,并加入配置即可

proxyTable: { '/api': { target: 'http://127.0.0.1:8888', changeOrigin:true, pathRewrite:{ //'^/api':'' } } }

授权回调处理

主要是获取用户的 openid。因为每个用户的 openid 固定不变,所以在首次加载时会检测 store 中是否有openid,如果没有就跳转到授权页面获取openid再跳转回来,并写入 localstorage,并更新 store。

//检测url中是否有openid if(this.$route.query.openid){ this.$store.commit('updateOpenid',this.$route.query.openid); } //跳转授权 if(!this.$store.state.openid){ //授权完成后需要携带openid参数再跳回来 window.location.href="/access"; }

但是实际应用中这样并不安全,因为直接将 openid 传回页面,容易被客户端篡改。所以更加安全的做法是授权之后生成一个 token 和对应的 openid 存入数据库,并设置 token 失效时间,不把 openid 直接暴露给前端。前端提交时使用 token,在后端再取出对应的 openid

微信支付

看了下文档,以前是需要用 jssdk 唤起支付,而现在则是把微信 jssdk 内置到了微信的浏览器中。可以直接使用 WeixinJSBridge 来唤起支付。当然签名生成和订单需要在后端做。而且支付流程似乎也做了更改,以前是把订单信息和加密字符串同时传递到微信服务器,而现在是先在后端把订单信息传递给微信服务器,返回 prepay_id。前端只需要接收 prepay_id 并传递就可以了,这样的话更安全一些。

在前端组件中的代码更加简单化

pay(){ let _this=this; let jsApiParameters={}; let onBridgeReady=function(){ WeixinJSBridge.invoke( 'getBrandWCPayRequest', jsApiParameters, (res)=>{ if (res.err_msg == "get_brand_wcpay_request:ok") { _this.alert('支付成功'); window.location.reload(); } if (res.err_msg == "get_brand_wcpay_request:cancel") { _this.alert('取消支付'); window.location.reload(); } } ); } let callpay=function(){ 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(); } } //请求支付数据 this.$http.get('wechat/wxpay?openid='+this.$store.state.openid+'&id='+this.$route.params.id) .then((response)=>{ if(response.body.status==1){ jsApiParameters=response.body.data; callpay(); }else{ _this.alert(response.body.msg); } }); }

支付授权目录问题

因为微信的支付授权目录要精确到子目录级别,而 spa 的 url的形式大概为 /wechat/#/show/1、/wechat/#/list/type 这样,就会产生发生支付的页面报支付目录未定义的问题。针对这个问题可以在根目录后加加上 ? 符号链接,后面的地址就会被当成参数解析,而不会当成目录。/wechat/?#/show/1、/wechat?#/list/type,这样解析出来的目录都是在 /wechat/ 根目录下面

安卓下无法使用 html5 input 无法唤起摄像头

上传图片部分使用的是html5直接选择图片上传

<input id="uploaderInput" @change="change" class="weui-uploader__input" type="file" accept="image/*" multiple />

在 ios 设备下没有问题,会弹出选择拍照、图库等选项。但是朋友说在安卓下只能选择图库,而且无法多选。上网查了一下,确实在部分安卓平台下有这个问题。加上 capture=camera" 可以直接使用拍照,但是选择图库又没了。。。

解决方案有两个
1.使用微信的 jssdk 来选择图片,但是这样上传部分要修改。
2.在安卓下使用 vux 提供的 Actionsheet 组件来代替系统默认的选择,分别加上选择图库、直接打开拍照。
好气啊,手头又没有安卓设备,索性先放下不管了。

php7支付回调失败问题

原因是微信SDK使用了$GLOBALS['HTTP_RAW_POST_DATA'];来获取xml的请求数据,但是在php7中废弃了。所以要修改WxPay.Api.php 中 notify 函数。将 $xml = $GLOBALS['HTTP_RAW_POST_DATA']; 修改为

if(!empty($GLOBALS['HTTP_RAW_POST_DATA'])){ $xml = $GLOBALS['HTTP_RAW_POST_DATA']; }else{ $xml = file_get_contents("php://input"); }

即可兼容php7。在此吐槽一下微信支付的 SDK ,你们的 SDK 是实习生写的吗?写的时候能不能考虑一下生产环境的使用?能不能不要用已经表明未来版本会被废弃的函数?能不能不要漏写字母?每次就你们家的SDK得修改好几处才能用。

Responses
  1. sneptune

    踩踩

    Reply
  2. @渣渣

    后端授权的地址

    Reply
  3. 渣渣

    额,授权那块具体是怎么操作的呢?window.location.href="/access"; 这里 /access 是什么?

    Reply