一、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引用
2.在vue-cli项目的main.js中,添加监听事件(设备加载完成,就渲染前端界面)
3.修改配置文件。在vue-cli项目中,就是修改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