ionic基础一

1. 创建ionic项目

https://ionicframework.com/getting-started

1）进入一个文件夹下，执行ionic start myApp tabs生成带table标签的项目架构

2）生成的项目下没有该文件夹，需要执行npm install生成项目必须文件

3）新建页面：ionic g page NewPage  新建了一个NewPage名称的文件夹。还需要在app.module.ts中引入相关ts文件

4）rootpage最好设置为登录页面，在通过登录页面的登录方法进入其他页面。

   如果把菜单页面或首页设置为app.Html是读取不到用户相关信息的，即app.html只能在项目启动时进入一次如果这个页面中有什么需要登录用户信息后才可以显示的数据则不能回显出来（不知道是不是这样，但是遇见过这种问题）

5）<ion-item>

<ion-label class="color-css">提供人员</ion-label>

<div item-content class="width-div">{{clueObj.provider}}</div>

</ion-item>

Ionic手机上的一行使用ion-item标签。Ion-label代表行的开头

在ts中定义clueObj这个对象。页面通过双{}显示出来

6）<ion-item [ngStyle]="{'display': status == '0' ? 'block':'none' }">

<button ion-button item-start (click)="clueEdit()" style="width:100%">编辑</button>

<button ion-button item-start (click)="close()" style="width:100%">关闭</button>

<button ion-button item-start (click)="toChance()" style="width:100%">转为机会</button>

</ion-item>

在后台定义一个status==‘0’，block是显示，none是不显示。相等执行？前面的。不相等执行？后面的。前面的display是固定的属性名称

 

（click）=””代表点击函数

 

7）constructor(public navCtrl: NavController, public navParams: NavParams,

public comUtil: CommonUtilProvider,public userProvider: UserInfoProvider) {

this.clueObj = navParams.get('clue');

constructor代表构造函数。

NavController用来跳转页面,前面的page代表ts的类名。后面括号里的代表传递的参数

this.navCtrl.push(ClueEditPage, { 'clue': this.clueObj, 'flag': '1' });

NavParams用来获取上下文的数据，即跳转页面时传递的参数通过这个方法获取

this.clueObj = navParams.get('clue');

 

 

8）

<form [formGroup]="clueForm" (submit)="saveForm($event)">

<ion-item>

<ion-label>线索名称</ion-label>

<ion-input formControlName="clueName" type="text" clearInput></ion-input>

</ion-item>

<ion-item>

<ion-label>线索描述</ion-label>

<ion-textarea formControlName="clueDesc" type="text" rows="5" cols="25"></ion-textarea>

</ion-item>

<button ion-button full type="submit" style="width: 90%;font-size: 22px;margin: 0 5%;">提交</button>

</form>

 

页面的form表单通过formGroup来对应。formControlName代表标签id

Ts中引入该表单

public clueForm: FormGroup;

构造函数中初始化表单

public formBuilder: FormBuilder,

 

this.clueForm = this.formBuilder.group({

clueName: ['', Validators.required],

clueCompany: ['', Validators.required],

provider: [this.user.returnuserName(), Validators.required],

clueDesc: ['', Validators.required],

clueChannel: ['', Validators.required],

assigns: ['', Validators.required],

});

 

 

9）JSON.stringify(list)

转换成json格式的

console.log('线索查询指派人名称：' + JSON.stringify(this.assignorArray));

 

10）this.clueForm.value.id 

获取表单里的id字段的值

 

11）<ion-item>

<ion-label>线索公司</ion-label>

<ion-select formControlName="clueCompany" okText="确定" cancelText="取消">

<ion-option [value]="item.clueCompany" *ngFor="let item of clueConmpany">{{item.clueCompany}}</ion-option>

</ion-select>

</ion-item>

下拉菜单：ion-select  formControlName代表的是下面的value

*ngFor="let item of clueConmpany"

循环遍历

 

12）<div>

<ion-searchbar [(ngModel)]="searchQuery" (input)="saveForm($event)"></ion-searchbar>

</div>

搜索框标签：ion-searchbar  （input）代表搜索改变后调用的函数方法

 

saveForm(ev: any) {

event.preventDefault();

let serviceName = '/clue/listSearch';

this.cluesArray2 = [];

for (let i = 0; i <this.cluesArray.length; i++) {

if(this.cluesArray[i].clueName.indexOf(ev.target.value)!=-1){

 

ev.target.value

代表搜索框中输入的值

 

13）(ngModelChange)="switchProvince($event)

和js方法中的onchange类似，当该标签的值改变时调用函数

<ion-select formControlName="decChainStaff" okText="确定" ng-model="dec" cancelText="取消" (ngModelChange)="switchProvince($event)">

<ion-option *ngFor="let item of descionArray" [value]="item.decChainStaff">

{{item.decChainStaff}}

</ion-option>

</ion-select>

 

14）轮播图：

<!-- start 轮播图 -->

<!-- <ion-slide-box></ion-slide-box> -->

<ion-slides pager class="sliderBanner" (ionSlideDidChange)="slideChanged()">

<ion-slide>

<img src="assets/imgs/banner.png" />

</ion-slide>

<ion-slide>

<img src="assets/imgs/banner.png" />

</ion-slide>

<ion-slide>

<img src="assets/imgs/banner.png" />

</ion-slide>

</ion-slides> 

<!-- end 轮播图 -->

相关ts方法：

   //轮播

@ViewChild(Slides) slides: Slides;

slideChanged() {

//每一张图片可以添加事件

}

ngAfterViewInit() {

// this.slides.freeMode = true;

this.slides.loop = true;//循环

this.slides.autoplay = '10000';//2秒自动播放

this.slides.speed = '500';//一张动画时间500毫秒

this.slides.autoplayDisableOnInteraction = false;//注意此参数，默认为true--自动轮播时手动滑动不再轮播

}

 

 

 

15）Ionic省市县三级联动选择：

  地址：https://www.cnblogs.com/metaphors/p/7900483.html

16）ionic 连接打电话拨号功能：

  <ion-item class="clue-list">

<span class="clue-titleColor">小贷公司A</span> 

<hr align=center width=100% color=#987cb9 SIZE=1>

<div class="clue-fontColor">

<div class="row">

<div class="col col-20">联系人<br>联系电话</div>

<div class="col col-20">张三<br>010-8888888</div>

<!-- <div class="col col-20 col-offset-40 col-center"><span>></span></div> -->

<a class="clue-right" ion-button clear item-right href="tel:10086"><span>></span></a>

</div>

</div>

</ion-item>

超链接属性href加tel：+号码

<a class="clue-right" ion-button clear item-right href="tel:10086"><span>></span></a>

 

config.xml 添加权限语句

<access launch-external="yes" origin="tel:*" />