1. 云栖社区>
  2. PHP教程>
  3. 正文

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

作者:用户 来源:互联网 时间:2017-12-01 12:11:55

站点使用vue2.0分离公众SPA

使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅 - 摘要: 本文讲的是使用 vue2.0 开发微信公众号下前后端分离的SPA站点的填坑之旅, 目前正在写一个微信公众号的小项目,记录一下遇到的问题和解决方法(主要是前端)。内容持续更新中~ 主要实现前后端分离前端为 SPA 单页面使用微信的JSSDK微信支付 技术方案后端使用 php 搭建接口vux ui框架vu2.0e全家桶(v


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


主要实现

前后端分离前端为 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直接选择图片上传



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


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


博客链接:https://lscho.com/tech/vue-we...,后续在博客更新

以上是云栖社区小编为您精心准备的的内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索站点 , 使用 , vue , 2.0 , 分离 , 公众 , SPA , , ,以便于您获取更多的相关知识。