关于前端:cordova打包vue程序

[TOC]

1、装置 cordova

平台 ：Windows10

必须环境: node/ JDK / Adroid SDK / Gradle 不要忘了配置他俩的环境变量

• 全局装置 cordova

npm install -g cordova 

1、创立 cordova 我的项目，导入 vue

• 创立

  cordova create firstApp 

• 增加安卓平台反对

  cordova platform add android

• 查看本工程的依赖项是否装置好 JDK,Android SDK，gradle, android-target

  cordova requirements   

• 导入 vue

  1. 为了不便，能够间接批改 vue.config.js 的打包门路到，cordova 我的项目的 www 目录下。就好了

  2. vue.config.js 批改 outputDir 到你本人 cordova 我的项目的门路

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

1. 打包后。剩下的，就交给 cordova 去做了

2、导入各种插件

须要啥插啥

比方 微信的 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>

3、调试与打包成 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、问题汇总

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>