Cordova+Vue+Vux+热更新+打包release版本+签名 (2019-4-20实践)

流程总结,意在帮助快速实践操作得真理 -- 具体步骤详情或含义 请留言询问或百度。谢谢。

环境配置:

  1. Node 
  2. JDK 1.8(推荐版本)  ----  java包 必须安装
  3. Android Studio  ----  更方便统一管理 安卓SDK / 虚拟机 (SDK 必须安装)
  4. XCode  ----  Mac专用 用于安装证书 打包
  5. 文件服务器一台  ----  用于实现app热更新(不重新下载包 更新 资源文件 -- 页面等)

创建项目(2个不同的项目):

  1. npm install vue-cli -g  ----  安装vue脚手架
  2. npm install vux --save  ----  安装vux组件库
  3. vue init airyland/vux2 projectName  ----  初始化 vue+vux 项目
  4. 正常开发 H5 应用 google 调试即可
  5. npm install -g cordova  ----  安装cordova框架
  6. cordova create CordovaProject io.cordova.hellocordova CordovaApp  ---- 创建应用的目录名  反向域值  应用标题
  7. cordova platform add/rm android/IOS  ----  添加/删除  安卓/ios  平台 (有其他平台需求另行添加)

热更新提前设置:

  1. cordova plugin add cordova-hot-code-push-plugin  ----  热更新插件(cordova项目根目录运行命令)
  2. npm install -g cordova-hot-code-push-cli  ----  安装热更新工具(cordova项目更目录运行)
  3. cordova-hcp init  ----  初始化cordova-hcp.json文件(会有相关参数填写,最重要的是最后的URL)
    {
      "name": "",//可为空
      "autogenerated": true,//手动添加,热更新会不能使用
      "ios_identifier": "id123456789",//应用在App store id(可为空)
      "android_identifier": "",//应用在应用商城上的地址或者App的下载地址(可为空)
      "update": "start",//在应用启动时安装
      "min_native_interface": 1,//可用以做App升级(可以不填)
      "content_url":"http://************/www"//cordova项目的www文件夹在服务器上的地址
    }
    地址为服务器地址
    www文件夹为 存放热更新的资源文件 
    www文件夹的名字只是为了跟cordova的资源目录名字一样。 可以修改
    
    此文件初始化成功之后, 命令行不会结束  ctrl c 结束就行。 
    cordova-hcp.json 文件会创建成功在 cordova项目根目录
  4. npm run build  ----  打包vue项目--H5 app (vue项目根目录运行命令)
  5. 将vue项目dist文件夹里面的文件 复制到 cordova项目根目录的www文件夹下(可以通过配置node命令 / 修改打包配置导出路径 / linux 【ln】(此处为小写L) 命令关联文件夹   省略复制这一步骤)
  6. cordova-hcp build  ----  使用热更新工具创建出时间戳文件(cordova项目根目录运行命令)
    chcp.json: 包含发布相关信息:热更新代码版本号,应用 native side 版本号等等
    chcp.manifest: 包含项目热更新代码(静态)文件信息:文件名和文件哈希值
    
    2个文件会被创建到 cordova根目录 下的 www文件夹中
  7. 修改 config.xml 文件 (cordova项目根目录)(放入根节点内部 与 content 标签必须同级)
    
        
        
        
        
    
    
    url 路径 与 步骤3:cordova-hcp.json 的路径 保持一致(多个chcp.json文件)
  8. 将经历了步骤6:创建出了时间戳文件的 www 目录里面的 所有文件 复制到 服务器上 (https://************/www)

打包app:

  1. cordova build android  ----  打包 安卓  (此为debug版本  可忽略后续 签名步骤)
  2. cordova build android --release  打包 安卓 (此为release版本 接步骤签名)
  3. 创建签名所需 密钥库 + 密钥文件(创建一次 永久使用)
    keytool -genkey -v -keystore release-key.keystore -alias cordova-demo -keyalg RSA -keysize 2048 -validity 10000
    
    #上面的命令意思是,生成一个 release-key.keystore 的文件,别名(alias)为 cordova-demo 。
    #2个密码建议设置为一样的 (密钥库 + 密钥)
    #具体参数含义 有兴趣的 百度 keytool 查询即可
  4. 将打包的release版本的apk(android-release-unsigned.apk)复制到根目录 执行命令       即可签名成功                                                          .......................cordovaDemo\platforms\android\app\build\outputs\apk\release(release apk 路径)
    jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore release-key.keystore android-release.apk cordova-demo
    
    # release-key.keystore 为开始创建的 密钥库文件 
    # android-release.apk 是复制到cordova根目录并且改了名字的apk (因为在一个目录层级所以不需要路径)
    # cordova-demo 是创建密钥库时的别名
  5. cordova build ios  ----  打包 ios  (ios 需要 mac 使用 XCode 2次编译才能生成 ipa 文件)

实现热更新的最后一步(安卓 ios 一样):

  1. 修改了静态资源(比如这里的vue项目)重新打包vue项目
  2. 用新的dist文件夹里面的内容 替换掉 cordova 项目根目录 www文件夹里面相同的内容
  3. 在cordova项目 根目录再次执行 cordova-hcp build (重新生成时间戳文件)
  4. 将 新的 www文件夹 里面的内容 再次上传到 服务器中
  5. 不需要再次打包app  在真机或模拟器 上重新打开 app 即可看到 网页内容已更新(有的可能需要几分钟请求 关闭打开 多试几次 绝对没问题)

在虚拟机或者真机运行apk:

  1. cordova emulate android  ----  调用默认模拟器运行安卓apk  (出现无法调用 就先开模拟器 再运行命令)
  2. cordova run android  ----  在 外部模拟器 或者 真机 上 运行安卓apk    (提前打开模拟器 或者 插入设备 打开 开发者选项(手机版本号连点) 必须打开 usb 传输数据)

你可能感兴趣的:(Cordova+Vue+Vux+热更新+打包release版本+签名 (2019-4-20实践))