程序人生 A log of my life

Cordova

和React Native类似,Cordova是跨平台应用开发的三驾马车之一。

HelloWorld

先安装node,安装之后设置一下npm,在用户目录下创建.npmrc,增加下面的一行,以加快npm的速度。

registry =http://registry.npm.taobao.org

再安装和创建cordova/ionic工程就会快些了

npm install cordova -g
cordova create hello
cd hello
cordova platform add android
cordova run android

run的过程中又可能卡死,因为又去下载东西了,参考android一文中修改gradle-wrapper.proerties,也可以尝试用Android Studio去打开这个工程了,打开的时候选择项目下的platform\android这个目录即可。如果不想直接运行,可以用cordova build android来编译出apk。

cordova 版本

cordova自己有个版本,这个版本其实关系不大,相当于是cordova cli的版本,可以尽量用较高版本即可。而cordova在增加platform的时候,后面是可以加版本号的,比如add android时,可以用 add android@6.3.0,这个6.3.0实际上是cordova-android的版本号,这个就非常重要的,决定了得到android工程的一切细节,所以这个cordova-android版本最好锁定,不要轻易修改。

官方文档有一张表格,描述cordova-android版本和android版本对应关系。

使用Node模块

在Cordova工程中使用node模块并不简单,npm install之后,模块被安装到根下面的node_modules下, 需要手工复制到www下,否则无法引用,另一个问题是大部分nodejs module是服务器端模块,并不能直接用在cordova下使用,和在浏览器里无法使用node模块一个道理。

一个简单的方法是通过wzrd.in转换出来,wzrd.in实际上就是通过Browserify来做到的,但无需手工安装Browserify和执行命令行了,并且wzrd.in提供了CDN服务,让你可以直接在html中引用而无需提前下载转换后的文件。

好在现代的前端工程都是使用打包工具从src目录直接打包得到dist,这时通常把src目录放在cordova/www外,得到的dist就是cordova/www,这样也解决了node模块问题,参考下quasar。

cordova 插件

可以为cordova项目安装插件

cordova plugin add https://github.com/don/cordova-plugin-hello.git

这样的话,plugins目录下就会多出通过git下载的插件了,后面build的话,插件会自动生效,如果增加比较多的插件,而这些插件又不上版本库的话,需要在config.xml里把插件记录下来,所以上面的命令可以加–save自动记录,或者可以使用

cordova plugin save

一次性统一记录到config.xml,下次从版本库checkout出来之后,需要用

cordova prepare

来重新下载这些插件, 还有几个常用的命令:

  • cordova plugin list 列举当前项目的插件
  • cordova plugin rm xxx 删除某个插件

定时

和web端一样,定时主要依靠setInterval和setTimeout两个API,但因为移动端app在熄屏之后会被系统挂起,因此永远不能依赖定时来计时。正确的方式是用Data.now()来计时,只用定时来刷新显示。

手机状态栏

Android上Material设计对状态栏的颜色修改有支持,并且也可以通过APP隐藏上面的状态栏,这些可以通过cordova-plugin-statusbar这个插件做到,比如:

if (cordova.platformId === 'android') {
  window.StatusBar.backgroundColorByHexString('#027be3')
}

CORS

缺省的情况下,cordova下的webview也遵循cors规则,要解除这些限制,需要安装whitelist这个插件,并配置config.xml,文档里有详细解释,这些通常在add platform时自动配好了。

但是这似乎只在cordova从file://加载时生效,如果debug版本让cordova从远端加载应用,cors还是生效了,whitelist插件也无能为力。

一些插件

常用的几个插件

  • cordova-plugin-statusbar 控制手机状态栏
  • cordova-plugin-device 获取设备信息
  • cordova-plugin-app-version 获取APP的版本号
  • cordova-plugin-insomnia 防止app锁屏(某些应用交互少,阅读多)

crosswalk

如果不想依赖os上的webview,可以用这个插件打包一份较新的webview,但是安装包会变大。

cordova plugin add cordova-plugin-crosswalk-webview
cordova plugin add cordova-android-support-gradle-release

后面这个插件是解决一个编译问题。

工程

cordova工程使用版本控制时,那些文件入库,哪些不入库,需要系统考虑,我的经验是:

  • platforms、node_modules、plugins目录都不入库,同时也保证了不手工修改这几个目录。

入库的问题在于,当clean项目的时候,重新安装platform,plugin可能和预留的文件冲突,导致编译不过。

创建自己的插件

  • 从github上复制cordova-plugin-hello,作为基础
  • 使用plugman为新插件创建package.json

这样就创建了一个最基本的插件,并可以通过cordova plugin add 去添加了(后面使用本地文件的相对路径,比如..\plugin-demo),插件在add的时候,根据plugin.xml里的指示,cordova会做一些事情,将一些代码和配置文件丢到android目录下,然后就可以编译了。

但是,非常重要的一点是,插件add的时候所做的事情在一起build的时候是不会再做的,所以如果直接修改插件源码或plugin.xml,直接build是不会生效的,必须在android目录下修改插件生成的文件,这就给插件开发者带了一些不便,通常在android目录下调通插件所有功能后,再把相关文件和配置反向复制回插件源码中,这一步只能手工来做了。

插件的调试离不开Native调试器了,Android的话就要用android studio,如果不用IDE的话,只用log也可以,相对比较痛苦。

问题

  • cordova requirements 报错Android target: not installed, 并显示一些乱码 这应该是一个bug,执行chcp 65001切换到UTF-8之后就不报错了,不过通常不需要管这个错,没什么影响。