锐客网

  1. 首页 > 睿知 > it技术 > >

健康养生（flex 兼容写法在打包后丢失安卓4.4显示错误）

IT知识健康养生显示错误

亦余心之所善兮，虽九死其犹未悔。这篇文章主要讲述健康养生（flex 兼容写法在打包后丢失安卓4.4显示错误）相关的知识，希望能为你提供帮助。
此次项目需要兼容 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" ]

【健康养生（flex 兼容写法在打包后丢失安卓4.4显示错误）】  "iOS > = 8","Firefox > = 20","Android > 4.4"
  2. vant    vant-swipe （有赞） vh 兼容性
有赞的轮播插件在低版本安卓机中，样式错乱叠堆
健康养生（flex 兼容写法在打包后丢失安卓4.4显示错误）

文章图片

原因可能是轮播组件的高度追溯父容器的 height ，而父容器不能固定一个高度，以 height : 100vh ; 替代，但是低版本安卓不兼容，高度错乱，只要在 vue 的 mounted 钩子中重新定义 父容器高度即可
// html

  < van-swipe :style="`height:${viewHeight}px`" :loop="false" :touchable=\'false\' :show-indicators=\'false\'>

// js
mounted(){ this.$nextTick(function(){ let h = $(window).height() this.viewHeight = h }) }

  3. 在  protocol 协议中由于要在 href 中用到回调，需要提前定义好方法，如：
window.location.href = https://www.songbingjia.com/'protocol://getuserinfo#userinfocallback\';

functionuserinfocallback () {
// ...
}

但是 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="https://www.songbingjia.com/android/www.baidu.com" target="_blank"> < /a> ，需去掉  target="_blank"
7. 项目中通过 protocol 从app获取用户信息 
setTimeout(function () { window.location.href = https://www.songbingjia.com/'protocol://getuserinfo#userinfocallback\'; }, 0);

把这段代码放在    $(function) 中，但是同一个函数块里的其他方法失效
$(function () { // 设置 rem 单位 setRem(document, window) // protocol 获取 token setTimeout(function () { window.location.href = https://www.songbingjia.com/'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 = https://www.songbingjia.com/'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 未定义，强制刷新，由于此过程短暂，刷新的行为在用户界面无感

    推荐阅读


    上一篇：20180907-Java Applet基础

    下一篇：dapper 最简单操作示例