微信小程序_簡單組件使用與數據綁定

 

簡單的數據傳值　　官方文檔：傳送門

 

 

　　點擊"按鈕"測試後，按鈕文本改變，下方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:"我被改變了"});
  }
})

text.js

 

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>

text.wxml

 

{
  "pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

app.json

 

實現過程

 

　　在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