微信小程序开发日记 (2) 基本模板语法

常见标签

1.text标签

text标签相当于html中的span标签，行内元素，不会换行,只能嵌套text标签
拥有属性:
selectable可以复制
decode可以编码,包含有&nbsp

<text>pages/demo01/demo01.wxml</text>

2.view标签

view标签相当于html中的div标签，块级元素，会换行

3.checkbox标签

<view>
   <checkbox checked="{{false}}"></checkbox>
</view>

注意，由于引用变量的特性，所以不能存在额外的空格。

4.blocks标签

5.input标签

需要给input绑定标签，有关键字bindinput来决定，具体的方法在data中定义

6.button标签

7image图片标签

数据绑定

初始json内对象与方法均未初始化，如下：

// pages/demo01/demo01.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

变量显示方法

首先在data内绑定变量名和变量

data: 
  {
    msg:"helloworld!"
  },

接着显示该变量，在wxml内使用text标签显示，注意用的是双重花括号

<text>{{msg}}</text>

通过以上可以知道，在容器中显示变量是用双重花括号的
其他类型的变量均可以通过以上方法进行定义和显示，那么这里特别介绍一下object类型的定义与显示
一个object的定义如下

    person:
    {
      height:180,
      age:24,
      score:580,
      name:"张三"
    }

访问方法如下
结构体的访问方式即可

<view>{{person.height}}</view>

在标签的属性中使用

定义的方法如下：

<view data-num="{{num}}" >自定义标签</view>

此num就可以直接从已经绑定的data内读取到

数据运算

基本的运算符

数组与循环

创建方法

list:[{id=0,name="张三"},{id=1,name="王五"}]

遍历方法

wx:for="{{数组或者是循环对象的名称}}"
wx:for-item=“item”，表示取到的数组单项数据
wx:for-index=“index” 表示数组的索引

<view>
  <view wx:for="{{list}}" wx:for-item="item" wx:for-index="index" >
    数组下标:{{index}},
    对应的值:{{item.name}};
  </view>
</view>

提供key属性用来提高列表渲染的性能

wx:key=唯一的值 这与之前的PHP学习的主键类似,那么一般来说最好提供一个主键，不提供主键有时候在代码编写中将会产生一些问题

wx:key="id"

或者也有wx:key=*this 表示该数组的循环项 其下标是自动生成的1 2 3

关于循环嵌套的说明

具体要说明的是定义的item和index的名字，像for那样改就可以了

关于循环完整访问一个对象的说明

可以直接通过for循环直接访问一个对象，用那三个语句即可，但是最好改一下变量的含义，否则会产生误会。

条件渲染

wx:if类语句

也就是wx:if语句，使用方法wx:if"{{true/false}}"，当true的时候就显示，当false的时候就不显示
wx:elif"{{true/false}}"

hidden属性

在标签上直接加入hidden属性
注意：hidden和display类的属性不能混用,比如style=“flex”

<view hidden> hidden</view>

同样的可以通过true和false来进行hideen的显示控制