初识cordova与vue结合

cordova介绍

Apache Cordova是一个开源移动开发框架,它允许您使用标准的Web技术,如HTML5,CSS3和JavaScript进行跨平台开发,避免每个移动平台本机开发语言。应用程序在针对每个平台的包装内执行,并依靠符合标准的API绑定来访问每个设备的传感器,数据和网络状态。 简单来说,就是可以h5与其他平台混合开发,并有其他平台的原生体验。

环境搭建

1、jdk安装(最好jdk8以上)及配置相应的环境变量。这里就不过多的阐述了,百度一下,一大把。
2、安装Android studio(不安也行,主要是为了方便安装sdk,gradle,platform-tool, 还有一个重要原因方便调试,不然连哪里出错都不知道),
这里也不哆嗦,自行百度
3、需要nodejs的支持,自行下载node并安装
4、全局安装cordova:npm install -g cordova(提示一下最好全局,不要有一些奇怪的想法,避免造成更多的坑)

创建应用

1、进入某个目录(也就是存放项目的位置),dos下执行: cordova create CordovaProject io.cordova.hellocordova CordovaApp
解释一下:
CordovaProject :是创建应用程序的目录名称。
io.cordova.hellocordova: 是默认的反向域值。 如果可能,您应该使用您自己的域值。(这里看你自己发挥了)
CordovaApp: 是您应用的标题。
2、添加平台(这里以android为例):
进入刚创建的目录CordovaProject, dos下执行:cordova platform add android
3、给刚才的项目添加插件(这里以相机为例):ordova plugin add cordova-plugin-camera

vue打包

方式一:直接打包进 CordovaProject

1、创建一个vue项目,将其复制进CordovaProject文件夹
初识cordova与vue结合
2、修改vue项目下的config文件下的index.js(这里是以vue-cli2为例的)
初识cordova与vue结合
3. 运行npm run build
4. 在cordova目录下(CordovaProject)的www目录下,找到打包好的index.html,打开它,在head里引入cordova.js(这步非常重要,不然cordova将不起作用)
5. cordova项目根目录运行cordova build android
6. 你可以用Android studio打开 项目下的platforms 文件夹下的以构建好的Android项目,这时你就可以进行调试啦。

方式二: 其实就是将vue项目打包后的文件放到www目录下,但是要注意要引入cordova.js,但cordova.js又依赖cordova_plugins.js,所以www下必须有这两个文件。然后运行cordova build Android

初识cordova与vue结合初识cordova与vue结合 clearLove_never 发布了3 篇原创文章 · 获赞 0 · 访问量 2932 私信 关注
上一篇:cordova打包的时候报错library not found for -lWeChatSDK


下一篇:给ionic4增加推送通知FCM插件