Cordova+vue 混合app开发(一)创建Cordova项目
简介:
- Cordova包装你的HTML/JavaScript app到原生app容器中,可以让你访问每个平台设备的功能。这些功能通过统一的JavaScript API提供,让你轻松的编写一组代码运行在几乎市面上的所有手机和平板上,并可以发布到相应的app商城中。
说白了cordova就是一个壳子,它可以把你的html代码打包生成app,发布在不同平台,同时访问手机原生API,OK话不多说直接讲解。
安装Cordova
- 安装node
- 在官网根据自己对应的电脑型号下载对应的node。
安装完成之后控制台分别输入node -v npm -v
分别输出对应的版本号则表示安装成功
- 安装Cordova
npm install -g cordova //全局下载安装Cordova cordova -v //查看是否安装成功 输出对应的版本号
- 创建Cordova项目
cordova create MyApp //Myapp 及你自己的项目名称 此时就可以看到文件夹下多出一个。Myapp的文件 cd Myapp //进入当前项目
- 添加平台
这里我们要添加项目运行的平台 cordova platform add browser //添加浏览器运行平台
Cordova platform add ios --save //添加ios运行平台 Cordova platfrom add android --save //添加android运行平台 这里呢建议大家先添加一个 browser 即可,后续再逐步添加
cordova platform ls //查看安装的运行平台
注意:运行ios或android需要安装对应的sdk,后续会讲到。
- 运行app
cordova run 对应平台 1.cordova run browser //运行浏览器 2.cordova run ios //运行ios 3.cordova run android //运行android
我们执行 cordova run browser 会自动打开端口为8080的页面,此时你就成功的创建好了一个cordova项目。(欢呼)
Cordova目录介绍
我们下载好之后会看到这个目录文件
myapp/
|-- config.xml
|-- hooks/
|-- merges/
| | |-- android/
| | |-- windows/
| | |-- ios/
|-- www/
|-- platforms/
| |-- android/
| |-- windows/
| |-- ios/
|-- plugins/
|--cordova-plugin-camera/
- config.xml文件分析
配置应用属性,包括webview初始化的参数,插件的配置等。 - www/
Web的相关文件,html、css、js等文件。大多数的代码都在这个文件夹下。与config.xml文件一样会在根目录下存在一个,在添加平台后,会在平台目录下拷贝一份。通常情况下如果跨平台开发,只修改根目录下的文件即可。版本控制时也需要跟踪根目录下的文件。这里呢我们以后会放置我们的vue项目,我下章会介绍到。 - platforms/
平台代码。如果没有必要不要修改这个文件夹下的内容,且这个文件下的代码会在添加插件后重置。 - plugins/
插件目录 - hooks/
命令行工具类,应该是个简化工作的好帮手,<font color=#dd1234>有待学习</font>,但是在那之前要先学习一下js啊!累觉不爱!
http://cordova.apache.org/docs/en/latest/guide/appdev/hooks/index.html - merges/
针对不同平台放置不同的hmtl/css/js文件,由hooks文件代替。 - 版本控制
推荐platforms/和plugins/文件夹不要纳入版本控制中,config.xml和package.json中已经做了保存,执行cordova prepare后会自动下载两个文件夹下的内容。
总结:
我们本章使用到的命令: 1.node -v //检查node版本 2.npm -v //检查npm版本 3.npm install -g cordova //全局下载安装Cordova
4.cordova -v //查看是否安装成功 输出对应的版本号 5.cordova create MyApp //Myapp 及你自己的项目名称 6.cordova platform add 平台名称 //添加项目平台 7.cordova run 对应平台 //运行cordova项目
今天就到这里,下章会讲vue项目怎么打包进Cordova,Cordova运行vue项目,我会一步一步的把我实际项目经验,遇到的问题,以及经验给大家分享一下,同时我会分享一下我的思路,感兴趣的话,大家跟我一起学习吧!
Cordova+vue 混合app开发(一)创建Cordova项目的更多相关文章
- phoneGap+cordova+ionic混合app开发环境搭建
参考链接:http://www.w2 bc.com/article/177257 待补充
- 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目
系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目 实战使 ...
- Cordova之如何用命令行创建一个项目(完整示例)
原文:Cordova之如何用命令行创建一个项目(完整示例) 1. 创建cordova项目 (注意:当第一次创建或编译项目的时候,可能系统会自动下载一些东西,需要一些时间.) 在某个目录下创建cordo ...
- 混合app开发,h5页面调用ios原生APP的接口
混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...
- Cordova开发App入门之创建android项目
Apache Cordova是一个开源的移动开发框架.允许使用标准的web技术-HTML5,CSS3和JavaScript做跨平台开发. 应用在每个平台的具体执行被封装了起来,并依靠符合标准的API绑 ...
- 第二步 使用Cordova 3.0(及以上版本) 创建安卓项目(2014-6-25)
参考资料: http://www.cnblogs.com/numtech/p/3233469.html http://blog.sina.com.cn/s/blog_9e245c690101jurr. ...
- day97:MoFang:移动端APP开发准备&移动端项目搭建&APICloud前端框架
目录 1.移动端开发相关概念 1.APP类型 2.移动端屏幕介绍 3.移动端自适配方案 4.元信息(meta) 2.APP开发准备 1.注册APPCLoud账号 2.下载APP开发编辑器 3.下载AP ...
- 【vue】如何在 Vue-cli 创建的项目中引入 iView
根据vue项目的搭建教程,以下记录如何在Vue-cli创建的项目中引入iView. 1)iView的安装,在项目下使用 npm 安装iView cnpm install iview --save ...
- 【vue】如何在 Vue-cli 创建的项目中引入iView
根据vue项目的搭建教程,一下记录下如何在Vue-cli创建的项目中引入iView. 1)安装iView,在项目下 cnpm install iview --save 2 ) 在 webpack ...
随机推荐
- Matlab学习-(4)
1. 函数 1.1 原始方法 之前我调用函数的方法是,首先写好函数文件,然后保存,然后在主函数中调用.这种方法的不足在于会导致你的工作目录的文件太多,从而导致很乱.在网上找了一些解决方法. 1.2 本 ...
- redis管道操作(事务),无回滚
管道:将数据操作放在内存中,只有成功后,才会一次性全部放入redis #管道(事务),要是都成功则成功,失败一个全部失败 #原理:将数据操作放在内存中,只有成功后,才会一次性全部放入redis pip ...
- JDBC处理CLOB 和 BLOB大对象
在数据库中: clob用于存储大量的文本数据 可以使用字符流操作 clob用于存储大量的二进制数据 可以使用字节流操作 以mysql为例 先准备一张表: CREATE TABLE `t_user2` ...
- bootstrop日历
https://blog.csdn.net/cuixiaobo521/article/details/77880633
- 文件包含漏洞(pikachu)
文件包含漏洞 在web后台开发中,程序员往往为了提高效率以及让代码看起来更加简洁,会使用'包含'函数功能,比如把一系列功能函数都写进function.php中,之后当某个文件需要调用的时候,就直接在文 ...
- QIntValidator没有最小值的限制,继承然后写个新类来控制最小值
版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/firecityplans/article ...
- 点击Qtableview表头,触发事件
connect(horizontalHeader(), SIGNAL(sectionClicked(int)), this, SLOT(onHeaderClicked(int))); refer to ...
- Codeforces Round #635 (Div. 2) 题解
渭城朝雨浥轻尘,客舍青青柳色新. 劝君更尽一杯酒,西出阳关无故人.--王维 A. Ichihime and Triangle 网址:https://codeforces.com/contest/133 ...
- [USACO3.2]魔板 Magic Squares
松下问童子,言师采药去. 只在此山中,云深不知处.--贾岛 题目:魔板 Magic Squares 网址:https://www.luogu.com.cn/problem/P2730 这是一张有8个大 ...
- java 之 javaBean
什么是JavaBean? JavaBean是特殊的Java类,使用J ava语言书写,并且遵守JavaBean API规范. JavaBean与其它Java类相比而言独一无二的特征: 提供一个默认的无 ...