最近做完一个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';传数据：1、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完全不兼容。所以放弃
2、使用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');
}
})
}
}
);
},