cordova打包vue程序

[TOC]css

一、安裝cordova

平臺： Windows10 vue

必需環境: node/ JDK / Adroid SDK / Gradle 不要忘了配置他倆的環境變量node

• 全局安裝cordova

npm install -g cordova

一、建立cordova項目，導入vue

• 建立android

  cordova create firstApp

• 添加安卓平臺支持ios

  cordova platform add android

• 查看本工程的依賴項是否安裝好 JDK,Android SDK，gradle, android-targetweb

  cordova requirements

• 導入vueapache

  1. 爲了方便，能夠直接修改vue.config.js的打包路徑到，cordova項目的www目錄下。就行了

  2. vue.config.js 修改outputDir到你本身cordova項目的路徑npm

     module.exports = {
       outputDir: '../cordova/www',  
       publicPath: './',

1. 打包後。剩下的，就交給cordova去作了

二、導入各類插件

須要啥插啥

好比 微信的 cordova plugin add cordova-plugin-wechat --variable wechatappid=xxxx微信

等一系列，可去官網看微信開發

3.config.xml的配置

==config.xml==的配置有不少，自行查找，說幾個跟打包APK，微信登陸相關的

id屬性，就是安卓程序包名，未來在微信開發平臺上須要用到

<widget id="com.xxxxxxxx.h5app"  ios-CFBundleIdentifier="xxxxx" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name></name>
    <description>
    </description>
    </author>

三、調試與打包成APK

3.1 生成調試的APK

cordova run android

==接下來，你能夠選擇打包==

打包成未簽名的APK

cordova build android --release

造個證書

keytool -genkeypair -alias 別名 -keyalg RSA -validity 20000 -keystore aaaaa.keystore

給apk簽名

jarsigner -verbose -keystore aaaaa.keystore -signedjar aaaa.apk aaaa-unsigned.apk 別名

jarsigner -verbose -keystore [簽名文件路徑] -signedjar [簽名後的apk文件路徑] [未簽名的apk文件路徑] [證書別名]

參數說明：
-verbose 簽名時輸出詳細信息，便於查看簽名結果
-keystore 指定簽名文件的存放路徑
-signedjar 指定簽名後的apk文件存放路徑

簽完名，沒完，微信登陸的話須要去微信開發平臺綁定 程序包名，和簽名

Android平臺
應用下載地址：未填寫
應用簽名：xxxxxxxxxxxxxxxxxxxxxxxxxxxxx
包名：com.xxxxxxxxxxxxxx.h5app

五、問題彙總

5.1 cordova run android 時候 gradle的報錯

FAILURE: Build failed with an exception. 失敗:構建失敗，並出現異常。

• Where:
  Initialization script 'F:\gradle-7.0\init.d\init.gradle' line: 1
• What went wrong:
  Could not compile initialization script 'F:\gradle-7.0\init.d\init.gradle'.

• startup failed:
  initialization script 'F:\gradle-7.0\init.d\init.gradle': 1: Unexpected input: '{' @ line 1, column 13.

  allprojects {

問題出現的願意，我在安裝並配置gradle的時候，在網上隨便找的教程， maven { url 'file:///C:/Java/maven_repository'} 路徑這個地方斜槓寫成反斜槓了。語法錯誤編譯不過。淦，改了就行了

allprojects {
    repositories {
        maven { url 'file:///C:/Java/maven_repository'}
        mavenLocal()
        maven { name "Alibaba" ; url "https://maven.aliyun.com/repository/public" }
        maven { name "Bstek" ; url "http://nexus.bsdn.org/content/groups/public/" }
        mavenCentral()
    }

    buildscript { 
        repositories { 
            maven { name "Alibaba" ; url 'https://maven.aliyun.com/repository/public' }
            maven { name "Bstek" ; url 'http://nexus.bsdn.org/content/groups/public/' }
            maven { name "M2" ; url 'https://plugins.gradle.org/m2/' }
        }
    }
}

5.2 安卓版本太高，報錯 net::ERR_CLEARTEXT_NOT_PERMITTED

• 從Android 9.0（API級別28）開始，默認狀況下禁用明文支持。所以http的url均沒法在webview中加載，我這裏選的是安卓9，API29，因此不能訪問。

• 解決辦法，修改設置，開啓明文支持

  • 文件 platforms\android\app\src\main\AndroidManifest.xml，添加 android:hardwareAccelerated="true"

    <application android:hardwareAccelerated="true">  
    ........................................
    </application>