点击刷新
此次项目需要兼容 andriod 4.4 ，ios 8 . 故此带来了不少兼容问题
1. vue 项目在本地表现正常，打包后出现部分样式丢失。
如果只是小范围的影响，可以用以下注释跳过 webpack 对 css 的压缩计算
/*! autoprefixer: off */ -webkit-box-orient: vertical; /* autoprefixer: on */
大范围的样式更改，可以直接修改 / build / webpack.prod.conf.js 文件（相关文章）
// new OptimizeCSSPlugin({ // cssProcessorOptions: config.build.productionSourceMap // ? { safe: true, map: { inline: false } } // : { safe: true } // }),
为了自动补全css前缀，配置 autoprefixer ，在package.json里面找到 browserslist ，加上
"browserslist": [ "> 1%", "last 2 versions", "not ie <= 8", "iOS >= 8", "Android >= 4.4", "Firefox >= 20" ]
"iOS >= 8","Firefox >= 20","Android > 4.4"
2. vant vant-swipe （有赞） vh 兼容性
有赞的轮播插件在低版本安卓机中，样式错乱叠堆
原因可能是轮播组件的高度追溯父容器的 height ，而父容器不能固定一个高度，以 height : 100vh ; 替代，但是低版本安卓不兼容，高度错乱，只要在 vue 的 mounted 钩子中重新定义 父容器高度即可
// html
// js
mounted(){ this.$nextTick(function(){ let h = $(window).height() this.viewHeight = h }) }
3. 在 protocol 协议中由于要在 href 中用到回调，需要提前定义好方法，如：
window.location.href = 'protocol://getuserinfo#userinfocallback';
function userinfocallback () {
// ...
}
但是 webpack 打包后会对方法名进行混淆，在执行回调时找不到 function 而报错。知道了原因就很容易解决了，只要把方法定义为 window 属性即可
window.userinfocallback = (result) => { // ... }
4. 安卓低版本的机子 有可能存在 promise 的兼容问题，webpack 加载 promise 有好几种方式，有些情况下都不行，最暴力的方法就是直接加载一个 promise 的库
// cmd (c)npm install es6-promise --save-dev // main.js import promise from 'es6-promise' promise.polyfill()
5. 上线打包时关闭 console
在 / build / webpack.prod.conf.js（生产环境配置文件）中插入以下：
new UglifyJsPlugin({ uglifyOptions: { compress: { warnings: false, drop_console: true, // [+] console pure_funcs: ['console.log'] // [+] 移除console } }, sourceMap: config.build.productionSourceMap, parallel: true }),
6. a标签跳转地址，只改变了路由参数，由于 keep-alive ，页面没有及时刷新
<keep-alive include="a"> <component> <!-- name 为 a 的组件将被缓存！ --> <!-- 可以保留它的状态或避免重新渲染 --> </component> </keep-alive> <keep-alive exclude="a"> <component> <!-- 除了 name 为 a 的组件都将被缓存！ --> </component> </keep-alive>
页面上 js 部分
watch: { '$route' (to, from) { // 页面只是路由参数发生变化时，页面并不刷新，所以需要监听路由变化 let id = this.$route.params.id if(id){ this.content = '' this.getContent(id) } } },
且在 webview 中， a 标签打开新窗口会被禁用，类似 <a href="www.baidu.com" target="_blank"></a>，需去掉 target="_blank"
7. 项目中通过 protocol 从app获取用户信息
setTimeout(function () { window.location.href = 'protocol://getuserinfo#userinfocallback'; }, 0);
把这段代码放在 $(function) 中，但是同一个函数块里的其他方法失效
$(function () { // 设置 rem 单位 setRem(document, window) // protocol 获取 token setTimeout(function () { window.location.href = 'protocol://getuserinfo#userinfocallback'; }, 0); // 设置分享数据 wnlShare.setShareData({ url: location.href, // eslint-disable-line title: '健康一点——你的健康我关心', text: '根据你的身体健康，推荐调养改善建议', image: 'https://healthcdn.51wnl-cq.com/67a3b033-296d-dfe7-1809-721579e4f58b.jpg' }) })
wnlShare.setShareData 就不能在正确的阶段执行，app中无法调用分享组件，排查后发现 protocol 需分开运行
window.onload = function () { // protocol 获取 token setTimeout(function () { window.location.href = 'protocol://getuserinfo#userinfocallback'; }, 0); } $(function(){ // 设置 rem 单位 setRem(document, window) // 设置分享数据 wnlShare.setShareData({ url: location.href, // eslint-disable-line title: '健康一点——你的健康我关心', text: '根据你的身体健康，推荐调养改善建议', image: 'https://healthcdn.51wnl-cq.com/67a3b033-296d-dfe7-1809-721579e4f58b.jpg' }) })
8. 打包后出现 webpackJsonp is not defined
原因是 manifest.js 没有加载完成，window没有定义webpackJsonp ，优先调用了 vendor.js 和 app.js 中的 webpackJsonp，网上很多说法是在 HtmlWebpackPlugin 插件中添加
chunks: ['manifest', 'vendor', 'app'],
但是效果不明显，从问题根源出发，直接在 vendor.js 和 app.js 中添加语句
if (!window.webpackJsonp) location.reload()
若 webpackJsonp 未定义，强制刷新，由于此过程短暂，刷新的行为在用户界面无感
© 著作权归作者所有
相关热门文章
发表评论
