ionic 使用 jsonp 网络请求注意事项

jsonp 请求后面务必需要拼接上 &callback=JSONP_CALLBACK ,不然无法访问到数据

  requestContent(aid){
    //  http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid=30
    var url='http://www.phonegap100.com/appapi.php?a=getPortalArticle&aid='+aid+'&callback=JSONP_CALLBACK';
    this.jsonp.get(url).subscribe((data)=>{
        console.log(data);
        this.list=data['_body'].result[0];
        console.log(this.list);
    },function(err){
ionic中显示 从服务器传过来的 标签内容
<div [innerHTML]='list.content'></div>
导航条返回按钮的设置以及push时隐藏底部tabbar
IonicModule.forRoot(MyApp,{
   tabsHideOnSubPages: 'true', //隐藏全部子页面 tabs
   backButtonText: '返回' /*配置返回按钮*/
ionic 动态绑定 style 之 [ngStyle]="{'width':recListWidth}
<ion-scroll scrollX="true">  
            <ul class="clearfix" [ngStyle]="{'width':recListWidth}">
                <li *ngFor="let item of recList">
                        <img src="{{item.pic}}"  />
                  <p>{{item.title}}</p>
</ion-scroll>
.userimg img{
        width:5rem;
        height: 5rem;
        border-radius: 50%;
广告位轮播图一定要 判断 下 数据长度 , 不然会报错!!!!
*ngIf="focusList.length>0"
<ion-slides *ngIf="focusList.length>0" class="focus" pager  loop="true" autoplay="3000">    
      <ion-slide *ngFor="let item of focusList">
          <img [src]="config.apiUrl+item.pic" />
      </ion-slide>         
</ion-slides>
类似于iOS中的瀑布流实现方式
<div class="cate_right">
          <ion-row>
              <ion-col col-4 *ngFor="let item of rightCate">              
                    <img [src]="config.apiUrl+item.pic" />
                    <p>{{item.title}}</p>                           
              </ion-col>
          </ion-row>
.cate_right{
        height: 100%;
        flex:1;
        overflow-y: auto;
        ion-label{
            font-size: 1.4rem;
        ion-col{
            border:0.05rem solid #eee;
            margin-left: -0.05rem;
            margin-top: -0.05rem;
                text-align: center;
                color:#666;
                display: block;
                margin: 0 auto;
                max-width: 90%;
        ion-col:nth-child(3n){
            border-right: 0px;
上拉加载更多 坑 最多
添加上拉加载组件
<ion-infinite-scroll (ionInfinite)="doLoadMore($event)" *ngIf="hasData">
      <ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
在ts中声明属性
  public list=[];  /*模拟商品数据*/
  public page=1; /*分页*/
  public hasData=true;  /*是否有数据*/
实现上拉加载更多逻辑
  getSearchList(infiniteScroll){
     if(!infiniteScroll){  /*点击搜索按钮*/
        this.page=1;
        this.hasData=true; 
        this.content.scrollToTop(0); /*回到顶部, 必须让他快速回到顶部, 不然会加载多页数据*/
      console.log(this.keywords);
      var api='api/plist?search='+this.keywords+'&page='+this.page;
      this.httpService.requestData(api,(data)=>{
          if(this.page==1){  /*第一页 替换数据*/
            this.list=data.result;           
          }else{
            this.list=this.list.concat(data.result);  /*拼接数据*/
          this.flag=true;  /*显示商品列表*/
          if(infiniteScroll){
            //告诉ionic 请求数据完成
            infiniteScroll.complete();    
             /*没有数据停止上拉更新*/
             if(data.result<10){
                this.hasData=false; 
          this.page++;
注意: 返回顶部需要使用组件  Content (点我啊), 具体使用请参考API文档;
手势Gestures
Basic gestures can be accessed from HTML by binding totap, press, pan, swipe, rotate, and pinch events.
点击 和 长按 手势
<ion-list inset >
  <ion-item *ngFor="let item of historyList" (press)="removeHistory(item)" (tap)="goSearch(item)">
      {{item}}
  </ion-item>
</ion-list>
*ngIf和*ngFor不能出现在同一个标签里面, 万一出现的话, 就再嵌套一层

<div *ngIf="item.attr">
    <div class="color" *ngFor="let attr of item.attr">
         <strong>{{attr.cate}}:</strong> 
         <span *ngFor="let a of attr.list">
             {{a}}
         </span>
ionic 导航 返回 (pop)
pop()  返回上一级页面
popToRoot() 返回根页面
表单的简单效验
ts文件中
//定义数据
  public userinfo={
    username:'',
    password:''
html 文件中绑定数据
<ion-input type="text" [(ngModel)]='userinfo.username' placeholder='手机号/账户'></ion-input>
<ion-input type="password"  [(ngModel)]='userinfo.password' placeholder='请输入密码'></ion-input>
根据条件动态添加样式
[ngClass]="{'active':key==0}

active是类名, key==0是条件
<span *ngFor="let a of attr.list;let key=index;" [ngClass]="{'active':key==0}">{{a}}</span>
操作DOM节点
需要引入ViewChild ,ElementRef;
import { Component,ViewChild,ElementRef} from '@angular/core';
声明@ViewChild('myattr') myattr:ElementRef;
export class PcontentPage {
  @ViewChild('myattr') myattr:ElementRef;
  public CartPage=CartPage;
  public tabs='plist';  /*商品列表选中*/
  constructor(public navCtrl: NavController) {
给这个元素添加id(类似于id)

#myattr和*ngIf不能放在同一行,如果有的话,请再嵌套一层;
<div #myattr> 
  <div *ngIf="item.attr">
    .......
然后在ts文件中获取dom节点
var attrDom=this.myattr.nativeElement;
[技巧] ionic 手动变更监测
有时候数据已经发生了改变, 但是页面没有发生对象的改变, 可以通过手动添加变更监测.
首先，在ts文件头部添加：
import { Component, ChangeDetectorRef } from '@angular/core';
然后在构造函数里注入：
constructor(private cd: ChangeDetectorRef)
最终在更新变量后，手动调用代码，强制页面检查刷新即可：
this.cd.detectChanges();
原文链接：https://www.jianshu.com/p/b2124ceaf158
[技巧] ionic3的页面导航事件拦截
给定一个标志变量：简单粗暴
canLeave:boolean = false;
然后在逻辑操作中控制这个标志即可，最后在方法里面判断：
ionViewCanLeave() {
    return this.canLeave;
[技巧] 主动触发下拉刷新
要在渲染后，不然refresher可能为未定义。
@ViewChild(Refresher) refresher: Refresher;
 ionViewDidLoad(){
    this.refresher._beginRefresh();
input相关组件的隐藏事件
像ion-searchbar、ion-input、ion-textarea等，都是有ionBlur、ionFocus、ionChange三个事件的，只是官方文档没有写……
textarea指定行数
使用官方的ion-textarea时，使用rows属性指令，如：
<ion-textarea placeholder="说点什么吧" rows="6"></ion-textarea>
输入框内容支持复制黏贴
ion-input包含在ion-item里面即可，而且如果不包，在ios可能还会出现问题。
ionic3添加第三方js
使用typings，一句npm install @types/<package>命令即可，如：
npm install @types/jquery
或许一些文章会写到要全局安装typings的cli，然后用typings的命令typings install等等的，其实已经都过期了，因为从TypeScript 2.0开始，已经改为@types模块，由npm来管理了，这使得使用起来更加方便。
统一设置导航条背景颜色
$toolbar-background: color($colors, danger);
// 统一设置字体
$font-family-base: "HelveticaNeue-Light",
"Helvetica Neue Light", "Helvetica Neue",
Helvetica, Arial, "Lucida Grande", sans-serif;
// 统一设置导航条颜色
$toolbar-background: color($colors,danger);
// 设置分割线宽度和颜色
$hairlines-width: 0.5px;
$list-border-color: color($colors, dark);
全局设置服务
ionic g provider config
import { Injectable } from '@angular/core';
import { Headers, RequestOptions } from '@angular/http';
import 'rxjs/add/operator/map';
@Injectable()
export class ConfigProvider {
  constructor() {
   * 获取域名
   * @param versionType 版本类型，0:正式环境，1:测试环境，2: 本地
  static getDomainInfo(versionType: number = 1): any{
    let domain: string;
    switch(versionType){
      case 0: domain = "http://"; break;  //正式环境
      case 1: domain = "http://"; break;    //测试环境
      case 2: domain = ""; break;    //本地
      default: domain = ""; break;
    return {domain: domain, versionType: versionType};
   *获取api地址
  static getApiHost(){
      return ConfigProvider.getDomainInfo().domain + "";
  static defaultHeaders = new Headers({'Content-Type': 'application/json', 'Accept': 'application/json'});
  static formHeaders = new Headers({'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8', 'Accept': 'application/json'});
  static uploadHeasers = new Headers({'Content-Type': 'multipart/form-data'});
  static defaultOptions = new RequestOptions({headers: ConfigProvider.defaultHeaders});
  static formOptions = new RequestOptions({headers: ConfigProvider.formHeaders});
  static uploadOptions = new RequestOptions({headers: ConfigProvider.uploadHeasers});
因为有时需要在几个环境切换服务地址，所以写一个方法方便切换地址；

另外angular默认使用application/json的请求头，有时我们需要根据后台接口来配置请求头，在这就预先配置几个常用的RequestOption，方便按需要随时切换。
ionic枚举的使用
 * 用枚举管理key值，防止字符串拼错
export enum CacheKeys {
  TOKEN, AUTO_LOGIN, USER_INFO
@Injectable()
export class CacheProvider {
  constructor(public http: Http, public storage: Storage) {
    console.log(CacheKeys[CacheKeys.TOKEN]);
更多姿势可以参考
Ionic3关于Slides的一些坑
<ion-slides #ionSlides loop="true" autoplay="3000" pager (ionSlideAutoplayStop)="autoPlay()">
@ViewChild('ionSlides') slides;
1、Slides在用户拖拽后，停止自动播放，解决方法：
第一种方法： 可以监听  停止自动播放  事件，然后开启自动播放：
autoPlay(){
    this.slides.startAutoplay();
第二种方法： 在启动的时候设置 slides的属性autoplayDisableOnInteraction 为false；
ionViewDidEnter(){  
        this.slides.autoplayDisableOnInteraction = false;  
2、自动播放的Slides调转到其他页面一定时间后（超过设置的播放时间），再回到此页面，自动播放失效，解决方法如下：
现在页面退出的时候手动停止slides的播放（此步骤必须要有，不然后面的启动无效），在回来页面加载完成的时候启动自动播放，代码如下：
  //页面进入时启动自动播放  
   ionViewDidEnter(){  
this.slides.startAutoplay();  
   //页面离开时停止自动播放