ionic踩坑经过

已有项目里功能开发的一些建议和注意(入门)
1。创建组件(可以理解为页面)
一般新功能开发需新建一个页面,在离子里面新建页面一般用命令去新建,尽量避免用复制粘标去新建页面
命令行:离子g页面(页面名称)-pagesDir src / pages / 
详细介绍:https//blog.csdn.net/sinat_28597179/article/details/79094176 
2.插件与接口
(1)在功能页面里面需要一些特定的页面效果其实很多都是有插件可以去实现的,这里给两个网址
https://github.com/https://ionicframework.com/docs/
80%的都可以在这两个网站找到,至于怎么使用,其实可以人家的演示下载下来跑一下就知道了
(2)接口我们目前统一是使用陈工(陈跃)封装过的阿比接口服务,使用起来跟TP差不多;在你需要用到阿比的.TS组件里面需要先引用,代码如下:

  1. import { Api,} from '../providers';

然后在这里声明一下

  1. export class WorkExamineLogPage {
  2. constructor(
  3. public Api:Api,
  4. public navCtrl: NavController,
  5. public navParams: NavParams) {
  6. }
  7. }

之后就可以在类里面同过这一点。的方式来使用,比较常用的是

  1. this.Api.get

  1. this.Api.post

(3)页面赋值
由于离子的页面都组件化的,所以通过上面接口得到的数据其实可以直接在页面上反映并使用,
这里用一个简单的例子会具体一点
下面是http文件get_the_date.html

  1. <ion-header>
  2. <ion-navbar>
  3. <ion-title>获取日期</ion-title>
  4. </ion-navbar>
  5. </ion-header>
  6. <ion-content padding>
  7. <p>今天的日期{{Date_today}}</p>
  8. </ion-content>

上面代码里用{{}}的地方就是引用变量,因为上面说过阿比的请求是异步的,所以在TS文件这边就要先定义这个变量,不然刚进页面的时候回由于变量还没有定义而报错

  1. import { Component } from '@angular/core';
  2. import { IonicPage, NavController, NavParams } from 'ionic-angular';
  3. import { Api} from '../providers';
  4. @IonicPage()
  5. @Component({
  6. selector: 'page-get_the_date',
  7. templateUrl: 'get_the_date.html',
  8. })
  9. export class GetthedatePage {
  10. Date_today:any;
  11. constructor(
  12. public Api:Api,
  13. public navCtrl: NavController,
  14. public navParams: NavParams) {
  15. }
  16. ionViewDidLoad() {
  17. this.Api.get('mobile/get_the_date_Api').subscribe(
  18. res=>{
  19. this.Date_today = res;
  20. },
  21. err=>{
  22. alert('接口出错,请稍后再试')
  23. }
  24. )
  25. console.log('ionViewDidLoad GetthedatePage');
  26. }
  27. }

当接口返回数据后,只需要赋值到HTML引用的变量,前端呈现就会产生变化,展现该接口返回的值;同理,当这个HTML页面是需要做表单提交的话,也是同过这个方法来进行提交的,下面我直接放出一个简单的demo:
下面是http文件post_the_data.html

  1. <ion-header>
  2. <ion-navbar>
  3. <ion-title>表单提交</ion-title>
  4. </ion-navbar>
  5. </ion-header>
  6. <ion-content padding>
  7. <ion-item>
  8. <ion-label >今天天气</ion-label>
  9. <ion-input type="text" [value]="weather"></ion-input>
  10. </ion-item>
  11. </ion-content>

然后是对应的TS文件

  1. import { Component } from '@angular/core';
  2. import { IonicPage, NavController, NavParams } from 'ionic-angular';
  3. import { Api} from '../providers';
  4. @IonicPage()
  5. @Component({
  6. selector: 'page-post_the_data',
  7. templateUrl: 'post_the_data.html',
  8. })
  9. export class PostthedataPage {
  10. weather:string;
  11. constructor(
  12. public Api:Api,
  13. public navCtrl: NavController,
  14. public navParams: NavParams) {
  15. }
  16. ionViewDidLoad() {
  17. this.Api.get('mobile/post_the_data_Api',{datathis.weather}).subscribe(
  18. res=>{
  19. alert('提交成功');
  20. },
  21. err=>{
  22. alert('接口出错,请稍后再试')
  23. }
  24. )
  25. console.log('ionViewDidLoad PostthedataPage');
  26. }
  27. }

转载声明:本文为博林网-IT技术分享的原创文章,转载请注明原文地址,谢谢合作

发表评论: