今天練習的兩個頁面有相同的模塊,決定用模板來實現代碼的復用。
先來看兩個頁面,首頁和瀏覽記錄頁列表項格式完全相同,所以,抽取這個列表項作為模板,網上也有同學抽取整個列表作為模板,做法差不多,我沒有試,還是習慣抽取一個小模塊,這樣靈活度更高一些。
抽取模板
模板介紹
WXML提供模板(template),可以在模板中定義代碼片段,然后在不同的地方調用。
定義模板
使用 name 屬性,作為模板的名字。然后在<template/>內定義代碼片段,如:
<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
使用模板
使用 is 屬性,聲明需要的使用的模板,然后將模板所需要的 data 傳入,如:
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
模板教程見《微信官方學習文檔-模板》。
模板實現步驟
- 創建一個模板文件夾template,在文件夾下創建模板文件houseItem.wxml。
houseItem.wxml代碼:
<template name="houseItem">
<view class='houseItem-bg' style='display: flex;flex-direction: column; align-items: center; margin:10px;padding:5px;border-radius: 5px;background-color: white;'>
<view class='houseItem-img'>
<image src='../../images/home/home_1.png' mode="aspectFill"></image>
</view>
<view class='houseItem-text'>
<view class='houseItem-text-l' style='border-right: 1px solid #D9D9D9;padding-right:10px'>
<text>海淀中關村17號 15棟4單元高層</text>
<view>
<text style='border: 1px solid #1AAD00;padding:2px 10px;color:#1AAD00;font-size:14px'>整租</text>
<text style='border: 1px solid #FF7033;padding:2px 10px;color:#FF7033;font-size:14px;margin-left:15px;'>三室一廳</text>
</view>
</view>
<view class='houseItem-text-r'>
<text style='color:red;font-size:20px'>¥13500</text>
</view>
</view>
</view>
</template>
- 關于模板樣式,我寫的比較亂有一部分直接寫在模板文件里,另一部分寫在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;
}
- 引用模板
在需要使用模板的開頭先引用模板文件
<!-- 聲明需要使用的模板文件 -->
<import src ="../../template/houseItem.wxml"/>
在響應的位置使用模板創建列表項:
<view>
<template is="houseItem"/>
</view>
此時的頁面效果
首頁使用模板
模板數據綁定和列表實現
上面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代碼
<template name="houseItem">
<navigator url='../logs/logs?id={{id}}' class='houseItem-bg' style='display: flex;flex-direction: column; align-items: center; margin:10px;padding:5px;border-radius: 5px;background-color: white;'>
<view class='houseItem-img'>
<image src='{{image}}' mode="aspectFill"></image>
</view>
<view class='houseItem-text'>
<view class='houseItem-text-l' style='border-right: 1px solid #D9D9D9;padding-right:10px'>
<text>{{title}}</text>
<view>
<text style='border: 1px solid #1AAD00;padding:2px 10px;color:#1AAD00;font-size:14px'>{{leaseType}}</text>
<text style='border: 1px solid #FF7033;padding:2px 10px;color:#FF7033;font-size:14px;margin-left:15px;'>{{houseType}}</text>
</view>
</view>
<view class='houseItem-text-r'>
<text style='color:red;font-size:20px'>¥{{price}}</text>
</view>
</view>
</navigator>
</template>
- 模板調用修改使用for循環遍歷列表數據,進行模板數據綁定。
<view>
<block wx:for="{{houseList}}">
<template is="houseItem" data="{{...item}}"></template>
</block>
</view>
- 實現效果展示
最終效果.png
頁面傳值
- 上面例子中將id值傳給了下個頁面logs。通過直接在url后面拼接參數是最簡單的直接傳值方式。
<navigator url='../logs/logs?id={{id}}'/>
- 在下一個頁面logs.js的
onLoad
方法中接收id值。
logs.js代碼:
onLoad: function (options) {
this.setData({
id:options.id,
})
})
- 在logs.wxml添加元素,展示傳過來的值。
<text>上個頁面傳過來的id:{{id}}</text>
-
編譯一下,點擊列表項跳轉:
image.png
后記
模板、列表、傳值等的使用都非常簡單,開發起來也方便快捷,我在開發過程中浪費時間最多的還是頁面樣式。
例子中用到的樣式邊框,居中,各種排列讓我真的讓我費勁了心思。到最后發現和UI還有一些出入,比如列表項圖片背景和文字背景是不同的,但是發現的時候已經晚了,懶得再改了,幸好是聯系不是實際開發,還是要繼續熟練各種樣式~