demo地址：https://github.com/fanlinqiang/vue-cordova-demo
使用vue-cli-plugin-cordova將Cordova集成到Vue Cli應用程序中
版本
cordova: 9.0.0 (cordova-lib@9.0.1)
@vue/cli: 4.5.3
vue: 2.6.11
可能會用到的工具
npm i -g ios-deploy --unsafe-perm=true
相關鏈接
修改 vue.config.js
添加配置調試配置
module.exports ={
// 不添加在ios上調試時會啟動白屏
devServer: {
https: false
}
}
添加h5打包模式
package.json中scripts中增加：
{
scripts: {
... ...
"h5-build": "vue-cli-service build --mode h5"
... ...
}
}
項目根目錄下增加文件.env.h5
NODE_ENV=production
VUE_APP_FOR_H5=true
vue.config.js文件中配置對應的訪問路徑
const isEnvH5 = !!process.env.VUE_APP_FOR_H5
module.exports = {
publicPath: isEnvH5 ? '/demo/' : '',
pluginOptions: isEnvH5 ? {} : {
cordovaPath: 'src-cordova'
}
}
cordova常用插件
白名單插件cordova-plugin-whitelist
詳見：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/
獲取設備信息插件cordova-plugin-device
詳見：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/
狀態欄插件cordova-plugin-statusbar
詳見：https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-statusbar/index.html
讀取應用程序的版本cordova-plugin-app-version
打開應用內瀏覽器窗口(或者系統默認瀏覽器)cordova-plugin-inappbrowser
控制應用程序的啟動屏幕cordova-plugin-splashscreen
可使用插件cordova-res快速生成icon及splash
適配ihonex類型
iOS11 新增特性，Webkit 的一個 CSS 函數，用於設定安全區域與邊界的距離，有四個預定義的變量：
- safe-area-inset-left：安全區域距離左邊邊界距離
- safe-area-inset-right：安全區域距離右邊邊界距離
- safe-area-inset-top：安全區域距離頂部邊界距離
- safe-area-inset-bottom：安全區域距離底部邊界距離
注意：當 viewport-fit=contain 時 env() 是不起作用的，必須要配合 viewport-fit=cover 使用。對於不支持env() 的瀏覽器，瀏覽器將會忽略它。
適配步驟
- 設置網頁在可視窗口的布局方式
<!-- 新增 viweport-fit 屬性，使得頁面內容完全覆蓋整個窗口,只有設置了 viewport-fit=cover，才能使用 env()-->
<meta name="viewport" content="width=device-width, viewport-fit=cover">
- 頁面主體內容限定在安全區域內
根據實際頁面場景選擇，如果不設置這個值.例：可能存在小黑條遮擋頁面最底部內容的情況
body {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
或使用 @supports 隔離兼容樣式
@ supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
div {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
}
使用更快的WKWebView替代WKWebView cordova-plugin-wkwebview-engine
WKWebView 在性能方面比 UIWebview顯著的快，且蘋果從2020年4月開始不允許基於UIWebView的App提交，后續全部需要使用WKWebView詳見： https://github.com/apache/cordova-plugin-wkwebview-engine#readme
WkWebview啟動的index.html不能訪問http/https請求，需要結合cordova-plugin-wkwebview-file-xhr，此插件是oracle開發，攔截所有wkwebview請求，利用原生的方式請求http/https（默認只攔截https，如果需要攔截http，需要config.xml中配置）。
還有，模擬器下的wkwebview是可以顯示file://路徑的本地圖片文件的，但是真機下只能顯示 Tmp 目錄下的圖片文件，所以如果你有下載、顯示本地圖片的，需要更換文件目錄為 Tmp目錄。
注：Tmp 目錄是 file:///var/mobile/Containers/Data/Applications//tmp/用 cordova.file.tempDirectory 常量可以得到這個目錄
點擊物理回退按鍵時的響應cordova-plugin-backbutton
詳見：https://github.com/mohamed-salah/phonegap-backbutton-plugin
實例：https://blog.csdn.net/jiangxuexuanshuang/article/details/88684699
對一些插件的修改
src-cordova/plugins/cordova-plugin-wkwebview-engine/src/ios/CDVWKWebViewEngine.m
configuration.mediaPlaybackAllowsAirPlay = [settings cordovaBoolSettingForKey:@"MediaPlaybackAllowsAirPlay" defaultValue:YES];
// line:79 fix http limit,
[configuration.preferences setValue:@YES forKey:@"allowFileAccessFromFileURLs"];
if (@available(iOS 10.0, *)) {
[configuration setValue:@YES forKey:@"allowUniversalAccessFromFileURLs"];
}
return configuration;
一些錯誤的記錄
command not found: zipalign on build android apk
- 查看當前zipalign目錄
find ~/Library/Android/sdk/build-tools -name "zipalign"
- 在
.bashrc中添加命令路徑，例：
# add zipalign
export PATH="$PATH:$HOME/Library/Android/sdk/build-tools/28.0.3"
- 即時生效
source .bashrc