emmmm, 一直徘徊在移动端采用什么技术比较好,一直也没有找到,让我为了一个移动端而去学习一波react全家桶是不现实的操作,反观自己的技术栈,通过长时间的对比和剖析找到了入口点,不管了先会写再说吧,没有过的评价都是瞎BB,cordova  + ionic +angular6之旅正式开启

cordova是什么?为什么我要从它入手?

按照我浅浅的理解,cordova是让前端人员仅仅使用已掌握的知识达到JS也能控制访问设备硬件的一个中间层,由前端人员编写相应的JS代码,由cordova来做中间人吧JS代码的意思转译成各种设备能听得懂的“命令”从而做相应的操作的一种机制。

之所以从他入手是,技术栈是ANGULAR,移动端自然而然的就切换到了ionic但是呢,其实还有nativescript,个人更看好ns,但是呢由于呢ns刚出现的时间不是很长,社区自然就弱啦,cordova的前身如果我讲得没有错的话是phonegap,算是一种老技术了,已经有很完善的文档以及很多人都采坑了,遇到坑一搜一大把emmm,废话不多说啦,此篇介绍环境配置到创建一个应用

环境搭建

环境搭建可谓是非常非常关键啊,搭建不好项目根本起不来

  1、安装node

  2、安装npm

  上述两个安装直接去官网下载操作系统对应的安装包,傻瓜式安装,安装好后进入cmd 通过 node -v npm -v 查看版本,如果都出来啦,就证明都安装成功啦

  3、安装JDK

    根据官方文档说的,虽然JDK已经出了10 了,或者你看到更高的版本,但是都要安装JDK8 更高版本暂不支持

关于JDK的安装,直接搜索JDK DOWNLOAD即可,或者到cordova官网有个JDK8的传送门

4.  配置系统环境变量

到目前为止配置如下几个环境变量

配置完成后,通过cmd 输入path命令查看是否有以上环境变量路径,有的话就是配置成功了

  5. 安装ANDROID STUDIO

emmmm, 既然要涉及SDK,等等,可以选择性的装或者不装,不装的童鞋,去安卓官网点击下载的时候会有几个选项,一个是下载Android studio一个是下载SDK之类的相关工具包二选一,我这里是下载了,因为可能会用到打包的时候,毕竟曾经学过安卓开发哈哈

6. 安卓了AS童鞋继续走,第一次打开AS的时候,会让你下载SDK 、 platform tools就都下载好啦,下载完成后,在页面的AVD按钮点击创建一个模拟器,版本26开始,不要过高,并且下载想要的SDK

7. 配置一下环境变量

一样的,配置完成后通过cmd 输入path命令查看以上路径是否存在

至此,环境算是该下载的就下载完了,该配置的也配置完了,那么开始进入cordova操作阶段

使用cordova创建第一个应用

// 1. 创建工程
cordova create hello com.example.hello HelloWorld
// 2. cd hello工程文件
// 3. 添加要编译的平台 ,这里我以安卓为例
cordova platform add android | ios
// 具体还可以安装什么可以通过 cordova platform add --help 查看
// 4. 查看已经添加的平台
cordova platform ls
// 5. 检查要打包的依赖环境是否都齐了,没有齐全的话在terminal中显示想要的那些不齐全
cordova requirements
// 6. 打包成相应的设备,这里打包成安卓项目
cordova build andorid
// 打包成功后会出现一个platforms的文件夹,这个文件夹不要自己随便改动,而且每次WWW文件夹有变化的话就要重新打包,想要重新打包的话就要先把之前下载的paltform 删掉在重新add进来在打包,包括安装新的插件也是如此
// 7. 运行
// 在模拟器中运行
cordova emulate
// 也可以指定要再哪个模拟器上运行,模拟器的名称如果是空格的就换成下划线
// cordova emulate --AVD_PIXES_26
// 在真机中运行
// cordova run andorid
// 真机调试不能文件变一下就会自动联调,需要自己重新输入一下真机运行的命令才可以  

至此,一个简单的cordova应用就能被运行出来了

TIPS

1、 在AS中导入cordova项目也能打包,只要把cordova project import进入AS 然后选中项目的platform/android文件夹 然后gradle sync一下就可以打包啦;

2.  cordova的官网上表明cordova有很多版本,每个cordova-andorid的版本想上支持和向下兼容的范围不一样,可以通过cordova platform add android@版本号 --save 进行变换

3. 添加插件,cordova神奇之处就是他的插件了,他的插件帮我们做了很多处理来调用设备的硬件

// 添加插件
cordova plugin add 插件名
// 添加插件之前要装平台
// 查看已经安装的插件
cordova plugin ls
// 诺要安装插件,要将原有的platform remove掉,在重新add进来

4. remove platform

cordova platform remove android

  

cordova之旅之初识的更多相关文章

  1. Go的100天之旅-01初识Go

    初识Go Go简介 Go的历史 上个世纪70年代Ken Thompson和Dennis M. Ritchie合作发明了UNIX操作系统同时Dennis M. Ritchie发明了C语言. 2007年的 ...

  2. 我的angularjs源码学习之旅1——初识angularjs

    angular诞生有好几年光景了,有Google公司的支持版本更新还是比较快,从一开始就是一个热门技术,但是本人近期才开始接触到.只能感慨自己学习起点有点晚了.只能是加倍努力赶上技术前线. 因为有分析 ...

  3. HTML5学习总结-番外04 Cordova/PhoneGap

    一 PhoneGap 1 PhoneGap简绍 http://www.cnblogs.com/JustRun1983/p/3819433.html 2 环境安装 http://cordova.apac ...

  4. JQuery Mobile + Cordova 实战一

    好的,今天给大家继续讲解 JQM 和 Cordova 的结合吧.Cordova 和 Phonegap 反正是一个东西,大家就当做一个是旧版(Phonegap)的一个是新版(Cordova)的就行.不同 ...

  5. 使用 Cordova(PhoneGap)构建Android程序

    移动终端开发随着智能手机的普及变得越来越热,什么项目都想移动一把,但反观要去学这些各个终端的控件使用,实属不易,又特别是每个终端的控件及所用语言都各不相同,使得这种学习变得更加困难. 有没有一种简单的 ...

  6. Python之旅Day1 数据类型初识(数字|字符串|列表|数据运算) 编码 表达式(if...else|for|while)

    初识PYTHON Python(英国发音:/ˈpaɪθən/ 美国发音:/ˈpaɪθɑːn/), 是一种面向对象的解释型计算机程序设计语言,由荷兰人Guido van Rossum(吉多·范罗苏姆)于 ...

  7. (原创)初识cordova(一)

    在公司做项目,发现有人在做大项目使用了cordova技术.做的是昆山的项目.之前听说过phonegap,也测试过,但是感觉效率不是很好,就没怎么研究,后来看他们做的项目还不错,于是想试一试. 搭建开发 ...

  8. AI之旅(2):初识线性回归

    前置知识   矩阵.求导 知识地图   学习一个新事物之前,先问两个问题,我在哪里?我要去哪里?这两个问题可以避免我们迷失在知识的海洋里,所以在开始之前先看看地图.   此前我们已经为了解线性回归做了 ...

  9. Python之旅Day15 Bootstrap与Django初识

    Bootstrap初识 Bootstrap简介 Bootstrap 是最受欢迎的 HTML.CSS 和 JS 框架,用于开发响应式布局.移动设备优先的 WEB 项目.(官网http://www.boo ...

随机推荐

  1. 剑指Offer:二叉树中和为某一值的路径【34】

    剑指Offer:二叉树中和为某一值的路径[34] 题目描述 输入一颗二叉树和一个整数,打印出二叉树中结点值的和为输入整数的所有路径.路径定义为从树的根结点开始往下一直到叶结点所经过的结点形成一条路径. ...

  2. oracle ORA-12514: TNS:listener does not currently know of service requested in connect descriptor

    ORA-12514: TNS:listener does not currently know of service requested in connect descriptor 1.看看是不是监听 ...

  3. php基于swoole扩展的WebSocket

    php的swoole的扩展可以实现WebSocket通信,方法如下 1.php添加swoole扩展: 一:两种安装方式:1>编译安装:1>wget http://pecl.php.net/ ...

  4. [STM8L]基于STM8L152的TAB段式LCD液晶驱动的分析 - 单片机干货 - 中国电子技术论坛 - 最好最受欢迎电子论坛!

    [STM8L]基于STM8L152的TAB段式LCD液晶驱动的分析 - 单片机干货 - 中国电子技术论坛 - 最好最受欢迎电子论坛!.md 主控芯片为STM8L152C4T6自带LCD控制器,低功耗系 ...

  5. Android Weekly Notes Issue #275

    Android Weekly Issue #275 September 17, 2017 Android Weekly Issue #275 本期内容包括给Google Map实现一个Marker A ...

  6. 3D特效焦点图

    在线演示 本地下载

  7. SDUT OJ 1479 数据结构实验之栈:行编辑器

    数据结构实验之栈:行编辑器 Time Limit: 1000ms   Memory limit: 65536K  有疑问?点这里^_^ 题目描述  一个简单的行编辑程序的功能是:接受用户从终端输入的程 ...

  8. 【css学习整理】浮动,清除

    css内边距属性: padding padding-top right bottom left 如果是两个数字,指的是上下,左右 padding: 10px 20px  上下10  左右20 如果是三 ...

  9. 51nod 1610

    题目 神犇题解 所以说鄙人的姿势水平完全不够啊OTZ. 很naive的想法是O(T*v*m)的,据说卡一卡可以过去.题目要求的东西其实是这个: $ \sum\limits_{i = 1}^v {\mu ...

  10. IntelliJ IDEA 同时启动多个Tomcat实例端口是会冲突