微信小程序的模板語法

微信小程序的基本模板語法

<!--pages/dome/dome.wxml-->
<!-- 
  view==div  text==span 
 -->
 <block>block占位符，渲染時會不見標簽，內容還是可見的</block>
<text>我是一個行內元素</text>
<view>我是一個塊元素</view>
<view>
  <text>{{msg}} {{num}} {{istrue}}</text>
</view>
<view>
  <text>姓名：{{Dog.name}} 性別： {{Dog.sex}} {{Dog.old}}歲</text>
</view>
<view>
  <text data-msg="{{msg}}">也可以在標簽中使用</text>
</view>
<view>
<text>也可以在表單中使用</text>
 <checkbox checked="{{istrue}}"></checkbox>
</view>
<!-- 運算表達式 -->
<view>
  <text>{{1+2}} </text>
  <text>{{1+"2"}} </text>
  <text>{{"1"+"2"}} </text>
  <text>{{num}}是{{num%2==0? "偶數":"奇數"}}</text>
</view>
<view>
<!-- 
  如果是普通數組如["a"，"b","v"]  可以寫wx:key="*this"
  添加wx:key為唯一值為了保證每一項是唯一值，提高渲染效率，不容易出錯 
  wx:for="{{list}}"   渲染的數組或對象
  wx:for-item="item"  循環項的名稱
  wx:for-index="index"循環項的索引
  可以不加，微信小程序默認加了內容。改變量的值可以加
  -->
  <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" wx:key="id">
    id:{{index}} --> 書名：{{item.book}} 價格：{{item.price}}
  </view>
</view>
<view>
<!-- 遍歷對象 循環項的名稱相當於值 循環項的索引相當於鍵  -->
  <view wx:for="{{Dog}}" wx:for-item="value" wx:for-index="key" wx:key="key">
    對象名:{{key}} --> 對象值：{{value}}
  </view>
</view>
<!-- if條件  heid -->
<view>
  <text wx:if="{{num<18}}">未成年人</text>
  <text wx:elif="{{num<50}}">成年人</text>
  <text wx:else>老年人</text>

<text hidden="{{istrue}}">我是被display:none了</text>
<text hidden="{{flase}}">我沒有被display:none了</text>

</view>

// pages/dome/dome.js
Page({

  /**
   * 頁面的初始數據
   */
  data: {
      msg:"hello world",
      num:30,
      istrue:true,
      Dog:{
        name:"旺旺",
        old:5,
        sex:"公"
      },
      list:[
        {
          id:0,
          book:"鋼鐵是怎樣煉成的",
          price:52
        },
        {
          id:1,
          book:"紅樓夢",
          price:32
        },
        {
          id:2,
          book:"悲慘世界",
          price:62
        }

      ]

  },

  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})