第05讲：跨端开发中常用的API和组件

 3.1 Uniapp中onShow()的应用

1. 在使用一些变量进行判断时，用完一次开始下一次判断时，结果会跟前一次一样，这是因为没有把变量重新初始化。
2. onShow()能够在页面显示的时候执行，可以用来对页面中的参数进行合理地初始化。
3. 在调用自定义参数进行判断时，用完后最好重新初始化。

3.2 Uniapp中onLoad()的应用

    页面加载时触发，且只发生一次，有些数据实时性要求不高可以onLoad里面触发对应的请求。

3.3 数据的绑定和v-for

data() {
	return {
		authroleList:null
	}
}

 利用插值表达式渲染基本数据，利用v-for进行循环

<uni-tr v-for="authrole in authroleList">
	<uni-td align="center">{{authrole.id}}</uni-td>
	<uni-td align="center">{{authrole.name}}</uni-td>
</uni-tr>

3.4 uni.navigateTo

        保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({
	url: 'test?id=1&name=uniapp'
});

// 在test.vue页面接受参数
export default {
	onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
		console.log(option.id); //打印出上个页面传递的参数。
		console.log(option.name); //打印出上个页面传递的参数。
	}
}

3.5 uni.redirectTo

         关闭当前页面，跳转到应用内的某个页面。

uni.redirectTo({
	url: 'test?id=1'
});

3.6 uni.request

       发起网络请求。

requestUser(){
	/*uni-app的API发送http请求，默认get*/
	uni.request({
		url: 'http://localhost:8070/user/show', //仅为示例，并非真实接口地址。
		data: {
			pageIndex: this.pageIndex,
			pageSize: this.pageSize
		},
		//动态双向绑定
		success: (res) => {
			console.log(res.data);
			this.authuserList = res.data.data;
			this.pageTotal = res.data.total
		}
	});
}

3.7 uni.setStorageSync(数据缓存）

         将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

dologin(){
	uni.request({
	url: 'http://localhost:8070/user/login/'+this.FormData.phone+'/'+this.FormData.pwd+'', 
//仅为示例，并非真实接口地址。
	method: "GET",
	success: (res) => {
		console.log(res.data);
		if(res.data.code == 200){  //登录成功
		//console.log("登录成功，跳转到主页");
		//跳转之前保存用户信息
		try {
			uni.setStorageSync('user_info', res.data.data);
		} catch (e) {
			console.log(e)
		}
			uni.redirectTo({
				url: '../main/main',
			});
		}else{
		    this.open(); //登录失败
		}
	}
	});
}

3.8 uni.getStorageSync(KEY)

         从本地缓存中同步获取指定 key 对应的内容。

onShow() {
	//读取缓存中保存的用户信息
	var value = uni.getStorageSync('user_info');
	console.log(value);
}

3.9 toggleRowSelection 

          用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）

if(this.roleList[i].id == this.userRoleList[j].id){
	//让该纪录的复选框被选中
	this.$refs.roleTable.toggleRowSelection(i,true);
}

3.10 selection-change

         开启多选时，当选择项发生变化时会触发该事件

selectionChange(e) {
	console.log(e)
	this.tableCheckIndex = e.detail.index;  //将表格选中项的索引赋值给变量
}