vue用hbuilderX打包app嵌入h5方式雲打包和遇到的問題
vue用hbuilderX打包app就可以了，不過有兼容性問題，轉換rem的用不了，嵌入到app的webview里面變得很小了，另外還有返回鍵監聽的問題需要處理，否則按手機上的返回鍵不起作用，另外緩存問題，加載頁跳轉白屏問題也需要優化。
======================
安卓本地打包要用這個安卓的sdk項目，參考官網這個鏈接：http://ask.dcloud.net.cn/article/38
安卓本地打包我沒去搞，用的是它的雲打包
你下載一個hbuilderX
用hbuilderX打開Android打包源項目，點擊發行->雲打包即可
------------------------
ios的也可以直接用hbuilderX打包嗎？需要用蘋果電腦xcode工具嗎？
iOS項目，在mac電腦用xcode，打開HBuilder-Hello文件夾，就可以進行打包發布
iOS它也可以雲打包，但是那個是打包發布到appstore的，我們要本地打包，發布企業簽名版本
得弄台蘋果電腦用xcode才能打包企業簽名的
具體的怎么打包就比較通用，你可以任意百度一個ios xcode打包發布的方法都可以了，網上有很多
Manifest.json文檔說明 manifest配置 - DCloud問答
http://ask.dcloud.net.cn/article/94
================
vue打包成app你們用什么方式的？
有接管路由的方式(打包了部分頁面和靜態文件剩下部分動態api調用的)，有打包成原生的方式(體驗比較好，升級麻煩)，有嵌入h5的方式(升級容易體驗不好)，要頻繁升級的用那種比較好？
webpack只是開發和編譯build用的
網上看到很多用 hbuild工具打包app的
要打包成app給用戶安裝，打包成 apk ipa
還有很多功能要做的，要每周發布一個版本的
頁面和菜單都會變動的，功能還有很多要改的
還是直接嵌入個h5 webview才方便升級吧
你將生成的dist文件放進app工程里。
用android studio生成apk
下載disk靜態文件升級
下載資源包
關鍵什么時候讓用戶下載，怎么下載？
自己寫接口判斷
webview加載本地html
熱更新就別想了，ios都上不了架
上架肯定是上架不了的，區塊鏈的app都別想上架
區塊鏈的一開始就上不了應用市場的
--------------
還有一種方式是支持熱更新的
集成騰訊的Bugly支持熱更的（bugly熱更去掉了）
移動端熱更新方案（iOS+Android）
https://www.cnblogs.com/qiyer/p/6399692.html
===============
解決rem的用不了，嵌入到app的webview里面變得很小的方法：
main.js 加 import 'amfe-flexible'
responsive 改成px2rem-loader 兼容打包成app的rem轉換
注意：px2rem-loader amfe-flexible 插件要先用npm命令安裝，有報錯直接根據報錯信息找原因了。
=================
build/util.js
-------------------
exports.cssLoaders = function (options) {
options = options || {}
const cssLoader = {
loader: 'css-loader',
options: {
sourceMap: options.sourceMap
}
}
const postcssLoader = {
loader: 'postcss-loader',
options: {
sourceMap: options.sourceMap
}
}
const px2remLoader = {
loader: 'px2rem-loader',
options: {
remUnit: 75 //設計稿寬度/10
}
};
// generate loader string to be used with extract text plugin
function generateLoaders(loader, loaderOptions) {
const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader, px2remLoader]
if (loader) {
loaders.push({
loader: loader + '-loader',
options: Object.assign({}, loaderOptions, {
sourceMap: options.sourceMap
})
})
}
// Extract CSS when that option is specified
// (which is the case during production build)
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
}
// https://vue-loader.vuejs.org/en/configurations/extract-css.html
return {
css: generateLoaders(),
postcss: generateLoaders(),
less: generateLoaders('less'),
sass: generateLoaders('sass', { indentedSyntax: true }),
scss: generateLoaders('sass'),
stylus: generateLoaders('stylus'),
styl: generateLoaders('stylus')
}
}
=================
需要增加一個loading的界面
loading的界面是一張loading的圖（占滿屏幕），解釋：因為它現在是先加載app本地的一個html，然后再跳轉webview去miningGloabl h5網站
loading的界面不要和h5的啟動圖一樣，這樣就重復了
不是啟動頁，加載頁，類似打開天貓app那樣
app啟動過程解釋：
app會先訪問本地網頁（這個網頁需要全屏顯示一張圖），再跳轉訪問miningGlobal網頁（這里也有兩個啟動圖，給瀏覽器用戶看的）
還沒有進入到app，看不到菜單的過程
===============
注：只要准備一個logo 1024x1024.png的可以自動生成需要的規格圖標
（二）安卓 app打包：
1、安卓圖標配置
1）48*48
2）72*72
3）96*96
4）144*144
5）192*192
2、安卓啟動圖片設置
1）480*762
2）720*1242
3）1080*1882
---------------
ios app打包：
1、iphone圖標配置：
1）1024*1024
2、ipad圖標配置：
1）76*76
2）152*152
3）167*167
4）40*40
5）80*80
6）29*29
7）58*58
8）20*20
9）40*40
3、iphone啟動圖配置：
1）640*960
2）640*1136
3）1136*640（橫屏）
4）750*1334
5）1334*750（橫屏）
6）1242*2208
7）2208*1242
8）1125*2436
9）2436*1125（橫屏）
10）828*1792
11）1792*828（橫屏）
12）1242*2688
13）2688*1242（橫屏）
4、ipad啟動圖片配置
1）768*1024
2）1536*2048
3）1024*768
4）2048*1536
5）1668*2224
6）2224*1668
7）1668*2388
8）2388*1668
9）2018*2732
10）2732*2018
===============
vue 監聽安卓返回鍵
網上看到很多是用mui框架來實現的
單獨為了監聽返回鍵這功能加入一個ui框架感覺不行
看了源碼就監聽一個backbutton事件
自己寫個方法實現就可以了：
var listenerBackbutton = function() {
var time = new Date().getTime() // 用來存上一次按鍵時間
var url = location.hash.split('/')[1];
// 處於app首頁、login、start頁,滿足退出app操作
if (url === 'home' || url === 'login' || url === 'start') {
if (new Date().getTime() - time < 2000) { // 小於2s,退出程序
// navigator.app.exitApp();
plus.runtime.quit();
} else { // 大於2s，重置時間戳，
time = new Date().getTime();
}
return;
} else {
history.back(); // 不滿足退出操作，，返回上一頁
}
}
// 設置系統狀態欄背景色
document.addEventListener('plusready', function() {
plus.navigator.setStatusBarBackground("#0a122c");
plus.navigator.setStatusBarStyle('light');
plus.key.addEventListener('backbutton', listenerBackbutton, false);
});
======================
app嵌入h5接管啟動頁和監聽返回鍵功能
做個app殼嵌入webview的基本搞定了，加個監聽來源的判斷，app的就不加載啟動頁，直接在app那里加載啟動頁然后跳轉到h5首頁。返回鍵的也是監聽事件然后做對應處理就可以了。看起來基本上跟原生app沒有差別了。
================
服務器不穩定導致的，現在設置的是5秒加載時間，正常情況下不會白屏，韓總應該還沒有把網站切換到另外一台服務器上，如果大部分用戶會白屏就只能加長時間了
================
使用android app封裝了vuejs。 一個 activity中挑來挑去的那種。
結果發現，app對於html請求，僅僅請求一次，以后就全都緩存。
這一點對於尋常的 html頁面沒問題
但是對於vuejs來說，每次部署，都要把所有的js文件都重新編譯一下，js, css 文件名稱會變化。index.html文件內容也會變化。
直接導致vuejs部署后，app全面白屏.
所以，就必須不要緩存 index.html
解決辦法很簡單：
WebSettings settings = webView.getSettings();
//加上這句就可以了．
settings.setCacheMode(WebSettings.LOAD_NO_CACHE);
==================
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
index.html 單純加了上面幾個也沒用，打包的地方也需要配置下
==================
Manifest.json文檔說明 manifest配置 - DCloud問答
http://ask.dcloud.net.cn/article/94
cache
可選項，程序的緩存配置信息，JSON格式對象，包括以下字段：
mode：Webview窗口默認使用的緩存模式，可取值： "default" - 根據cache-control決定是否使用緩存數據，如果存在緩存並且沒有過期則使用本地緩存資源，否則從網絡獲取； "cacheElseNetwork" - 只要存在緩存（即使過期）數據則使用，否則從網絡獲取； "noCache" - 不使用緩存數據，全部從網絡獲取； "cacheOnly" - 僅使用緩存數據，不從網絡獲取（注：如果沒有緩存數據則會導致加載失敗）。 默認使用"default"。
"plus" : { "error" : { "url" : "error.html" }, "cache": { "mode":"noCache" },
"cache": {
"mode": "Webview窗口的默認緩存模式，可取值default、cacheElseNetwork、noCache、cacheOnly"
},
"noCache" - 不使用緩存數據
==================
A5雲打包-免費試用，網站打包APP，wap網站轉APP，網站封裝app，手機網站打包app
http://www.yundabao.com/
這個是收費的，初級版1500元/年，有很多功能不能使用的，建議還是用工具自己打包吧
==================
只要准備一個logo 1024x1024.png的可以自動生成需要的規格圖標
[HBuilder] 15:25:15.747 打包成功后會自動返回下載鏈接。
[HBuilder] 15:25:15.747 打包過程查詢請點菜單發行-查看雲打包狀態。
[HBuilder] 15:25:15.747 周五傍晚等高峰期打包排隊較長，請耐心等待。
[HBuilder] 15:25:15.747 如果是為了三方SDK調試，請使用自定義基座（菜單運行-手機或模擬器-制作自定義基座），不要反復打包。
等待一段時間（大概幾十分鍾）會顯示下載鏈接（這個是臨時鏈接只能下載5次）。。。。
[HBuilder] 15:48:39.177 項目 toapp [H512111E9]的打包狀態：
[HBuilder] 15:48:39.177 時間: 2019-03-28 15:47:38 類型: Android 正在打包
[HBuilder] 15:49:40.449 項目 toapp [H512111E9]打包成功：
下載地址: https://service.dcloud.net.cn/build/download/3adec3e0-510c-11e9-a737-xxxxxxxx （注意該地址為臨時下載地址，只能下載5次）