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({

 /**
  * 頁(yè)面的初始數(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條件來(lái)控制組件的顯示與否，判斷邏輯可以從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、模板的使用

<!-- 模板使用 -->
<!--
    使用情況：剝離頁(yè)面公共部分，如公共頭部和公共底部
    使用方法：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">
這是底部?jī)?nèi)容1
</template>
<template name="footer2">
這是底部?jī)?nèi)容2 - {{text}}
</template>