一.前言
介绍一个比较火的混合开发技术框架,ionic
。之前使用过framework7
,但是接触到ionic后,感觉两者的差距还是蛮大的,如果你想要开发功能比较复杂的app,建议还是使用ionic
。
二.简单介绍
简单介绍一下,ionic是一款html5手机应用开发框架,它提供了很漂亮、交互性好的UI组件,可以让我们快速开发;基于原生的API,我们可以通过插件的形式来实现原生的功能。官方网站更新很快,而且文档也描述地很详细。在GitHub上可以快速提出issue,ionic team会快速跟进。
三.快速入门
当然,要快速开发ionic app,基本的前端技术肯定是要会的,html+javascript+css
。
ionic它是基于Cordova框架的,所以要进行ionic开发的话,那么需要安装npm,node.js,Cordova,这些都可以在网上查找相关的资料进行安装。
ionic是通过typescript来进行开发的,typescript是基于javascript的一层封装,所以要是typescript不是很熟悉的话,用javascript来开发也是可以的,在ionic项目中,新建出来的文件是html文件,ts文件以及scss文件。一般的话,每一个页面都是包含这三个文件。
接下来,我们开始创建app
1)首先,通过命令行安装ionic:
npm install -g ionic
2)创建一个app,ionic有3种模版给你选择,一个是空白模版,一个是tabs模版,另外一个sidemenu模版。现在用的比较多的就是tabs模版:
ionic start myApp tabs
其中的myApp就是项目的名字。
3)还有一步就是run起app,看看你之前的安装的步骤是否正确,首先需要进入这个项目的路径,其次就是调用ionic命令运行app:
cd myApp
ionic serve
注意,通过ionic serve跑起来的是以浏览器的方式,你也可以选择要运行的浏览器,默认是电脑的默认浏览器。
本人比较喜欢用chrome,命令行为:
ionic serve -w google\ chrome
因为chrome浏览器在检查元素的时候特别方便,清晰。
还有一点,当你在修改代码的时候,浏览器也会自动实时刷新,这样就大大提高了开发的效率,不需要自己重新去跑浏览器。
注意,有时候ionic自动刷新,会出现缓存,这样会导致项目报错,但是实际上,这个项目是没有错误的代码的,所以需要重新运行serve,例如用的是chrome,那么:
ionic serve -w google\ chrome
以上创建出来一个app了,之后需要进行其他的业务逻辑,则需要创建页面来开发。
三.添加新页面
通过快速入门,此时你已经搭建了一个基本的框架,如果要进一步的开发,需要创建一些新的页面。
本人用的是webstorm
开发神器来开发ionic项目,用webstorm
打开刚刚创建的项目myApp,然后找到文件夹pages,右击创建一个文件夹,例如为about,在这个文件夹下面创建三个文件,分别为about.html,about.ts,about.scss,一般都是创建这三个,如果不需要用到某一个文件,那么也可以不需要创建。
1.三个文件需要写什么代码
1)对于ts文件
创建完这三个文件之后,在about.ts的@component的selector中写上page-about,templateUrl写上about.html。
@component({
selector:'page-about',
templateUrl:'about.html'
})
其中selector中写上page-about,代表这个ts文件关联的scss是哪一个,此时需要在about.scss文件里面写上:
page-about{
}
为何要在scss文件写上这句代码?因为后面在定义样式的时候,可能有多个页面用到重名的样式,例如about page里面有一个样式叫about-title,在另外一个page,也有叫做about-title,这样会导致样式的覆盖。
templateUrl写上about.html,就不用多说了,意思就是这个ts文件的模版关联了这个html文件。
定义页面名字,用于后面的导入:
export class AboutPage {
}
其中AboutPage就是你定义的这个页面的名字,在后面导入app.module.ts会讲到。
2)对于html文件
一般都会用到ion-header
,ion-content
,ion-footer
,顾名思义,这个就是app对应的头部,内容和底部,这个根据你的需要来创建。
3)对于scss文件
写上
page-about{
}
后面这个页面的所有样式就写在page-about的大括号里面,防止样式的覆盖。
上面的三个小步骤是对于最初创建ionic页面的时候需要写些什么基本代码。接下来就是需要将你创建的页面与这个项目项关联起来。
2.关联页面
1)首先,去到项目的app文件夹,再去到app.module.ts文件,导入刚刚创建的页面:
import { AboutPage } from '../pages/about/about';
其中AboutPage就是刚刚定义的页面的名字。
2)在declarations
中导入AboutPage ,在entryComponents
中导入AboutPage。
3.页面的方法
ionViewDidLoad(){
console.log("ionViewDidLoad 当页面加载的时候触发,仅在页面创建的时候触发一次");
}
ionViewWillEnter(){
console.log("ionViewWillEnter当将要进入页面时触发");
}
ionViewDidEnter(){
console.log("ionViewDidEnter 当进入页面时触发");
}
ionViewWillLeave(){
console.log("ionViewWillLeave 当将要从页面离开时触发");
}
ionViewDidLeave(){
console.log("ionViewDidLeave 离开页面时触发");
}
ionViewWillUnload(){
console.log("ionViewWillUnload 当页面将要销毁同时页面上元素移除时触发");
}
ionViewCanEnter(){
console.log("ionViewCanEnter");
}
ionViewCanLeave(){
console.log("ionViewCanLeave");
}
上面几个方法在实际开发中用的比较多的是ionViewDidLoad
,第一次进入这个页面的时候调用此方法,这个和原生的iOS的方法viewDidLoad
基本是同一个意思。数据请求经常是写在这个方法里面,还有一些元素的动态添加等等。这样不会导致每次进入页面都需要进行数据请求和页面元素的添加。当然,实际的开发是怎么样,就需要根据你自己的情况来选择方法。
以上是ionic的页面导入步骤。至此,你就可以进行ionic开发了,页面已经关联起来了。ionic提供了大量的UI组件,可以大大提高开发速度,在官网上面有很全面的介绍和demo演示。
下面我就介绍进一步的开发和一些开发中遇到的问题。
四.导入插件
在ionic的官网上面有很多插件,可以自行查找。
我们以keyboard插件为例子。
1.安装
ionic cordova plugin add cordova-plugin-ionic-keyboard
npm install --save @ionic-native/keyboard
其中@ionic-native/keyboard是指将keyboard安装到ionic-native文件夹下。
2.在app.module.ts文件需要导入:
import { Keyboard } from '@ionic-native/keyboard';
还需要在providers中需要写入Keyboard,这样就完成了一个插件的导入。
3.使用
如果你需要在about page中使用这个插件,那么需要在ts文件中:
1)导入
import { Keyboard } from '@ionic-native/keyboard';
2)在constructor中声明一下实例:
constructor(private keyboard: Keyboard){}
3)在ts文件中调用你需要的API,如:
this.keyboard.hideFormAccessoryBar(false);
五.共用工具方法
在实际的开发中,例如iOS原生开发,我们会使用添加.h文件和.m文件来封装共用方法,然后通过实例方法或者类方法来调用,前端开发可能我们就单独抽取出一个js文件来封装共用方法,但是现在我们是用的是ionic框架开发,不像前端开发直接在html导入js文件,当然我们可以在index.html文件中直接导入,但是ionic也我们提供了统一的方式-provider。
假如我们需要共用一个loading,那么我们此时可以创建一个provider,步骤为:
1.生成这个共用方法
ionic g provider method
其中method就是这个共用方法的名字,ionic会自动帮你创建好这个文件在项目的providers文件下面。
去到method.ts文件中,写入代码:
1)导入
import {LoadingController} from "ionic-angular";
2)声明
constructor(
private loadingCtrl: LoadingController
) {}
3)实现方法
showLoading(){
this.loading = this.loadingCtrl.create({});
this.loading.present();
}
2.使用共用方法
1)在需要使用这个loading的方法的页面导入
import { MethodProvider } from '../../providers/method/method';
其中MethodProvider就是你创建的那个共用方法的名字,在method.ts中找到这个名字。
2)声明实例
private methodProvider: MethodProvider,
3)调用方法
this.methodsProvider.showLoading();
六.数据请求
在ionic中的数据请求有2种,一个是angular数据请求,另一种是原生http数据请求。
1.angular数据请求
1)导入:
import {HttpClient} from "@angular/common/http";
2)声明:
private http: HttpClient
3)使用:
this.http.post(MyApp.SERVER + this.path, params, {}).subscribe(res => {
// 网络请求发生成功
let resObj = JSON.parse(JSON.stringify(res));
console.log("---resObj--" + resObj);
}, err => {
// 网络请求发生错误
});
注意,在真机测试中,angular数据请求不会起作用。
2.原生http数据请求
1)安装和导入
ionic cordova plugin add cordova-plugin-advanced-http
npm install --save @ionic-native/http
在需要的页面中导入
import {HTTP} from "@ionic-native/http";
2)声明
private nativeHttp: HTTP
3)使用
this.nativeHttp.setDataSerializer('json');
this.nativeHttp.post(MyApp.SERVER + this.path, params, {})
.then(data => {
let resObj = JSON.parse(data.data);
console.log("---resObj--" + resObj);
})
.catch(error => {
});
在浏览器中,原生http请求是不起作用的。
所以,在实际的代码开发中需要根据platform来区分需要的数据请求方式。
注意,有时候你区分了使用方式,但是就是一直报错,而且通过postman测试API是没有问题的,那么此时需要注意2点:
1)请求的API,后台是否解决了跨域的问题。
2) ionic项目需要移除一下whitelist,然后重新再添加进去。
ionic cordova plugin rm cordova-plugin-whitelist
ionic cordova plugin add cordova-plugin-whitelist
七.注意点
1.启动图
ionic项目的启动图插件在创建项目的时候,是默认帮我们添加了,在iOS上面是没有问题的,在config.xml中加入:
<splash src="src/assets/imgs/ios/Default@2x~universal~anyany.png" />
<splash src="src/assets/imgs/ios/Default@3x~universal~anyany.png" />
其中Default@2x~universal~anyany.png
的大小为2732*2732
,为
Default@3x~universal~anyany.png
的大小为2208*2208
,具体可以Cordova官网,上面有详细的介绍: splashscreen
但是接下来在config.xml中导入android的代码时候,就一直出不来启动图,后面发现是android的splashscreen没有安装,所以就安装了一下这个插件:
ionic cordova plugin add cordova-plugin-splashscreen
会发现,在安装的过程中,提示iOS已经安装,但是android没有安装。
安装成功之后,android的启动图就出现了。
2.virtual scroll
ionic3版本,如果使用ion-segment的话,并且ion-segment对应的有使用到list的话,就不能使用virtual scroll,否则会出错,这个virtual scroll找不到了。在GitHub上有很多人提出了这个issue,本人也查找了里面讨论的内容,有人说是用hidden可以解决,但是实际上是没有用的,原因就是ion-segment本身也是类似于判断的意思,但是对于virtual scroll而言,在ion-list上面不能有*ngIf,否则就会找不到这个virtual scroll。
3.android硬件返回事件处理
在网上面找到很多关于android硬件返回按钮处理的方法,其中一篇文章写的比较好的文章,它是通过抽成一个公用的方法,然后在tabs文件夹中创建定义一个registerBackButtonAction方法即可,除非是有特殊页面,例如login页面,需要重新定义registerBackButtonAction
,因为点击login页面的android硬件放回按钮,是要退出app的。
这样做是没有问题的,但是本人遇到有一个页面是通过ModalController来跳转页面的,此时如果还是使用它的方法就会出错,因为它没有区分出modal的情况。所以在这个ModalController页面,点击返回,会直接退出app。
在网上查找了一种也是大致相同的方法,但是返回事件是在app.component.ts
文件中定义了,增加判断面是否有toast或loading或Overlay,如果有的话,需要先隐藏,这样就避免了直接退出app,导入的IonicApp如果应用在抽成一个公用的方法里面会出现报错。所以关于android硬件返回按钮的处理事件,还是放在了app.compoent.ts
文件中处理。
注意,注册registerBackButtonAction
需要写在platform.ready
里面,而且需要做一下延时。
八. 总结
总体而言,ionic是一个很不错的手机应用开发框架,版本的更新很快,文档齐全,用户体验好,近乎原生,而且有一个强大的讨论社团,对于bug的跟进速度很快,而且对于后面app的更新迭代有很大帮助。如果你要开发一个稳定,快速迭代的app,推荐使用ionic。
网友评论