前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Ionic3 开发流程

Ionic3 开发流程

作者头像
spilledyear
发布2018-08-21 15:01:22
1.9K0
发布2018-08-21 15:01:22
举报
文章被收录于专栏:小白鼠小白鼠

简单介绍自己使用Ionic3开发的过程,涉及到的知识点如下:

Angular

Ionic

Cordova

ES6

TypeScript

Scss

环境搭建

引用插件

调试

Android打包

Android签名

IOS打包

Angular

Angular4,资源整理:https://angular.cn/

模块

使用 @NgModule 注解声明一个模块,模块中可以包含一些组件、指令、管道,当需要在当前模块中引用其它模块的内容时(比如某些指令),只需要引入那个模块。

@NgModule的主要属性如下:http://www.cnblogs.com/dojo-lzz/p/5878073.html

指令

在 Angular 中有三种类型的指令:

代码语言:javascript
复制
组件 — 拥有模板的指令
<appHightlight><appHightlight>

结构型指令 — 通过添加和移除 DOM 元素改变 DOM 布局的指令
比如:*ngIf 、*ngFo

属性型指令 — 改变元素、组件或其它指令的外观和行为的指令。
<p appHightlight>Highlight me!</p>

管道

管道把数据作为输入,然后转换它,给出期望的输出。

代码语言:javascript
复制
例如:<p>The hero's birthday is {{ birthday | date }}</p>

在上面的例子中, date 就是一个管道

路由

Ionic对路由进行了封装,所以基本上看不出Angular路由的影子,API就看Ionic的API即可。

代码语言:javascript
复制
NavController、NavParams、<ion-nav>

依赖注入

和你想象中的依赖注入一样。

Ionic

ionic3基于Angular4。我们知道Angular可以创建自己的模块、组件、管道、服务等等,Ionic就是干了这么一件事情。Ionic提供了一系列的组件给我们使用,使用<grid>(基于flex)实现响应式布局。

资源整理:https://ionicframework.com/docs/

API太多了,直接看文档就好了。

Cordova

Cordova提供JS访问原生设备的一种手段。Ionic Nativa 对cordova插件做了一层轻度封装,不过提供的文档资料不够详细,所以主要文档还是在 cordova官网上。

资源整理:http://cordova.axuer.com/

在实际开发中,也就是在需要 使用到摸个插件的时候才去看一下该插件对应的api。

ES6

表面上是在写TypeeScript,实际上还是在写JS。所以,还是很有必要学习一下ES6的一些基本用法。

资源整理:http://es6.ruanyifeng.com/

TypeScript

TypeScript是JavaScript的超集(superset),“任何合法的JavaScript都是合法的TypeScript。”

自我感觉:表面上是在写TypeeScript,实际上还是在写JS。

基本使用:Class、强类型。

资源整理:http://www.tslang.cn/docs/home.html

Scss

花几分钟简单了解一下基本用法。其实主要就是css,不过这里推荐学医一下 flex 布局。

Flex:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Scss:http://sass.bootcss.com/docs/sass-reference/

环境搭建

代码语言:javascript
复制
安装Node
全局安装 ionic cordova
配置SDK

引用插件

代码语言:javascript
复制
安装Ionic Nativa 插件
直接在Ionic官网看,上面会给安装的命令,拿过来用就好了
ionic cordova plugin add cordova-plugin-camera
npm install --save @ionic-native/camera

安装大神写的插件
Cordova允许我们自定义插件,这种插件一般都放在 github,需要自己去找。
ionic cordova plugin add https://github.com/yanxiaojun617/com.kit.cordova.amaplocation --save

调试

样式问题:直接在浏览器上调试

需要调用原生设备:真机+chrome调试,这样可以看到日志,要不然你是没办法看到日志的。

Android打包

使用ionic cli 打包,打包分两种,开发包 和发布包。发布包需要对app进行签名。

资源整理:http://www.jianshu.com/p/a7791341709e

Android签名

如果需要发布应用到 安卓市场

资源整理:http://www.jianshu.com/p/26166279413b

IOS打包

比较麻烦,涉及到一系列IOS证书,关键是还要开发者账号,要钱。目前的做法是远程打包,不过目前有一个问题:现在那台机器 上的证书好像失效了/ku。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017.11.02 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Angular
  • Ionic
  • Cordova
  • ES6
  • TypeScript
  • Scss
  • 环境搭建
  • 引用插件
  • 调试
  • Android打包
  • Android签名
  • IOS打包
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档