微信小程序(二）

微信小程序
1）wx:for 实现循环列表
2）wx.request实现网络请求
3) 实现点击保姆项目后跳转到详情页面
4) 实现详情页面显示

wx:for实现循环列表

在页面的js中添加：
data{
//保姆数组
nannies：[{…},{…}]
}

在需要循环出现的标签上添加：
wx:for 填写的是循环的数组名
wx：for-item：自己起的变量名
在循环的标签纸可以使用{{变量名.属性}}实现数据的绑定

…
{{nanny.name}}

wx.request实现网络请求

在页面加载后请求网络：

onLoad:function(options){
	//将页面this对象赋值给变量，因为i在request方法中this对象会改变
	var _this = this;
	//请求后台Servlet
	wx.request({
		url:"http://localhost:8080/MyNanny/findAllNannies.do",
		success(res){
		console.log("后台数据");
		console.log(res.data);
		//使用从后台返回的数组替换本地数组
		_this.setData({nannies:res.data});
		}
});
},

图片：
在服务器的WebContent目录下新建images目录存放保姆图片
页面中绑定：

多表内连接查询
能查询多张表之间，有关系的数据
–内连接查询
–1、select后面可以添加两张表的列
–2、from后面使用“，”将多张表连到一起
–3、on后面写上两张表连接的关系 主表.主键= 子表.外键
select t.work_type_name , w.nanny_id from tb_work w inner jion tb_work t
on w.work_type_id = t.work_type_id where w.nanny_id = 1;

保姆工作类型查询

/**
	*工作类型
	*/
	public  class  WorkType{
			private int work_type_id;
			private String work_type_name;
			...
	}

	/*
	*保姆工作数据库实现
	*/

实现点击保姆项目后跳转到详情页面
1）点击实践如何设置
在页面js中添加
//自定义点击事件
clickNanny:function(event){
console.log(event);
},
在页面wxml中带wx:for的view上添加bindtap
bintap=“clickNanny”

2)点击后如何获得当前的保姆信息
在wx:for的view上添加data-实现数据绑定:
data-nanny="{{nanny}}"
在点击事件中使用
event.currentTarget.dataset.nanny
这里nanny和data-后的名字一致

3）如何跳转详情页面同时带上保姆数据
4）如何在详情页面接受保姆数据实现数据绑定
在点击保姆事件后添加：
//跳转到保姆详情页面
//传参时，需要将对象转换为JSON字符串：JSON.stringify

			wx.navigateTo({
						url:'../details/details?nanny='+JSON.stringify(event.currentTarget.dataset.nanny)
				});

在保姆详情页面的js的onload事件中读取参数，同时给页面的data变量赋值

			/*
			*页面的初始数据
			*/
			data:{
				//用于数据绑定的变量
				nanny:null
			}

			/*
			*生命周期函数--监听页面加载
			*/
			onLoad:function(options){
				//读取前面页面传过来的JSON参数
				console.log(options.nanny);
				//把JSON字符串转换为对象
				var nanny2 = JSON.parse(options.nanny);
				console.log(nanny2.name);
				//把对象赋值给data中的变量
				this.setData({nanny:nanny2});
			},

		页面实现数据绑定：
		{{nanny.name}}