健康養生項目記錄 （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 未定義，強制刷新，因爲此過程短暫，刷新的行爲在用戶界面無感