Cordova打包Vue項目（Android）

時間  2020-08-08 標籤 cordova 打包 vue 項目 android

前面本身學習搭建了一個簡單的Vue項目
因爲考慮到公司須要翻新的項目是Android，因此學習下用Cordova打包
踩坑持續更新javascript

前置條件

Android環境以及Java環境
  • Android環境
    • 因爲機器上以前安裝過Android Studio，因此只須要配置下環境變量就能夠了
    • 個人電腦 > 屬性 > 高級系統設置 > 環境變量
    • 在系統變量裏添加ANDROID_HOME，值爲Android安裝目錄
      在這裏插入圖片描述
    • 修改系統變量Path，添加%ANDROID_HOME%\tools和%ANDROID_HOME%\platform-tools
  • Java環境
    • 安裝Java環境後遇到了Javac錯誤的問題，解決方案以下
    • 在系統變量裏添加JAVA_HOME，值爲Java安裝目錄
      在這裏插入圖片描述
    • 修改系統變量Path，添加%JAVA_HOME%\bin\和%JAVA_HOME%\jre\bin\

No.1 安裝Cordova

若是安裝過就不用再安裝了
　
這裏解釋下爲何用 8.1.2 版本html

由於我當時默認 npm install -g cordova 安裝的話是默認 9.0.0 版本的
可是 9.0.0 版本 cordova build android 的時候報錯
　　Using 「requireCordovaModule」 to load non-cordova module 「q」 is not supported.
關於這個錯誤百度搜索說是 9.0.0 版本的坑，具體緣由未知，使用 8.1.2 版本正常
若想深刻了解可參考GitHub上的issues
附上連接：https://github.com/xpbrew/cordova-sqlite-storage/issues/856前端

npm install -g cordova@8.1.2

No.2 新建Cordova項目

cmd 執行四步命令（可簡化爲三步）vue

// cordovaApp：項目的目錄名稱(path)
// com.cordova.test：項目的ID，用於寫入 config.xml 的 widget 中(ID)
// HelloWorld：應用程序的顯示名稱(name)
// 項目的可選配置項(options)
// --template：可執行項目的模版文件
// --copy-from：指定 src
// --link-to：將前端資源目錄連接到 cordova 項目的 www 目錄下
cordova create cordovaApp com.cordova.test HelloWorld

// 進入 cordovaApp 項目目錄
cd cordovaApp

// 添加插件（此步驟可忽略），預防部分機型 webView 版本低致使 Vue App 真機白屏
cordova plugin add cordova-plugin-crosswalk-webview

// 添加 Android 平臺
// 執行此步驟會有以下提示：
// So the minSdkVersion of Cordova project is configured to 16 by default.
// 是由於 cordova-plugin-crosswalk-webview 對 minSkd 的版本有限制
cordova platform add android

No.3 修改Vue項目

  • 修改Vue項目根目錄下的index.html文件

    在head中加入以下代碼java

    <!--防止跨站腳本攻擊 start-->
<!--非必須，但建議添加。可能致使頁面樣式改變，如若改變請註釋掉-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<!--防止跨站腳本攻擊 end-->
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">

    在body中引入cordova.js，示例以下android

    <body>
    <div id="app"></div>
    <script type="text/javascript" src="cordova.js"></script>
    <!-- built files will be auto injected -->
</body>
  • 修改config文件夾下的index.js文件
    // 修改 build 中 assetsPublicPath 的值爲
build: {
	assetsPublicPath: './',
}
  • 引入vue-cordova，在Vue項目終端執行
    npm install vue-cordova --save
  • 修改src文件夾下的main.js文件，添加以下代碼
    import VueCordova from 'vue-cordova'
Vue.use(VueCordova);
  • 運行Vue項目，若運行成功，執行項目打包

    運行可能會報Uncaught SyntaxError: Unexpected token '<'錯誤，可忽略git

    // 運行 Vue 項目
npm run dev

// 執行項目打包
npm run build

No.4 將編譯後的Vue文件放至Cordova項目中並編譯apk

  • 將Vue項目dist文件夾下全部內容複製到Cordova項目www文件夾下，並替換
  • 在Cordova項目終端執行
    cordova build android
  • 若執行成功，則將Cordova項目platforms\android\app\build\outputs\apk\debug中的app-debug.apk文件拷貝到安卓手機安裝便可

關於簽名

  • release模式編譯apk
    cordova build android --release
  • 生成簽名證書
    // -genkey: 執行生成數字證書
// -v: 將生成證書的詳細信息打印置 dos 窗口
// -keystore XXX.keystore: 數字證書的文件名爲 XXX.keystore（XXX自定義）
// -alias XXX.keystore: 證書別名
// -keyalg RSA: 生成密鑰文件採用 RSA 算法
// -validity: 證書有效期
keytool -genkey -v -keystore XXX.keystore -alias XXX.keystore -keyalg RSA -validity 36500
  • 在Cordova項目根目錄下新建一個文件夾waitsign，將第一步產生的apk包和第二步產生的簽名包放進去
    cd waitsign

jarsigner -verbose -keystore XXX.keystore -signedjar name.apk app-armv7-release-unsigned.apk XXX.keystore
  • name.apk即爲已簽名apk
  • 查看簽名信息（md五、SHA1等）
    keytool -list -v -keystore ./XXX.keystore -storepass "你設置的密碼"

踩坑

  • 若最終編譯報錯，是由於插件對minSkd的版本有限制（No.2中已說明）
    uses-sdk:minSdkVersion 16 cannot be smaller than version 19 declared in library...
	Suggestion: use a compatible library with a minSdk of at most 16,
    or increase this project's minSdk version to at least 19,
    ......

    修改Cordova項目platforms\android\CordovaLib中的AndroidManifest.xml文件github

    <!--將 minSdkVersion 的值改成 16-->
<uses-sdk android:minSdkVersion="16" />

    修改Cordova項目platforms\android\app\src\main中的AndroidManifest.xml文件web

    <!--將 minSdkVersion 的值改成 16-->
<uses-sdk android:minSdkVersion="16" android:targetSdkVersion="27" />

    修改Cordova項目platforms\android中的build.gradle文件算法

    allprojects {    
	// ......
	// 其餘配置
    // ......
    project.ext {        
    	// ......
        defaultMinSdkVersion=16 // 將此處的值改成 16 
        //...... 
    }
}
  • 從新執行cordova build android
  • 若編譯依舊報錯
    error: resource android:attr/fontVariationSettings not found.
error: resource android:attr/ttcIndex not found.

    修改Cordova項目platforms\android中的build.gradle文件，在末尾添加

    configurations.all {
    resolutionStrategy {
        force 'com.android.support:support-v4:27.1.0'
    }
}

    修改Cordova項目platforms\android\app中的build.gradle文件，在末尾添加

    configurations.all {
    resolutionStrategy {
        force 'com.android.support:support-v4:27.1.0'
    }
}
  • 從新執行cordova build android編譯成功
  • 若安裝apk成功，打開app後報錯
    Mismatch of CPU Architecture

The Crosswalk Project Service must be updated to match the CPU architecture of the device. Please install it from the app store, then restart app HelloWorld.

    修改Cordova項目platforms\android\app中的build.gradle文件

    android {
    productFlavors {        
    	// ......
    	// 其餘配置
    	// ......
    	        	
    	// 添加代碼（若已存在則忽略） start 
    	armv7 {
            ndk {
                abiFilters = ["armeabi-v7a"]
            }
        }
        x86 {
            ndk {
                abiFilters = ["x86"]
            }
        }
    	// 添加代碼 end
    }
}
  • 經測試發現Cordova項目platforms\android\app\build\outputs\apk\armv7\debug文件夾下的app-armv7-debug.apk可在低版本webView機型上成功安裝並運行
  • 若打開app後頁面沒法跳轉，是由於Cordova打包Android時不能使用懶加載且路由模式不能使用history，請修改Vue項目src\router文件夾下index.js中相關內容
  • 今天執行cordova build android時忽然就報錯了
    FAILURE: Build failed with an exception.
* What went wrong:
Execution failed for task ':app:transformClassesWithDexBuilderForArmeabiDebug'.
> com.android.build.api.transform.TransformException: java.lang.IllegalStateException: Dex archives: setting .DEX extension only for .CLASS files
......
  • 最終在Cordova項目終端執行cordova clean而後從新編譯問題解決，2019-11-17記錄
联系我们 沪ICP备13005482号-10