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调起支付