組件的基本使用
在 pages 文件里面新建一個 firstPage 的文件夾 在該文件下建一個 first.wxml 的文件 copy過來的組件放在這里面 例如我 copy 過來一個 button 組件

<button type="default"  hover-class="other-button-hover"> default </button>
<button type="primary" bindtap="btnClick">{{ btnText }} </button>
<text> {{ text }}</text>

在 firstPage 這個文件下建一個 first.js 的文件 首先需要 Page 初始化一下 然后在
data 里面學數據

 data: {
        text: "我是曹操",
        btnText: '我是按鈕',
    },

數據的綁定
用 bindtap 把 button 綁定了一個點擊事件

<button type="primary" bindtap="btnClick">{{ btnText }} </button>

點擊的時候通過 setData 可以動態改變 first.js 下 data 里面的值

    btnClick: function () {

        this.setData({ text: '這是新的內容'})

    },

渲染標簽
渲染標簽有三種方式 wx:if / wx:else / wx:for

<!--數據綁定用插值表達式-->
<view wx:if='{{ show}}'> {{ text }} 1 </view>
<view wx:else> {{ text }} 2 </view>

first.js 里面 data 是這樣寫的

   data: {
        show : true,
    },

    btnClick: function () {

        var isShow = this.data.show;

        this.setData({  show:!isShow })

    },

<!--循環標簽的使用-->

<view wx:for="{{ news }}" wx:for-item='itemx'>

<!--可以通過wx:for-item='itemx' 修改 item 這個固定的單詞-->
 {{ index }}----{{ itemx }}

 </view>

first.js 里面 data 是這樣寫的

   data: {
        news : ['a','b','c']
    },

    btnClick: function () {

        const newsData = this.data.news;

        newsData.shift()

        this.setData({ news:newsData })

    },

模板的使用

在 Pages 下面新建一個 templates 的文件目錄 在該目錄下 新建兩個文件分別是
footer.wxml 和 header.wxml 我在 header 的文件下面寫

<text>

我是頭部組件...

</text>

我在 footer 文件里面寫

<template name='footer1'>

    我是底部內容1--{{ text }}
</template>>

<template name='footer2'>

<!--給模板動態設置數據-->


我是底部內容2 --{{ text }}

</template>

我想使用 header 文件里面的內容
使用方法如下

在 first.wxml 文件里面引入進來方可使用


<!--include 的作用相當于 copy 了一份進來 -->


<include src='../templates/header'/>

但是如果面對 footer 文件里面帶有 template 標簽的內容需要換另一種引入方式那就是 import 方法

依然是在 first.wxml 文件里面引入

<import src='../templates/footer'/>

<!--還需要設置要顯示的模板-->

<template is='footer2' data="{{ text: '我是動態添加的內容...'}}" />

data 的這種方式可以動態添加模板里面的數據 
 數據是雙向的

這是微信小程序簡易入門官方文檔
https://mp.weixin.qq.com/debug/wxadoc/dev/