微信小程序的模板语法，如何编写一个微信查询页面

Posted 2020-12-13 三线码工

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

<!--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 () {

  }
})