健康養生項目記錄 （flex 兼容寫法在打包后丟失、安卓4.4顯示錯誤、低版本機不兼容 promise、打包關閉console、keep-alive=>exclude、protocol）

此次項目需要兼容 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 未定義，強制刷新，由於此過程短暫，刷新的行為在用戶界面無感