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

其他

1、谈一下h5的navigator.mediaDevices.getUserMedia()种方式获取手机摄像头的方式: 1. 相框可以自由化
2. 要获取生成的图片,需要借canvas.toDataURL(“image/png”);
3. 原生体验不太好,不用调用手机系统照相其他功能
2、cordova方式: navigator.camera.getPicture()
1. 原生体验较好
2. 能够使用相机其他功能,如美颜等
3. 使用它可以减少界面优化问题

发布了4 篇原创文章 · 获赞 0 · 访问量 3193

猜你喜欢

转载自blog.csdn.net/qq_26381359/article/details/104607694