最近在开发移动端app,html页面开发完成后如何打包成原生app呢?我就去研究了
下cordova打包工具,看起来蛮简单,写个入门教程,针对小白用户。
1. 安装cordova,命令行输入:
npm install -g cordova
请确保你的网络好,最好能翻墙。(用cnpm等国内代理npm的可能会失败)
安装完毕后命令行输入:cordova --help
显示以下内容
后续操作全部基于上图中的Examples命令;
2. 创建应用项目,在自己想创建项目的目录打开CLI,后续命令全部在CLI中执行
cordova create myApp org.apache.cordava.myApp myApp
此命令会在当前目录创建myApp项目,目录结构如下图:
创建成功后CLI输出信息如下
cd myAppcordova telemetry on //此命令未知何用,根据创建完成提示操作
主要内容在www目录下;platforms与plugins目录都为空,下面我们就来添加平台和插件
3. 添加插件
我们在app中会调用一些系统的权限或事件,cordova提供了这些插件,现在就来添加一个相机调用插件cordova plugin add cordova-plugin-camera --save
添加成功CLI输出信息如下图:
可以在plugins目录查看到添加的插件信息
4 添加平台
添加平台用于打包成原生app,对于android需要提前安装java和android SDK,
否则无法打包成android apk;Java和Android SDK的安装自行搜索,这两个略有难度;现在我们添加android平台cordova platform add android --save
添加成功CLI输出如下:
此时可以在platforms目录看到android资源信息cordova requirement android
由于我开始没有安装Android SDK此处报错没有找到ANDROID_HOME
JDK和android SDK的安装教程大家另行搜索,此处安装完成后可能还会遇到其他问题
,希望大家耐心网上搜索答案
我在电脑安装JDK和SDK成功了,但是输入cordova requirement android还是显示以下错误
花了半天时间卡在这个地方。我就尝试下一步打包apk
5 打包成android apk
我的最终目的是打包成apk安装到手机看效果,所以就没有说去安装android模拟器去调试,
CLI输入以下命令:cordova build android --verbose
如果第一次打包需要下载gradle等其他文件,此处如果没有梯子,90%会一直卡在下载中。
打包完成输出如下:
我打包尝试了5次,最后终于成功可以看到这里花了40多分钟,所以此处成功与否全靠网速和梯子速度。
最后可以去*\myApp\platforms\android\build\outputs\apk目录找到打包完成
的android-debug.apk安装到手机显示,编辑项目中www目录下的文件就是我们前端要开发的内容
6 总结
因为本人也是第一次接触Cordova打包工具,此教程只是简单的探索cordova打包过程,
此工具使用其实很简单就是那些命令;但是如果没有梯子不建议尝试。
后续我会继续尝试打包到IOS平台,欢迎关注!