Ionic3 开发流程

简单介绍自己使用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 中有三种类型的指令:

组件 — 拥有模板的指令
<appHightlight><appHightlight>

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

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

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

例如:<p>The hero's birthday is {{ birthday | date }}</p>

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

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

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/

环境搭建

安装Node
全局安装 ionic cordova
配置SDK

引用插件

安装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。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏JavaEE

Intellij IDEA 使用教程

正所谓工欲善其事,必先利其器,身为码农的我们,拥有得心应手的编辑器就好比如鱼得水,在万行代码中取bug首级就如观鱼赏花!IDEA就堪称是当世之神兵,自诩为最智能...

1082
来自专栏ionic3+

【技巧】ionic3优雅解决启动前、后黑白屏问题

启动前黑白屏问题,仅存在于android,是android应用的通病,ionic表示这锅它不背。 具体操作时,当我们点击桌面图标启动APP时,有时会闪一下黑色...

2646
来自专栏互扯程序

跨域请求方案 终极版

现在是资源共享的时代,同样也是知识分享的时代,如果你觉得本文能学到知识,请把知识与别人分享。

3593
来自专栏前端知识分享

基于Vue-cli 快速搭建项目

Vue-cli可以快速帮助我们创建一个项目,这是官方给我们提供的脚手架。下面我说一下vue-cli的使用方法。

771
来自专栏做全栈攻城狮

采用React+Ant Design组件化开发前端界面(一)

​ antd是基于less开发的,我们使用less可以方便的改变主题色等配置。

2633
来自专栏Seebug漏洞平台

Bypass unsafe-inline mode CSP

[+] Author: evi1m0 [+] Team: n0tr00t security team [+] From: http://www.n0tr0...

3354
来自专栏CSDN技术头条

由浅入深学习JavaScript Debug技巧

我常常看到不少开发者不懂如何Debug JavaScript代码,因此决定写一篇博客为初学者介绍如何Debug。我希望这篇文章可以提供一些有用的信息。我尝试在本...

1859
来自专栏前端布道

Windows下Ionic 开发环境搭建

Ionic 是一款基于 Cordova 及 Angular 开发 Hybrid/Web APP 的前端框架,类似的其他框架有:Intel XDK等。

1453
来自专栏做全栈攻城狮

采用React+Ant Design组件化开发前端界面(一)

注意:在webpack.config.dev.js添加的配置部分,也需要在webpack.config.prod.js中做相同的配置。否则可能导致项目发布上线后...

1172
来自专栏Jerry的SAP技术分享

使用Cordova将您的前端JavaScript应用打包成手机原生应用

假设我用JavaScript和HTML开发了一个前端应用,我想把该应用打包成能直接在手机上安装和运行(不通过浏览器)的原生应用,例如像下面这样。对应用的用户来说...

1012

扫码关注云+社区

领取腾讯云代金券