vue.js+vux項目總結

最近作完一個vue.js+vux的移動端項目，剛剛完成上線，記錄一下開發過程當中遇到的問題，避免之後再次遇到時，能夠翻閱查看。

---

1. 沒法設置服務器發送過來的cookie

這是一個保存登陸狀態的問題，後臺發送過來的session前端沒法保存，解決辦法
在main.js設置

axios.defaults.withCredentials = true;

2. 請求接口跨域

這個問題主要時後臺處理的，前端這邊作的比較少

3. axios post請求後臺沒法收到數據的問題

先要設置請求頭

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

傳數據：一、URLSearchParams();

const url ='http://****你的接口****';
var params = new URLSearchParams();
params.append('key1', 'value1');       //你要傳給後臺的參數值 key/value
params.append('key2', 'value2');
params.append('key3', 'value3');
this.$axios({
    method: 'post',
    url:url,
    data:params
}).then((res)=>{
    
});

這樣的話 後臺是能夠收到數據的 可是兼容性很是很差 ，ie徹底不兼容。因此放棄

二、使用qs

安裝qs,在 main.js裏引入

import axios from 'axios';
import qs from 'qs';
Vue.prototype.$qs = qs;

請求方法

let postData = this.$qs.stringify({
    key1:value1,
    key2:value2,
    key3:value3,
});
this.$axios({
    method: 'post',
    url:'url',
    data:postData
}).then((res)=>{
    
});

這樣後臺就能收到數據了

4. vux 的x-button添加@click點擊事件無效

這個問題 主要是剛使用vux ，沒有認真看文檔
解決辦法很簡單 使用 @click.native
關於爲何要加 .native 修飾符，能夠看這個回答：
https://segmentfault.com/q/10...

5. 圖片上傳方法

<input type='file' accept='images/*' @onchange='onChange'>

可是input 的onchange事件在微信 沒法起做用
因此用了一個vue組件vue-img-inputer
vue-img-inputer組件使用方法

<VueImgInputer
      class="idCardImg"
      v-model="idCardBackImg"
      theme="light"
      accept="image/*"
      :imgSrc="idCardBackUrl"
      :onChange="onChange"
      :maxSize="5242880"
      placeholder="請上傳身份證反面圖片"
      noMask
      size="small">
  </VueImgInputer>


onChange(file){
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onloadend = function() {
        reader.result
    };
},

6. vue簽名

vue-signature組件[3]

<vueSignature class="vueSignature" ref="signature" :sigOption="option" :w="'100%'" :h="'100vh'"></vueSignature>

7.移動端橫豎屏問題

用css來判斷

/*豎屏（portrait）：*/
    @media screen and (orientation:portrait){
  
    }

    /*橫屏（landscape）：*/
    @media screen and (orientation:landscape){
        
    }

8.判斷是不是安卓仍是ios

//判斷是不是安卓仍是ios  
function isAndroid_ios(){  
    var u = navigator.userAgent, app = navigator.appVersion;  
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器  
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端  
    return isAndroid==true?true:false;  
}

9.微信支付

getWxPayData(){
            var vm = this;
            let orderid = this.$route.query.orderid;
            console.log(orderid);
            let postData = this.$qs.stringify({
                is_apple:1,
                orderid:orderid
            })
            this.$axios({
                method: 'post',
                url:'',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
                },
                data:postData
            }).then((res)=>{
                if(res.data.errCode==201){
                    this.$vux.toast.show({
                        type:'warn',
                        text: res.data.retMsg
                    })
                }else {
                    vm.weixinPay(JSON.parse(res.data));
                }
            });
        },
        weixinPay(data){
            var vm= this;
            if (typeof WeixinJSBridge == "undefined"){//微信瀏覽器內置對象。參考微信官方文檔
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));
                    document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));
                }
            }else{
                vm.onBridgeReady(data);
            }
        },
        onBridgeReady:function(data) {
            var vm = this;
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId": data.appId,     //公衆號名稱，由商戶傳入
                    "timeStamp": data.timeStamp, //時間戳，自1970年以來的秒數
                    "nonceStr": data.nonceStr, //隨機串
                    "package": data.package,
                    "signType": data.signType, //微信簽名方式：
                    "paySign": data.paySign //微信簽名
                },
                function (res) {
                    // 使用以上方式判斷前端返回,微信團隊鄭重提示：res.err_msg將在用戶支付成功後返回ok，但並不保證它絕對可靠。
                    if (res.err_msg == "get_brand_wcpay_request:ok") {
                        vm.$vux.toast.show({
                            text: '支付成功',
                            type:'success',
                            onHide () {
                                vm.$router.push('/home');
                            }
                        })
                    } else if (res.err_msg == "get_brand_wcpay_request:fail") {
                        vm.$vux.toast.show({
                            text: '支付失敗' + res.err_msg,
                            type:'warn',
                            onHide () {
                                vm.$router.push('/home');
                            }
                        })
                    }
                }
            );
        },

參考：

【移動端】移動端判斷橫豎屏的5種解決方案
移動端如何讓頁面強制橫屏
微信內H5調起支付