簡單的數據傳值 官方文檔：傳送門
點擊"按鈕"測試后，按鈕文本改變，下方text文本改變，通過console.log()在輸出台中打印按鈕文本信息
程序結構
Page({
//頁面的初始數據
data: {
text:"Gary_測試ing",
btntext:"按鈕_測試"
},
//生命周期函數--監聽頁面加載
onLoad: function (options) {
},
//生命周期函數--監聽頁面初次渲染完成
onReady: function () {
},
//生命周期函數--監聽頁面顯示
onShow: function () {
},
//生命周期函數--監聽頁面隱藏
onHide: function () {
},
//生命周期函數--監聽頁面卸載
onUnload: function () {
},
//頁面相關事件處理函數--監聽用戶下拉動作
onPullDownRefresh: function () {
},
//頁面上拉觸底事件的處理函數
onReachBottom: function () {
},
//用戶點擊右上角分享
onShareAppMessage: function () {
},
btnclick:function(){
console.log("btnclick");
this.setData({text:"按鈕已被點擊",btntext:"我被改變了"});
}
})
Gary <text>微信小程序</text> <button type="default" > default </button> <button type="primary" > primary </button> <button type="warn"> warn </button> <button type="primary" bindtap="btnclick"> {{btntext}}</button> <text>{{text}}</text>
{
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
實現過程
在app.json中注冊test表單信息
在text.wxml中布局控件
在text.js中創建頁面函數，創建自定義btnclick()函數,通過bindtap="btnclick"將按鈕 與函數綁定
btnclick:function(){
console.log("btnclick");
this.setData({text:"按鈕已被點擊",btntext:"我被改變了"});
}
button控件type(類型): default（違約） primary（初級的） warn（警告）
條件渲染 官方文檔：傳送門
使用
wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊，也可以用 wx:elif 和 wx:else 來添加一個 else 塊
點擊按鈕，改變condition值，通過condition值來控制要打印出的文本，輸出台中打印condition數值信息
當未點擊按鈕時，文本顯示condition初值（條件1_false和條件2_true為固定文字），條件1_false中的condition為false不顯示在頁面上，條件2_true中的condition為true顯示在頁面上
實現過程
初始化condition的值為false
data: {
text:"Gary_測試ing",
btntext:"按鈕_測試",
condition:false
},
點擊按鈕改變condition的值並顯示到控制台上
btnclick:function(){
var condition = this.data.condition;
console.log(condition);
this.setData({condition:!condition});
}
使用 wx:for-item 可以指定數組當前元素的變量名
使用 wx:for-index 可以指定數組當前下標的變量名
默認數組的當前項的下標變量名默認為
index，數組當前項的變量名默認為 item
