微信小程式開發元件

我們在first.wxml中可以寫first這個頁面的佈局，例如圖1中我們寫了一個字串：“1234567890abcdefg”，在這個字元下面我們寫了一個微信小程式的button，button顯示的內容為“default”，type=“default”---這個是表示該button為預設的顯示效果，如圖1左邊模擬器中顯示為圓角淡灰色按鈕左右兩邊無邊距。

註：很多網友會發現：在微信小程式開發工具中寫完程式碼然後，點擊微信小程式開發工具左側下方的「編譯」按鈕後，模擬器中並沒有反應，其實這是因為，你寫完程式碼應該要敲擊鍵盤的Ctrl+s，儲存程式碼，然後再點擊“編譯”，這樣才能在模擬器中顯示出對應程式碼的效果。

1：按鈕顯示內容和點擊事件的綁定：

      我們在下面實現一個功能：點選按鈕後，按鈕的內容會更換新的內容

1）在first.wxml中加入如下程式碼：其中bindtap="btnClick"為按鈕的點擊時間綁定的方法：btnClick()，{{btnText}}為按鈕顯示的內容綁定的變數：btnText

{{btnText}} 

2）方法：btnClick()和變數：btnText都要在first.js中實現，如圖2所示

3）按鈕點選前與點選後，模擬器顯示效果如圖3所示：

##5：text元件使用初步：

      我們在下面實作一個功能：點選按鈕後，把text元件的初始內容進行修改，然後再點選按鈕，text元件內容消失，然後再點選按鈕，text元件內容出現。 。 。 。 。 。以此類推。

1）在first.wxml中加入如下程式碼：

<text wx:if="{{isTextShow}}">{{text}}</text>

在first.js中加入如圖4程式碼

##6 ：內容清單

在first.wxml中加入以下程式碼：

<view wx:for="{{news}}" wx:for-item="newsItem">
{{index}}: {{newsItem}}
</view>

在first.js

data:{ }

中加入以下程式碼：

news:['第1行資訊','第2行資訊','第3行資訊']

結果如圖5所示：

7：頁面加入頭部和腳部

新資料夾templates，並在資料夾下新檔案：footer.wxml和header.wxml

在檔案中增加如圖6所示程式碼

##模擬器顯示結果如圖7

更多微信小程式開發元件相關文章請關注PHP中文網！