前言
前后使用cordova开发了几个项目了,之前完全没有接触过Hybrid App的开发,好在有搜索引擎,只是碎片化学习耗费的时间太多,是时候把学到的知识和经验总结一下。
开发环境
- 安装Java JDK (百度java jdk下载) ,安装后设置环境变量
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_131.jdk/Contents/Home
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export export PATH=$PATH:$JAVA_HOME/bin
- 安装Android Studio (http://www.android-studio.org/) 安装后需要设置android sdk的本地路径,然后下载你要的android sdk版本,android sdk自带adt
export ANDROID_HOME=/Users/your_home/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
- 安装Ant,Apache Ant是一个java库和命令行工具,(http://ant.apache.org/bindownload.cgi) (安装完成后把路径加入到环境变量中)
export PATH=$PATH:/Users/your_home/java/apache-ant-1.10.3/bin
- 完整的环境变量设置
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk1.8.0_191.jdk/Contents/Home
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export ANDROID_HOME=~/Library/Android/sdk
export PATH=$PATH:$JAVA_HOME/bin:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools:~/java/apache-ant-1.10.3/bin
- 安装Node.js,主要要用到npm工具 (https://nodejs.org/en/)
cordova cli 命令概要
Help:显示可用CLI命令的信息。
Create:创建Cordova项目并关联项目文件夹和文件。
Plateform:管理Cordova项目使用的移动平台。
Plugin:管理Cordova插件的安装和卸载。
Prepare:从Cordova项目的www文件夹复制web应用内容到项目移动平台项目文件夹中。
Compile:把web应用打包成Cordova应用。
Build:先执行Prepare命令然后打包web应用。
Emulate:在一个或多个移动设备平台的设备模拟器中运行Cordova应用。
Run:在一个或多个移动设备中运行Cordova应用。
Serve:启动一个服务器加载web内容以便于用浏览器访问。
命令实例
- 安装cordova
npm install -g cordova
- 创建项目
cordova create beihaoyun_app com.mycordova.app hello
- 添加android平台
cordova platform add android@6.3.0
- 查看已经添加的平台
cordova platform ls
- 删除平台
cordova platform remove android
- 从Cordova项目的www文件夹复制web应用内容到项目移动平台项目文件夹中。
cordova prepare android
- 清理项目
cordova clean
- 安装微信插件
cordova plugin add cordova-plugin-wechat --variable wechatappid=xxxxxxxx
最新版的2.3.0源码有问题,找到xu.li.cordova.wechat.Wechat的第281行,把getAppId改成getSavedAppId方法,第598行,getAppId()静态方法改为非static方法
安装2.1.0版本的wechat cordova plugin add cordova-plugin-wechat@2.1.0 --variable wechatappid=xxxxx
- 查看已安装的插件
cordova plugin ls
- 删除插件
cordova plugin remove cordova-plugin-wechat
- 编译项目
cordova build android --verbose
- 运行项目 (连接手机会在真机上运行)
cordova run android --verbose
- sign - 生成数字签名文件
android studio 菜单 build -> Generate Signed APK -> 生成签名文件 -> Finish 生成APK
第一次使用的时候点击面板上的create new
新建一个Key.store,密码一定要记住
使用面板生成的apk无法快速调试,有些插件我们希望电脑链接真机时,点击 Run 按钮就可以使用自定义签名文件、编译、打包。这就需要配置Android Studio运行自定义签名。
菜单 Build -> Edit Build Types -> Build Types -> Signing Config 选择一个签名配置 -> ok
常见错误解决
- Error: spawn EACCES。一般是权限问题,修改gradlew权限即可
chmod 777 your_project/platforms/android/gradlew
- 编译不通过时,命令后面加上
--verbose
可以查看详细信息
cordova build android --verbose
- 遇到奇葩问题时候,可能是缓存问题,清理下项目
cordova clean
- 或者重新添加平台
cordova platform remove andorid --save
cordova platform add android --save
- 将html代码放到
your_project/www
目录下,然后使用prepare命令拷贝到平台中去,使用run或build命令前会自动执行prepare命令。
cordova prepare android