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

2024年4月25日 226次阅读 来源: lscho

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

主要实现

前后端分离
前端为 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 组件来代替系统默认的选择，分别加上选择图库、直接打开拍照。
好气啊，手头又没有安卓设备，索性先放下不管了。

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

    原文作者：lscho
    原文地址: https://segmentfault.com/a/1190000009558392
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞