目前在微信上写一个小项目公众号，记录下遇到的问题和解决方法（主要是前端-结尾）。内容持续更新中~主要实现前后端分离前端是SPA单页使用微信的JSSDK微信支付技术方案后端使用php搭建界面vuxui框架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中是否有openidif(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;让jsApiParameters={};letonBridgeReady=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('Cancelpay');window.location.reload();}});}letcallpay=function(){if(typeofWeixinJSBridge=="undefined"){if(document.addEventListener){document.addEventListener('WeixinJSBridgeReady',onBridgeReady,false);}否则如果（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/的根目录下。android下无法使用html5输入法，无法使用相机上传图片。该部分直接使用html5选择一张图片上传
