Cordova+Vue构建Hybrid APP简易实操
当下APP市场,因为Native APP开发成本高,Web APP不稳定,混合开发APP大行其道,成为越来越多开发者的首选。Hybrid APP开发框架也比较多,Weex、Ionic、PhoneGap、WeX5……今天尝试一下用Cordova+Vue来构建。
1. Cordova是什么?
Apache Cordova 的前身是PhoneGap,是从PhoneGap中抽出来的核心代码。
Cordova是一个开源的移动开发框架。允许你用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发。 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑定去访问每个设备的功能,比如说:传感器、数据、网络状态等。(摘自Cordova中文文档)
下面是Cordova中文文档中的cordova应用架构的高级视图:
说简单点,Cordova就是把我们的web页面用原生代码进行包装,并提供给我们js可以调用的访问原生设备功能的接口,最后生成一个可以在原生设备上进行安装的安装包。
2. Vue项目
Vue大家应该都很熟悉了,下面新建一个Vue项目。
#初始化项目
vue init webpack vue-app
#安装依赖
cd vue-app
npm install
#启动服务
npm run dev
# 打包项目
npm run build
修改config/index.js文件:
assetsSubDirectory:static这个二级目录不需要,改为空;
assetsPublicPath:默认为根路径,改为当前相对路径;
productionSourceMap:用于支持打包后的调试,改为false,可以加快打包速度;
build生成的文件位于dist目录下,先放着备用。
3. 构建Cordova项目
#安装6.0.0版本的cordova 去掉 版本号安装的是最新的版本
npm install -g cordova@6.0.0
#创建一个cordova项目,项目名为cordova-vue-app,包名 com.cv.cvtest app名称 cvapp
cordova create cordova-vue-app com.cv.cvtest cvapp
将刚刚创建的Vue项目dist目录下的文件全部拷贝到cordova项目www目录下,
然后添加平台 , browser 是浏览器访问的平台,开发中比较方便:
cd cordova-vue-app
cordova platform add android --save
cordova platform add ios --save
cordova platform add browser --save
上面步骤完成之后,cordova-vue-app/platforms目录下会生成android文件夹,这就是安卓平台代码了。
4. as打包APK
cordova有打包apk的命令,但是打包速度实在太慢,我们一般把生成的原生代码用eclipse或者android studio打包,IOS需要在Mac环境下用XCode打包,这里没有Mac,先看安卓。
没有用过android studio的先去下载安装,包括Android SDK。
安装完成打开android studio,导入项目时选择import from gradle,选择build.gradle点击确定等待gradle编译,这里如果编译失败,大多是因为gradle插件版本和gradle版本之间的对应问题,可以参考
编译完成之后,菜单栏选择build apk就可以打包apk包了。
5. Cordova-Android项目主要目录简介
/assets/www:web页面文件
/res:不同尺寸APP启动页,logo图片,APP名称等配置
/src:APP主Activity,以及我们自定义的插件等放在这里
AndroidManifest.xml:Android项目必需的也是最重要的一个文件,包名、版本号、应用所需要的权限都在这里配置,项目中用到的所有四大组件都需要在这里注册。
Cordova+Vue构建Hybrid APP简易实操相关推荐
- Cordova+Vue实现Android APP开发(二)-- 打包运行在真机上和打包运行在本地调试,以及打包时候一些问题的处理
接上一篇文章:Cordova+Vue实现Android APP开发(一) 一.使用cordova打包运行app 打包静态资源,没有问题的,但是把自己的vue其他项目转成android app时候,发现 ...
- 使用cordova + vue搭建混合app框架
1. 前言:在进行hybrid app开发时,可以采用vue.js前端框架进行h5页面开发,然后使用跨平台cordova工具打包成app,如android或ios等,再h5页面也可以使用cordova ...
- 0元0基础搭建个人网站简易实操
写在前面 本文目的为记录和分享,可作为操作参考,作者只是出于兴趣,并非专业 本文基于腾讯云免费试用云服务器,从注册开始完成一个包含图.文.影音和超链接的简单网站搭建,并在其中以实例说明了重要的参数配置 ...
- 小程序转App最便捷的方法,附实操
Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且 ...
- 1W字长文:蓝绿发布、金丝雀发布、滚动发布、A/B测试 原理和实操
背景: 蓝绿发布.金丝雀发布.滚动发布.A/B测试 ,是大家日常常见的发布工作.所以发布的原理和实操是一个非常.非常核心的面试知识点. 在40岁老架构师 尼恩的读者交流群(50+)中,其相关面试题是一 ...
- 超图解python物联网实作入门_完美图解物联网IoT实操:ESP8266 Arduino,Cordova物联网移动App,JavaScript微控制器编程...
本书探讨的核心主题是串联.汇流整合.互联网从最初的人际沟通桥梁,拓展成机器之间协同合作的交流管道. 本书强调的是串联网络软件和微电脑控制板,以JavaScript 为主线,开发网络应用程序.手机App ...
- 前端-Vue.js从入门到精通基础笔记(理论+实操+知识点速查)
#[2022.3]尚硅谷Vue.js从入门到精通基础笔记(理论+实操+知识点速查) 前言 本文完全基于 参考资料:加工整理而成,包括其代码,案例,资源等.前置知识是学习尚硅谷的视频教程,本文配合其教程 ...
- qtdesigner怎么实现菜单栏跳转_人人都可写代码-Android零基础编程-app 入口菜单栏实操08...
欢迎来到人人都可写代码,大家好,我是杨晓华,今天我们的课程内容是项目实操,以智者精选项目为例,编写一个Android app的入口关联菜单栏逻辑. 这是要实现的菜单栏组件展示效果,下面就是教大家如何制 ...
- 如何构建GFS分布式存储平台?理论+实操!
如何构建GFS分布式存储平台?理论+实操! 一.GlusterFS简介 1.GlusterFS的概念 2.GlusterFS特点 3.GlusterFS术语 4.GlusterFS的工作流程 5.GF ...
最新文章
- 程序员入职锦囊妙计 --读书笔记
- spring 可以有多个ioc容器吗
- 一个最简单的 Github workflow 例子
- SAP Fiori Elements 公开课第一单元概要介绍
- java.lang.NoSuchMethodError: android.app.Notification$Builder.setChannelId
- 论文浅尝 | Generative QA: Learning to Answer the Whole Question
- 网站制作---网站伪静态的介绍
- 中国创客面临无限挑战
- Ubuntu菜鸟入门(五)—— 一些编程相关工具
- vue 在线预览word、excel、pdf、txt、图片
- 收集的Word2007技巧大全
- eclipse画UML图
- 新浪微博API错误代码大全
- [ISA]部署ISA防火墙策略的十六条守则
- 渗透测试——痕迹清除
- 深入理解G1垃圾收集器
- java geojson和数据库_GeoJson和TopoJson数据格式的对比
- 在升龙备份方法_[求助]关于使用再生龙备份系统的问题
- win7下安装anaconda3
- maven项目 骨架搭建
热门文章
- Java Objects.requireNonNull
- 企业组织架构可编辑Word模板大合集(共105份)
- 最长公共子序列(LCS)
- 手机上的照片删除了能恢复吗?教你怎么从小白变高手!
- NFT数字藏品小白来看一看,别再被割韭菜了
- iPad Pro 2022款将迎来大改款 支持反向无线充电
- 360 css grid,【第2210期】使用 CSS 创造艺术
- jcp jsr_JCP主席回应有关JCP是秘密的假设
- SegmentFault 隐藏技能之发家致富篇:回答赞赏 讲座佣金
- 安徽科技学院 2014-2015-2学期计算机14级12班《C语言程序设计II》期末考试