打包工具

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之间加入(可选:移动端样式限制)(第一句可能造成页面样式改变)

② 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中加入...

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中写入默认的

可选配置:创建chcpbuild.options,配置dev/prod等环境下的config-file,通过 cordova run android -- chcp-dev 可动态修改

之后每次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)
}