微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

初识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文件

在这里插入图片描述


2、修改vue项目下的config文件下的index.js(这里是以vue-cli2为例的)

在这里插入图片描述


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

clearLove_never 发布了3 篇原创文章 · 获赞 0 · 访问量 2932 私信 关注

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐