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

Posted 2021-01-13 晨の风

此次项目需要兼容 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

  <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 = \'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 未定义，强制刷新，由于此过程短暂，刷新的行为在用户界面无感