微信小程式開發詳解（四）---微信小程式開發元件使用初步
1：建立一個微信小程式的工程
2：請參考如下連結裡面的內容，這是微信小程式的官方開發指南：
https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html?t=20161222
3：可以拷貝部分例子程式到你建立的工程中，使用微信小程式的元件，如圖1所示：
我們在first.wxml中可以寫first這個頁面的佈局，例如圖1中我們寫了一個字串：“1234567890abcdefg”，在這個字元下面我們寫了一個微信小程式的button，button顯示的內容為“default”，type=“default”---這個是表示該button為預設的顯示效果，如圖1左邊模擬器中顯示為圓角淡灰色按鈕左右兩邊無邊距。
注：很多網友會發現：在微信小程式開發工具中編寫完程式碼然後，點選微信小程式開發工具左側下方的“編譯”按鈕後，模擬器中並沒有反應，其實這是因為，你編寫完程式碼應該敲擊鍵盤的Ctrl+s，儲存程式碼，然後再點選“編譯”，這樣才能在模擬器中顯示出對應程式碼的效果。
圖1
4：按鈕顯示內容和點選事件的繫結：
我們下面實現一個功能：點選按鈕後，按鈕的內容更換新的內容
1）在first.wxml中加入如下程式碼：其中bindtap="btnClick"為按鈕的點選時間繫結的方法：btnClick()，{{btnText}}為按鈕顯示的內容繫結的變數：btnText
<button type="primary" bindtap="btnClick"> {{btnText}} </button>
2）方法：btnClick()和變數：btnText都要在first.js中實現，如圖2所示
圖2
3）按鈕點選前和點選後，模擬器顯示效果如圖3所示：
圖3
5：text元件使用初步：
我們下面實現一個功能：點選按鈕後，把text元件的初始內容進行修改，然後再點選按鈕，text元件內容消失，然後再點選按鈕，text元件內容出現。。。。。。以此類推。
1）在first.wxml中加入如下程式碼：
<text wx:if="{{isTextShow}}">{{text}}</text>
圖4
6：內容列表
在first.wxml中加入如下程式碼：
<view wx:for="{{news}}" wx:for-item="newsItem">
{{index}}: {{newsItem}}
</view>
data:{ }
中加入如下程式碼：
news:['第1行資訊','第2行資訊','第3行資訊']
結果如圖5所示：
圖5
7：頁面加入頭部和腳部
新建資料夾templates，並在資料夾下新建檔案：footer.wxml和header.wxml
在檔案中增加如圖6所示程式碼
圖6
模擬器顯示結果如圖7
圖7