转载-vue在微信中遇到的问题

1.在vue中的hash模式下微信登录在URL里用餐时形式返回的userToken会被微信浏览器默认截去

    解决方法：www.hxsup.com/wx/#/pay   改为 [www.hxsup.com/wx/1=1#/pay](http://www.hxsup.com/1=1#/pay)

2.微信公众号项目发布新版本有些用户会因为微信浏览器缓存问题造成白屏或接口请求错误

暂时没有好的解决方法，缓存问题主要是发生在ios系统版本在10.0到11之间，比较好的做法是在webpack打包的时候给js和css文件加上版本号

3.video标签在微信浏览器中会被微信默认的 x5内核的播放器所替换，导致再手机端无法实现设计图效果

我暂时的解决办法是通过vue-video-player监听用户点击事件来全屏（微信新版本禁止在微信浏览器内以小窗形式播放视频），被强制替换后有可能会受到运营商的流量劫持，即在视频播放完成后会弹出广告

4.关于vue在微信中校验用户登录信息的问题

在axios中统一添加response拦截，若后台返回用户状态为未登录，则跳转微信登录授权地址，老版本微信允许隐式授权，新版本统一显式授权，后台会重定向到首页地址并将用户token作为参数拼在URL中，在vue生命周期中获取token并转存loaclstorage，token失效时间由后台控制。

在axios中统一添加请求拦截，将localStorage中的token放入请求头中，由后台校验

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 将token给到一个前后台约定好的key中，作为请求发送
let token = localStorage.getItem('userToken')
let deviceNumber = localStorage.getItem('deviceNumber')
if (token) {
config.headers['Authorization'] = token
config.headers['deviceNumber'] = deviceNumber
}
return config
}, function (error) {
// Do something with request error
return Promise.reject(error)
})

//处理请求返回拦截器

axios.interceptors.response.use( // 处理返回信息

function (res) {

if (res.data.code == 90) {

console.log(1)

location.href = '[http://www.hxsup.com/h5/#/?couponFlag=1](http://www.hxsup.com/h5/#/?couponFlag=1)'

}

return res

// return data

},

error => {

return Promise.reject(error)

}

)

export default axios

5.vue中的es6语法在ios10.0.7中会偶尔发生白屏的原因，暂不清楚原因，但是将语法降级可以解决这类问题
暂时好像只想到这么多，以后留待补充。。。