微信小程序(二)

微信小程序
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}}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值