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

image-20210421135731744

五、问题汇总

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>
相关文章
相关标签/搜索