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

crazyrabbit 发布于2年前
0 条问题

打包工具

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)
}

查看原文: cordova打包vue项目,进行混合开发

  • silverleopard
  • redswan
  • silverfish
  • purplegorilla
  • silverfrog
需要 登录 后回复方可回复, 如果你还没有账号你可以 注册 一个帐号。