WEBAPP开发之如何使用 cordova 打包 webapp--基础篇-职坐标

WEBAPP开发之如何使用 cordova 打包 webapp--基础篇

白羽 2018-07-19 来源：网络阅读 798 评论 0

摘要：本文将带你了解WEBAPP开发之如何使用 cordova 打包 webapp--基础篇，希望本文对大家学WebApp有所帮助。

有的公司为了节省人员成本，在做app的时候不采用原生开发的模式，而是使用webapp打包成app的方式进行app开发，现在流行的app打包方式有很多，比如HBuilder，Cordova，APICould，AppCan等等。
而我们今天就来谈谈怎么使用cordova进行app的打包。

安装

首先我们通过npm安装cordova，因为之后我们都需要通过cordova的命令进行操作
npminstall-gcordova

安装完成之后我们可以通过cordova-v来查看cordova是否成功安装

初始化

然后我们就可以初始化一个app的项目结构了，cordova初始化项目的命令如下
cordovacreateprojectFileNamecom.cordova.helloworldprojectName

参数说明
projectFileName#初始化项目的文件夹名称
com.cordova.helloworld#可以理解为项目的ID
projectName#这个app的名称

初始化成功后的项目目录如下所示

2018-01-04_16-13-50.png

目录说明
hooks#主要用来存放一些自定义的cordova脚本命令一般情况下很少用到需要了解的也可自行百度谷歌看看
platforms#主要存放各个平台的原生代码文件(会自动生成)比如生成的android文件
plugins#用来存放cordova插件之后会说到
res#用来存放一些资源文件比如app的图标启动页等
www#用来存放你要打包成app的html文件源文件cordova打包的时候会将该目录的文件copy到对应平台文件目录中index.html为入口文件

config.xml#一些cordova的配置信息比如工程名app图标等

添加平台

使用如下命令进行构建平台的搭建，这里以android为例
cdprojectFileName#先进入项目目录
cordovaplatformaddandroid

如果是ios的话将android变成ios即可
注意！！！
添加android平台的前提是要你电脑上已经有android环境比如android-sdkgradleadb等
如何添加这类环境之后的文章会说这里先不提
如果过程没有意外的话，成功安装后platforms目录中则会多处一个android的文件夹该文件夹下就是android的一些原生代码以及我们的html源文件如下

2018-01-04_16-47-58.png

而我们的html源文件则就是在assets目录下
然后你可以用androidstudio打开android这个目录做些原生代码的修改之类的
这里有一点需要注意的，如果你要修改html源文件的话切记不要去platforms/android/assets下修改不然不会生效的需要到外层www的目录中进行修改

运行app在模拟器中(打包)

可以使用命令
cordovarunandroid

查看webapp在安卓模拟器中的效果
然后控制台会哇啦啦的输出一大堆东西都是在加载模拟器的过程可以不用关注(出错的当然需要关注！！)
最后系统会自动运行模拟器

这样一个webapp就成功打包成一个app了
当然这不是正式版的app可别弄混了这里最多就是一个debug的app用于测试之类的等完全没有问题了才可以进行发布
温馨小提示：如果你想装到手机里查看效果，你可以通过先在模拟器运行一次这样会在目录platforms/android/build/outputs/apk中找到一个android-debug.apk的应用程序将该程序发送到安卓手机安装即可。