1裳仆、組件的基本使用
組件一覽：https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html
2腌闯、數(shù)據(jù)綁定
2.1綁定數(shù)據(jù)
例：<text>{{text}}</text>
在Page的data中定義
如:
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
text : "這里是內(nèi)容",
btnText : "這里是按鈕文字"
},
2.2數(shù)據(jù)動(dòng)態(tài)變化
<text>{{text}}</text>
<button type="primary" size="{{primarySize}}" bindtap="btnClick"> primary </button>
btnClick: function(){
console.log("按鈕被點(diǎn)擊了");
this.setData({text:"這是一個(gè)新的內(nèi)容"});
}
3、渲染標(biāo)簽
if...else 和 for渲染
在視圖層中用if...else條件來控制組件的顯示與否啥繁，判斷邏輯可以從data中拿唱蒸；
可以在組件中循環(huán)輸出data中的數(shù)據(jù)敷矫，如：
<!-- 條件判斷標(biāo)簽-->
<view wx:if="{{show}}">{{text}}1</view>
<view wx:else>{{text}}2</view>
<button type="primary" size="{{primarySize}}" bindtap="btnClick"> primary </button>
<!-- 循環(huán)標(biāo)簽-->
<view wx:for="{{news}}" wx:for-item="itemx" wx:for-index="indexs">
{{indexs+1}}.{{itemx}}
</view>
<button type="primary" size="{{primarySize}}" bindtap="changeNews">更改新聞數(shù)據(jù)</button>
data: {
text : "這里是內(nèi)容",
btnText : "這里是按鈕文字",
show: true,
news: ['aaa', 'bbb', 'ccc','ddd','eeee']
},
btnClick: function(){
console.log("按鈕被點(diǎn)擊了");
var isShow = this.data.show;
this.setData({text:"這是一個(gè)新的內(nèi)容",show:!isShow});
},
changeNews: function(){;
var data = this.data.news;
data.shift();
this.setData({ news: data.reverse()});
}
4呈野、模板的使用
<!-- 模板使用 -->
<!--
使用情況：剝離頁面公共部分低矮，如公共頭部和公共底部
使用方法：include
-->
<include src="../templates/header" />
// 對(duì)應(yīng)的模板內(nèi)容
<text>
這里是頭部控件的組件...
</text>
<import src="../templates/footer" />
<template is="footer2" data="{{text:'導(dǎo)入設(shè)置的內(nèi)容'}}"/>
//對(duì)應(yīng)的模板內(nèi)容
<template name="footer1">
這是底部內(nèi)容1
</template>
<template name="footer2">
這是底部內(nèi)容2 - {{text}}
</template>
