一、cordova hello-world
1.安装
$ npm install -g cordova
2.创建cordova工程
$ cordova create hello com.example.hello HelloWorld
【说明】
hello：cordova目录名称
com.example.hello：包名
HelloWorld：项目名（在config.xml的<name>中查看）
3.给项目添加平台（按需添加）
$ cordova platform add android
$ cordova platform add ios
$ cordova platform add browser
查看已经添加和可以添加的平台：
$ cordova platform
4.运行hello-world（例如在ios平台）
$ cordova run ios
【注】
这里可能会报错，形如：
No target specified for emulator. Deploying to iPhone-SE, 10.2 simulator
原因：
没有为模拟器选择指定的机型。（模拟器支持多种机型，如图示。直接run，不指定机型，就会报这个错）
解决方式（ios平台为例）：
手动使用xcode打开 [目录名] ——> platforms ——> ios ——> [项目名].xcodeproj
本例即：hello ——> platforms ——> ios ——> HelloWorld.xcodeproj
手动选择机型，并启动。
看到如下界面，则hello-world运行成功：
二、用cordova将vue-cli项目包装成原生应用
【原理】
将前端项目正常打包后的资源文件，全部放到cordova项目下的www文件夹中。
使用cordova启动，即可在相应平台模拟器上运行起前端代码。
【具体操作】
1.在vue-cli项目的index.html中，添加cordova引用
index.html
2.在vue-cli项目的main.js中，添加监听事件（设备加载完成，就渲染前端界面）
main.js
3.修改配置文件。在vue-cli项目中，就是修改vue.config.js
vue.config.js
【说明】
publicPath统一设置为' '（默认是' / '），outputDir指向cordova项目的www文件夹。此处假设，cordova项目hello和当前vue项目在同级目录下。
很多文章除了这两个字段，还会要求修改indexPath。indexPath，即打包后的index.html的输出路径（相对于 outputDir），默认是'index.html'。这里由于默认路径符合我们的期望，故不做修改。
4.运行打包命令，进行测试
vue项目下运行：
$ npm run build
cordova项目下运行：
$ cordova run ios
成功渲染出自己的前端界面，则包装成功。
#参考：
http://www.hangge.com/blog/cache/detail_2101.html
https://www.cnblogs.com/pengjunhao/p/6803606.html
网友评论