今天练习的两个页面有相同的模块,决定用模板来实现代码的复用。
先来看两个页面,首页和浏览记录页列表项格式完全相同,所以,抽取这个列表项作为模板,网上也有同学抽取整个列表作为模板,做法差不多,我没有试,还是习惯抽取一个小模块,这样灵活度更高一些。
模板介绍
WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
定义模板
使用 name 属性,作为模板的名字。然后在内定义代码片段,如:
{{index}}: {{msg}}
Time: {{time}}
使用模板
使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
模板教程见《微信官方学习文档-模板》。
模板实现步骤
- 创建一个模板文件夹template,在文件夹下创建模板文件houseItem.wxml。
houseItem.wxml代码:
海淀中关村17号 15栋4单元高层
整租
三室一厅
¥13500
- 关于模板样式,我写的比较乱有一部分直接写在模板文件里,另一部分写在app.wxss中了。
还可以单独写一个wxss文件来写样式,但是注意,一定要在模板使用界面引用wxss样式文件。
app.wxss模板样式代码:
/*houseItem 模板样式*/
.houseItem-img {
width: 100%;
}
.houseItem-img image {
width: 100%;
}
.houseItem-text {
display: flex;
flex-direction: row;
width: 100%;
margin: 10px;
background-color: white;
}
.houseItem-text-l {
width: 68%;
}
.houseItem-text-r {
margin: auto;
}
- 引用模板
在需要使用模板的开头先引用模板文件
在响应的位置使用模板创建列表项:
此时的页面效果
模板数据绑定和列表实现
上面3步实现模板的使用,现在的数据是在模板中写死的,而且列表中只有一条列表项。所谓模板,数据肯定是灵活的,下一步修改一下创建的模板来实现一个列表并绑定数据。
- 在页面js中造一个列表的假数据:
houseList:[
{
id:'1001',
title:'海淀区学院南路68号',
leaseType:'整租',
houseType:'三室一厅',
price:'9800',
image:'../../images/home/home_1.png'
},
{
id: '1002',
title: '海淀区中关村南大街17号',
leaseType: '整租',
houseType: '一室一厅',
price: '5500',
image: '../../images/home/home_2.png'
},
{
id: '1003',
title: '丰台区马家堡街道嘉园二里',
leaseType: '合租',
houseType: '三室一厅',
price: '2900',
image: '../../images/home/home_1.png'
},
- 修改houseItem.wxml文件,将页面写死的数据替换成活的,由于需要点击跳转,页面元素也修改了一下,外层view改为navigator.
修改后的houseItem.wxml代码
{{title}}
{{leaseType}}
{{houseType}}
¥{{price}}
- 模板调用修改使用for循环遍历列表数据,进行模板数据绑定。
- 实现效果展示
页面传值
- 上面例子中将id值传给了下个页面logs。通过直接在url后面拼接参数是最简单的直接传值方式。
- 在下一个页面logs.js的
onLoad
方法中接收id值。
logs.js代码:
onLoad: function (options) {
this.setData({
id:options.id,
})
})
- 在logs.wxml添加元素,展示传过来的值。
上个页面传过来的id:{{id}}
-
编译一下,点击列表项跳转:
后记
模板、列表、传值等的使用都非常简单,开发起来也方便快捷,我在开发过程中浪费时间最多的还是页面样式。
例子中用到的样式边框,居中,各种排列让我真的让我费劲了心思。到最后发现和UI还有一些出入,比如列表项图片背景和文字背景是不同的,但是发现的时候已经晚了,懒得再改了,幸好是联系不是实际开发,还是要继续熟练各种样式~