摘要：目前正在寫一個(gè)微信公眾號(hào)的小項(xiàng)目，記錄一下遇到的問(wèn)題和解決方法主要是前端。前端提交時(shí)使用，在后端再取出對(duì)應(yīng)的微信支付看了下文檔，以前是需要用喚起支付，而現(xiàn)在則是把微信內(nèi)置到了微信的瀏覽器中。

目前正在寫一個(gè)微信公眾號(hào)的小項(xiàng)目，記錄一下遇到的問(wèn)題和解決方法（主要是前端）。內(nèi)容持續(xù)更新中~

前后端分離
前端為 SPA 單頁(yè)面
使用微信的JSSDK
微信支付

后端使用 php 搭建接口
vux ui框架
vu2.0e全家桶（vue、vue-router、vue-resource、vuex）

因?yàn)樯a(chǎn)環(huán)境下是同域名，不存在跨域問(wèn)題。生產(chǎn)環(huán)境配置反向代理解決了跨域。這里遇到的問(wèn)題主要是開發(fā)環(huán)境下，后端和前端分別在兩個(gè) http 服務(wù)器上。因?yàn)榍岸隧?xiàng)目直接用 vue-cli 生成，所以用到了 webpack，正好 webpack 的 dev-server 可以設(shè)置反向代理。在config/index.js里找到 dev 下的 proxyTable 配置項(xiàng)，并加入配置即可

    proxyTable: {
      "/api": {
        target: "http://127.0.0.1:8888",
        changeOrigin:true,
        pathRewrite:{
            //"^/api":""
        }
      }        
    }

主要是獲取用戶的 openid。因?yàn)槊總€(gè)用戶的 openid 固定不變，所以在首次加載時(shí)會(huì)檢測(cè) store 中是否有openid，如果沒(méi)有就跳轉(zhuǎn)到授權(quán)頁(yè)面獲取openid再跳轉(zhuǎn)回來(lái)，并寫入 localstorage，并更新 store。

    //檢測(cè)url中是否有openid
    if(this.$route.query.openid){
      this.$store.commit("updateOpenid",this.$route.query.openid);
    }
    //跳轉(zhuǎn)授權(quán)
    if(!this.$store.state.openid){
      //授權(quán)完成后需要攜帶openid參數(shù)再跳回來(lái)
      window.location.href="/access";
    }

但是實(shí)際應(yīng)用中這樣并不安全，因?yàn)橹苯訉?openid 傳回頁(yè)面，容易被客戶端篡改。所以更加安全的做法是授權(quán)之后生成一個(gè) token 和對(duì)應(yīng)的 openid 存入數(shù)據(jù)庫(kù)，并設(shè)置 token 失效時(shí)間，不把 openid 直接暴露給前端。前端提交時(shí)使用 token，在后端再取出對(duì)應(yīng)的 openid

看了下文檔，以前是需要用 jssdk 喚起支付，而現(xiàn)在則是把微信 jssdk 內(nèi)置到了微信的瀏覽器中?？梢灾苯邮褂?WeixinJSBridge 來(lái)喚起支付。當(dāng)然簽名生成和訂單需要在后端做。而且支付流程似乎也做了更改，以前是把訂單信息和加密字符串同時(shí)傳遞到微信服務(wù)器，而現(xiàn)在是先在后端把訂單信息傳遞給微信服務(wù)器，返回 prepay_id。前端只需要接收 prepay_id 并傳遞就可以了，這樣的話更安全一些。

在前端組件中的代碼更加簡(jiǎn)單化

    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();
            }            
        }
        //請(qǐng)求支付數(shù)據(jù)
        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);                        
                    }
        });
    }

因?yàn)槲⑿诺闹Ц妒跈?quán)目錄要精確到子目錄級(jí)別，而 spa 的 url的形式大概為 /wechat/#/show/1、/wechat/#/list/type 這樣，就會(huì)產(chǎn)生發(fā)生支付的頁(yè)面報(bào)支付目錄未定義的問(wèn)題。針對(duì)這個(gè)問(wèn)題可以在根目錄后加加上 ? 符號(hào)鏈接，后面的地址就會(huì)被當(dāng)成參數(shù)解析，而不會(huì)當(dāng)成目錄。/wechat/?#/show/1、/wechat?#/list/type，這樣解析出來(lái)的目錄都是在 /wechat/ 根目錄下面

上傳圖片部分使用的是html5直接選擇圖片上傳

在 ios 設(shè)備下沒(méi)有問(wèn)題，會(huì)彈出選擇拍照、圖庫(kù)等選項(xiàng)。但是朋友說(shuō)在安卓下只能選擇圖庫(kù)，而且無(wú)法多選。上網(wǎng)查了一下，確實(shí)在部分安卓平臺(tái)下有這個(gè)問(wèn)題。加上 capture=camera" 可以直接使用拍照，但是選擇圖庫(kù)又沒(méi)了。。。

解決方案有兩個(gè)
1.使用微信的 jssdk 來(lái)選擇圖片，但是這樣上傳部分要修改。
2.在安卓下使用 vux 提供的 Actionsheet 組件來(lái)代替系統(tǒng)默認(rèn)的選擇，分別加上選擇圖庫(kù)、直接打開拍照。
好氣啊，手頭又沒(méi)有安卓設(shè)備，索性先放下不管了。

博客鏈接：https://lscho.com/tech/vue-we...，后續(xù)在博客更新