使用 vue2.0 開發微信公衆號下先後端分離的SPA站點的填坑之旅

目前正在寫一個微信公衆號的小項目，記錄一下遇到的問題和解決方法（主要是前端）。內容持續更新中~

主要實現

先後端分離
前端爲 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/一、/wechat/#/list/type 這樣，就會產生髮生支付的頁面報支付目錄未定義的問題。針對這個問題能夠在根目錄後加加上 ? 符號連接，後面的地址就會被當成參數解析，而不會當成目錄。/wechat/?#/show/一、/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...，後續在博客更新