cordova打包vue项目，进行混合开发

2024年4月25日 151次阅读 来源: kongyunhui

打包工具

1、cordova
cordova 将您的 html/js 应用程序包装到可以访问多个平台的设备功能的本机容器中。

  • 跨品台（brower、android、ios等）

  • 支持离线场景

  • 访问原生设备API

它是PhoneGap项目的apache版本。

2、crosswalk
Cordova打包后的IOS版本几乎可以媲美原生，但是Android版本在低端机上略有卡顿，建议使用Crosswalk封装。

原因简析：cordova将 html/js 代码渲染到 ios 的 UIWebView 或者 android 的 WebView 上。UIWebView 完美支持 js，但是 WebView 存在硬伤，因此推出了 Crosswalk WebView。

cordova 打包

1、创建cordova项目，并添加platforms
安装cordova
$ npm install -g cordova
创建一个cordova项目
$ cordova create cordovaProjectName com.kyh.appname AppName
添加platforms
$ cd cordovaProject
$ cordova platform add browser
$ cordova platform add android
$ cordova platform add ios

2、导入webapp，并修改index.html、config/index.js
将webapp导入到cordova项目根目录
$ cp -r webapp .
修改index.html
$ cd webapp && 修改见①(模仿www/index.html)
修改config/index.js

3、打包
/webapp下，输出文件到www
$ npm run build
/cordova下，打包成app
$ cordova run android
$ cordova run ios (ps: ios不会直接生成ipa文件。将项目导入xcode中编译，或者参考②)

① 修改index.html

  • 在head之间加入（可选：移动端样式限制）（第一句可能造成页面样式改变）

          <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;”>
      <meta name="format-detection" content="telephone=no">
      <meta name="msapplication-tap-highlight" content="no">
      <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width”>

  • 引入cordova.js

      <script type="text/javascript" src="cordova.js"></script>

    ② cordova命令直接生成ios的ipa文件

cordova 热更新

1、更新类型

  • 外壳更新：添加了cordova plugins， 也就是说添加了native code，此时UI提示，重新下载安装。

  • H5更新： 添加了javascript、html、css等，可以在后台下载，自动更新掉以前的代码（热更新）

可见，H5等使用热更新，避免每次都要提交程序到应用市场，并重新下载安装。

2、热更新原理

  • www下生成chcp.json①和chcp.manifest，打包成的app会指向该chcp.json地址②，每次启动App的时候都会去服务器比对chcp.json文件和chcp.manifest文件。

  • 如果发现手机的上面的version小于服务器上面json文件里面的min_native_version这个时候会有一个通知告诉你应该更新你的外壳了，就是native部分；

  • 如果min_native_version和手机的version一致而通过release的时间戳发现服务器上面的是最新的包，那么手机就会把服务器上面的代码下载到手机本地，然后根据update那几种更新方式更新。
    ① content_url：项目地址② config_file: chcp.json地址

3、更新方案
1). 使用cordova-hcp server服务：https://github.com/nordnet/co…

  • 做了啥：启动一个ngrok服务，www是服务的根目录；在www下生成chcp.json和chcp.manifest。

  • 局限性：ngrok不稳定；重启服务ngrok域名变更，那就必须重新打包了。

  • 改进：修改content_url，但是每次重启还是会覆盖。 ==> 优化方案
    本地开发使用，自动在platform/../config.xml中加入<chcp><local-development enabled=”true” />…

cordova plugin add cordova-hot-code-push-local-dev-addon
线上测试可卸载掉，防止每次自动更新新版本
cordova plugin remove cordova-hot-code-push-local-dev-addon

2). 优化方案：

  • 搭建自己的服务器，并上传www到根路径

  • 创建cordova-hcp.json模板，并使用 cordova-hcp build，生成chcp.json和chcp.manifest

  • 在config.xml中写入默认的<chcp>

    • 可选配置：创建chcpbuild.options，配置dev/prod等环境下的config-file，通过 cordova run android — chcp-dev 可动态修改<chcp>

之后每次npm run build更新www内容，都需要手动执行 cordova-hcp build 来刷新chcp.manifest。然后上传服务器。

cordova 调用native api

1、camera api

  • 添加插件：cordova plugin add cordova-plugin-camera

  • 使用插件提供的全局变量进行camera操作：navigator.camera.xx

takePhoto () {
  if (!navigator.camera) {
    window.alert('Camera API not supported !')
    return
  }
  let options = {
    quality: 50,
    destinationType: navigator.camera.DestinationType.FILE_URI,
    sourceType: navigator.camera.PictureSourceType.CAMERA,
    encodingType: navigator.camera.EncodingType.JPEG,
    mediaType: navigator.camera.MediaType.PICTURE,
    allowEdit: true,
    correctOrientation: true  // Corrects Android orientation quirks
  }
  let successCallback = function (imageURI) {
    document.getElementsByClassName('ximg-demo')[0].src = imageURI
  }
  let errorCallback = function (message) {
    window.alert('error:' + message)
  }
  navigator.camera.getPicture(successCallback, errorCallback, options)
}
    原文作者：kongyunhui
    原文地址: https://segmentfault.com/a/1190000010598615
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞