...

by Zengjing 2017-12-08

基于Cordova与Vue打包APP操作指南

WebApp开发,Cordova打包构建App是最终工序。以小钱袋子App打包构建为实例,亲测记录使用Cordova打包构建全过程,关键命令与说明都列出了,全是干货。小钱袋子App记账,不是一般的丝滑!

环境搭建
  • JDK安装
  • ANDROID SDK安装
  • 环境变量设置
  • Cordova安装($ npm install -g cordova
创建工程

语法:cordova create 文件夹名 包名 app名

cordova create cashbook com.tcdos.app.cashbook 小钱袋子
工程目录说明
  • hooks:存放自定义cordova命令的脚本文件
  • platforms:平台目录,支持Android、iOS、WP等平台
  • plugins:插件目录
  • www:工程代码文件目录(Vue工程编译包)
  • config.xml:配置文件
添加平台支持
cordova platforms add android --save 

如果上述命令长时间没响应,则执行下面命令

cordova platform remove android
cordova platforms add android --save 
插件安装与删除

语法:

cordova plugin add 插件官方名称
cordova plugin remove 插件官方名称

建议不要安装Crosswalk(增加包体积、Cookie写入不正常)

编译打包
cordova build android 

默认输出debug版本

cordova  build android --release 

则输出release未签名版本

签名证书
keytool -genkey -v -keystore E:\debug.keystore -alias cashbook -storepass tcdos -keypass tcdos -keyalg RSA -validity 14000
  • keystore E:\debug.keystore表示生成的证书及其存放路径,如果直接写文件名则默认生成在用户主目录下
  • storepass / keypass:证书密码
  • alias:证书的别名
  • validity:证书的有效期天数
编译签名包
jarsigner -verbose -keystore debug.keystore android-release-unsigned.apk cashbook

数字签名放到生成的未签名的apk所在的目录下

APP加固

360APP加固,注册账户上传APP与证书,生成加固与签名版APP

VUE工程包的修改
  • 修改App启动监控方式
  • 修改配置生成目录
  • 加载cordova.js
  • 注意打包之后图片与文件引用地址与目录

收获点赞: 0

评论

...