使用cordova + vue搭建混合app框架

1. 前言：在进行hybrid app开发时，可以采用vue.js前端框架进行h5页面开发，然后使用跨平台cordova工具打包成app，如android或ios等，再h5页面也可以使用cordova丰富的插件调用原生代码，获取设备相关信息、调取手机摄像头等

2. 创建cordova项目

1）创建cordova项目

前提：安装node和cordova，安装方式很简单，自行百度就可以了

cordova create cordovaApp com.test.cordova myApp

2）创建平台

进入cordovaApp目录

cordova platform add android 创建android平台

或cordova platform add ios 创建ios平台

3）cordova打包命令，打包成apk的时候使用

cordova build android 此时会将cordovaApp/www目录下的文件打包成apk文件，即可安装到手机

3. 在cordova项目目录下创建vue 项目

在当前cordova项目目录下，使用vue-cli脚手架创建vue项目

vue init webpack vue-src

4. vue项目创建完成后的混合app框架如下，其中vue-src目录是vue项目，在该目录下进行前端代码开发：

5. 修改vue配置，完成hybrid app框架搭建

1) 使vue项目的build输出路径指向cordova目录下的www

vue-src/config/index.js

2）vue项目的index.html页面加入cordova.js

index.html

6. 打包

如果需要调用原生api，可使用cordova插件，可百度；

开发完vue项目后，进入vue项目，运行npm run build 打包vue项目，这样vue项目的打包后的文件就会直接放在cordova项目的www目录下；然后运行cordova build android打包安卓应用（apk），即可安装运行在手机上；

7. 效果

原文链接：https://blog.csdn.net/zxj0904010228/article/details/83143563

使用cordova + vue搭建混合app框架相关推荐

混合App 框架选型
为什么80%的码农都做不了架构师?>>> 个人一直想做个App,但是学习 IOS 的过程发现原生的做界面还是听麻烦的就放弃了.后来就转到混合式App阵营了混合式App 定义 ...
Cordova+Vue实现Android APP开发（二）-- 打包运行在真机上和打包运行在本地调试，以及打包时候一些问题的处理
接上一篇文章:Cordova+Vue实现Android APP开发(一) 一.使用cordova打包运行app 打包静态资源,没有问题的,但是把自己的vue其他项目转成android app时候,发现 ...
Cordova+Vue构建Hybrid APP简易实操
当下APP市场,因为Native APP开发成本高,Web APP不稳定,混合开发APP大行其道,成为越来越多开发者的首选.Hybrid APP开发框架也比较多,Weex.Ionic.PhoneGap ...
云炬Android开发笔记 12基于WebView的混合App框架设计（包含浏览器与原生请求Cookie的处理）
阅读目录 1.WebView高可扩展性封装 1.1 发现模块的框架搭建 1.2 webView的基类 1.3 对webview基类的实现 1.4 setInitializer的方法的实现 1.5 we ...
混合app框架之uni-app---grid布局
uni-app中grid布局是九宫格布局,格式已经弄好了,可以直接拿出来使用,在使用的时候想要点击获取下标的话直接写点击事件就可以打印出对应的下标了.代码如下: <!-- 个人中心页方格列表数据 ...
vue+Museui 混合app在安卓6.0系统显示空白的问题
原因:museui不支持ie,所以安卓6.0显示空白解决方法: import 'babel-polyfill' 然后将muse卸载,将相关组件用其他的替代
vue做混合式app_Vue Cordova教程-Vue+Cordova打造跨平台可安装的混合APP视频教程（大地）...
Vue+Cordova打造跨平台可安装的混合APP视频教程必看说明: 目前购买此教程送Html5+Cordova+Ionic智能电视(TV)应用开发教程视频教程: 购买过Ionic的同学可以直接在( ...
用Cordova打包Vue项目为app
现在国内越来越多的开发者使用Vue开发混合app,但是当大家开发完成过后才发现不知道该怎么将Vue项目打包成app. 据我现在的了解打包Vue项目目前流行的就是使用weex和cordova.weex是 ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...

使用cordova + vue搭建混合app框架

使用cordova + vue搭建混合app框架相关推荐

最新文章

热门文章