前言

  最近公司要开始做App项目,最终选定了ionic开发方案,在这里我将学习的过程记录在这里,一方面避免自己忘记,另一方面方便大家交流学习。这里我们采用的是 Ionic2 + Angular2 :

  AngularJS2 是一款开源JavaScript库,由Google维护,用来协助单一页面应用程序运行。AngularJS2 是 Angular 1.x 的升级版本,性能上得到显著的提高,能很好的支持 Web 开发组件。AngularJS2 发布于2016年9月份,它是基于ES6来开发的。 

  程语言JavaScript是ECMAScript的实现和扩展,由ECMA(一个类似W3C的标准组织)参与进行标准化。ECMAScript定义了:

    语言语法 – 语法解析规则、关键字、语句、声明、运算符等。

    类型 – 布尔型、数字、字符串、对象等。

    原型和继承

    内建对象和函数的标准库JSONMath数组方法对象自省方法等。

  ECMAScript标准不定义HTML或CSS的相关功能,也不定义类似DOM(文档对象模型)的Web API,这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景,无论是浏览器环境还是类似node.js的非浏览器环境。

  TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。TypeScript 是一种给 JavaScript 添加特性的语言扩展。

  ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准。因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015。

  Ionic 是UI框架,集成了angular在内,使用angular提供的应用结构,并进行交互

  与ionic1的区别

  1. 目录结构有变化   开发目录从www转移到src中,个人认为主要是采用了typeScript需要编译。
  2. angrular2 typescript  很好很强大。需要适应。
  3. 每个页面就是一个目录,由模版.html  typescript脚本  .ts 样式   .scss组成
  4. 入口在src/app/app.component.ts里    rootPage  作为根节点。
  5. 比ionic1少写不少代码,据说速度也更快了。

一、环境搭建

  首先还是开发环境的搭建,这里我只说andorid环境的搭建,ios之后再说。

  1.java JDK安装(建议安装新版)

    下载地址一:http://www.oracle.com/technetwork/java/javase/downloads/index.html

    下载地址二: http://www.androiddevtools.cn/

    下载地址三: http://jdk.android-studio.org/

    具体的安装步骤可以百度搜索,安装完成收到 ”运行->cdm->java/javac“能打印用法说明证明安装成功。

  2.Android SDK安装

    下载Android SDK 文件,选择自己想要的版本下载。

    解压Android SDK文件,里面有两个应用程序: “SDK Manager.exe”(负责下载或更新SDK包) 和 "AVD Manager.exe"(负责创建管理虚拟机)。运行“SDK Manager.exe”进行SDK下载。   

    使用代理下载,点击tools-option,在HttpProxyServer中输入mirrors.neusoft.edu.cn,在HttpProxyPort输入80,点击关闭,关闭sdkManager并重新启动。

    下载截图圈红部分

勾选完成,点击Install X packages开始下载

    下载完成后配置环境变量

      D:\Program Files\ADT\sdk\tools; 

      D:\Program Files\ADT\sdk\platform-tools;(具体视你SDK安装目录而定)

    在命令行输入 android -h ,有输出非错误信息,即搭建完成。

  3.nodejs 安装(建议安装新版)

    下载地址:https://nodejs.org/en

  4.cordova 安装

    npm set registry https://registry.npm.taobao.org # 注册模块镜像
    npm set disturl https://npm.taobao.org/dist # node-gyp 编译依赖的 node 源码镜像
    npm cache clean # 清空缓存

    在国内因为 goolge不能使用的问题,所以我们一般才用淘宝镜像安装,使用cnpm替代npm  

    命令行运行 

npm install -g cnpm --registry=https://registry.npm.taobao.org

    然后使用官方的安装方法安装,在之前的cordova2.9还能下载安装包安装,现在官方给的安装方法只能在线安装,如果要选择安装版本可以使用 cnpm install -g cordova@version,卸载命令 npm uninstall cordova -g

cnpm install -g cordova

    完成后使用cordova -v能查看版本证明安装成功

    卸载命令

cnpm uninstall -g cordova

      更新命令

cnpm update -g cordova

  

  5.ionic 安装

    如果已经安装可以使用更新命令更新 cnpm update -g ionic  

cnpm install -g ionic

    完成后使用ionic -v能查看版本证明安装成功,ionic的更新与卸载同 cordova一样

二:创建ionic项目

  环境都安装成功了以后现在就可以创建 ionic项目了

  Ionic提供了三种初始模版,即:tabs、sidemenu、blank,不加模版名时默认创建tabs项目。

    ionic start myApp --v2 tabs //使用tabs模版创建Ionic2项目
    ionic start myApp --v2 sidemenu //使用sidemenu模版创建Ionic2项目
    ionic start myApp --v2 blank //创建空白的Ionic2项目

  1.ionic -v1项目
,ionic2 默认创建的是ionic 2+的项目,所以要创建 v1版本的项目需要加上版本号
//创建ionic -v1版本的项目demo
ionic start demo --v1 --no-git --skip-npm
cnpm install --save //进入项目demo目录执行
ionic serve //启动项目

  这样我们就可以看到我们创建的ionic -v1版本的项目了 http://www.cnblogs.com/jinxiblog/p/6820659.html

  2.ionic -v2项目

//创建ionic -v2版本的项目
ionic start demo --no-git --skip-npm
cnpm install --save //进入项目demo目录执行
ionic serve

  ionic项目创建报错处理 http://www.jianshu.com/p/f9b0dfe35328

  过程中出现的问题:

直接使用(ionic start demo tabs)此命令创建项目,网络原因Running command会执行很长时间,有些慢,可能出错,可以换另一种方式  ionic start demo  --no-git --skip-npm

跳过npm install package

执行完毕,没有错误的情况下,此时www目录没有相关模板,进入项目目录

npm  install --save

执行完毕,输入ionic info

如果报错,使用 cnpm install --save

至此,项目创建完毕。

三、启动项目

  进入项目根目录执行 ionic serve 命令

执行ionic serve出现以上问题,在npm时,会很慢,结束操作。使用cnpm执行该命令,完毕后,重新ionic serve

四、添加 Android 平台

    使用命令ionic platform add android会一直加载,没有响应,翻墙的条件限制,使用命令cordova platform add android --nofetch

出现的问题:

  添加安卓平台时,如果出现downloading:gradle-2.14.1-all.zip类似语句,Ctrl+C结束执行,手动下载gradle的对应版本号的zip。下载好的gradle的压缩文件复制到Users\Administrator\.gradle\wrapper\dists\gradle-2.14.1-all.zip\***********\路径下。重新执行add android,自动解压。

五、编译 APK

  项目根目录执行

cordova build android

  

Ionic创建混合App(一)的更多相关文章

  1. Ionic创建混合App(二)

    ionic 2 启动应用进入欢迎引导页 1.首先,使用CLI命令,创建引导页面 ionic g page welcome 2.需改welcome.html模板文件 <ion-slides pag ...

  2. 一个先进的App框架:使用Ionic创建一个简单的APP

    原文  http://www.w3cplus.com/mobile/building-simple-app-using-ionic-advanced-html5-mobile-app-framewor ...

  3. hybird app(混合式app开发)cordova ionic 创建相应平台的app

    hybird app(混合式app开发) 之ionic 框架平台 guide cordova 创建相应平台的app 1. npm install -g cordova //全局安装cordova-cl ...

  4. ionic3+angular4开发混合app 之自定义组件

    这里主要是记录ionic3+angular4开发混合app时自定义组件,我想自定义组件的方法和angular4应该类似,具体在纯angular4中自定义组件,暂时没有实践,个人觉得差别不大,之后实践了 ...

  5. 移动web、webApp、混合APP、原生APP、androd H5混合开发 当无网络下,android怎么加载H5界面

    PhoneGap是一个采用HTML,CSS和JavaScript的技术,创建移动跨平台移动应用程序的快速开发平台.它使开发者能够在网页中调用IOS,Android,Palm,Symbian,WP7,W ...

  6. 分享 Ionic 开发 Hybrid App 中遇到的问题以及后期发布 iOS/Android 的方方面面

    此篇文章主要整理了最近在使用 Ionic 开发 Hybrid App 过程中遇到的一些疑难点以及后期发布生成 iOS 和 Android 版本过程中的种种问题. 文章目录 Ionic 简介和项目需求介 ...

  7. 混合App 框架选型

    个人一直想做个App,但是学习 IOS 的过程发现 原生的做界面还是听麻烦的就放弃了.后来就转到混合式App阵营了 混合式App 定义 Hybrid App(混合模式移动应用)是指介于web-app. ...

  8. ionic开发android app步骤

    一.android开发 1. 首先要安装node环境,Ionic的安装和后续的许多前端工具的安装都依赖于node的包管理器npm. nodeJs环境的安装很简单,去官网下载最新版的NodeJs直接安装 ...

  9. 什么是混合app?

    APP混合模式和原生模式的优劣 ECSHOP模板/ecshop开发中心(www.68ecshop.com) / 2014-06-27 每当你打算开发移动应用程序时,都要考虑你的应用如何创建以及如何部署 ...

随机推荐

  1. 1px像素问题(移动端经典问题)

    1.物理像素:移动设备出厂时,不同设备自带的不同像素,也称硬件像素: 逻辑像素:即css中记录的像素 在开发中,为什么移动端CSS里面写了1px,实际上看起来比1px粗:了解设备物理像素和逻辑像素的同 ...

  2. mybatis多个参数时传参方式

    第一种方案 DAO层的函数方法 Lecture getLecture(Integer id, Integer parentId); 对应的mapper.xml <select id=" ...

  3. 【python实例】判断质数:for-break-else

    """ for 变量 in 容器: 遍历--break 如果执行到了break语句, 则else不会被执行 else: break语句没有被执行时, 执行else &qu ...

  4. tweenMax+如何让数字由初始值动画到结束的值

    html: <div class="wz1">0</div> css: .wz1{ width: 114px; height: 30px; position ...

  5. favicon.ico是什么?

    一.什么是favicon? 所谓favicon,便是其可以让浏览器的收藏夹中除显示相应的标题外,还以图标的方式区别不同的网站.favicon 中文名称:网页图标  英文名称:favorites ico ...

  6. Redis实战(十一)Redis面试题

    序言 单线程的redis为什么这么快? 1.纯内存操作不需要进行磁盘的 IO 2.单线程操作避免了频繁上下文切换 3.采用非阻塞的多路I/O复用模型 什么是路I/O复用模型? 核心是监听socket, ...

  7. signup图片上传预览经常总结

    html <html> <head> <meta charset="utf-8" /> <meta http-equiv="X- ...

  8. 如何理解重载与重写——Overload vs Override/Overwrite

    重载: 在同一个类中,拥有类似功能的同名方法之间的关系叫做重载. 重载的条件:1.具有相同方法名和类似功能: 2.参数的类型或者个数不同: 3.与返回值无关: 重写: 在子父类的继承关系中,子类继承父 ...

  9. window下启动redis服务

    ---恢复内容开始--- 在windows环境下启动redis服务,前提是你安装好了,启动如下: 一,进入redis的安装目录下,在地址栏输入“cmd”,回车 二,然后会进入cmd界面,直接运行命令r ...

  10. 最简单的flask项目详解

    # 第一部分,初始化:所有的Flask都必须创建程序实例, # web服务器使用wsgi协议,把客户端所有的请求都转发给这个程序实例 # 程序实例是Flask的对象,一般情况下用如下方法实例化 # F ...