运用 vue2.0 开辟微信民众号下前后端星散的SPA站点的填坑之旅

2024年3月30日 209次阅读 来源: 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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞