微信小程序学习（二）——wxml页面渲染与数据绑定

1.<text></text>标签

text 标签相当于以前web中的span标签，他是一个行内元素不会自动换行

<text>遇见你真好,</text>
<text>再次见到你很开心</text>

2.<view></view>标签

view标签相当于以前web中的div标签，他是一个块级元素，会自动换行

<view>我想要扣篮</view>
<view>也想像AI一样突破</view>

 

3.标签中使用javascript中的变量(包括对象)

使用变量的时候格式为 {{变量名}}

页面的js文件

逻辑数据都放在page字段的data中

Page({

  /**
   * 页面的初始数据
   */
  data: {
        msg:"你好，WX！",
        num:520,
        isGirl:false,
        person:{
          age:18,
          weight:94,
          height:161,
          name:"富婆"
        }
  }
})

 页面的wxml文件

<!--1.字符串-->
<view>{{msg}}</view>
<!--2.数字-->
<view>{{num}}</view>
<!--3.bool类型-->
<view>是否是伪娘：{{isGirl}}</view>
<!--4.对象类型
对象类型中的数据必须一个一个的调用，无法整体使用-->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>

 4.在标签的属性中使用变量

在属性中使用变量的格式为  属性名="{{变量名}}"

<!--5.在标签的属性中使用-->
<view data-num="{{num}}">自定义属性</view>

WXML的调试器 

举个具体使用的例子

checkbox是单选框，checked属性是单选框是否被选中，默认为false未被选中，此时使用right来定义属性

页面的js文件

// pages/hellow/hellow.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
        right:true
  }
})

页面的wxml文件 

<!--6.使用bool类型充当属性  checked
字符串与花括号之间一定不要存在空格 否则会导致识别失败
以下是错误示范
<checkbox checked="        {{right}}"> </checkbox>
-->
<view>
<checkbox checked="{{right}}"> </checkbox>
</view>

5. 在标签中使用运算符与表达式

格式为 {{运算表达式}} 大括号中的运算表达式可以为两个整型相加，也可以为字符相加成为一个字符串，也能写一个三元表达式。

<view>
  {{1+1}}  
</view>

<view>
    {{'5'+'2'+'0'}}
</view>

<view>
{{520%2?"love you":"not love you"}}    
</view>

6.列表循环

数组循环

格式： wx:for="{{数组}}"    wx:for-item="循环项的名称"    wx:for-index="循环项的索引"   wx:key="每一项中唯一的值"

注意：

1.当出现数组的嵌套循环的时候尤其要注意以下绑定的名称不要重名

 wx:for-item="item"     wx:for-index="index"

2.默认情况下就算不写 循环项的名称和索引，小程序会默认wx:for-item="item"  wx:for-index="index"

3.wx:key 用来提高列表渲染的性能，

      1）当wx:key绑定一个普通字符串的时候，那么这个字符串那么这个字符串名称肯定是循环数组中的对象的唯一属性

      2）当wx:key="*this" 就表示你的数组是一个普通数组，*this是一个循环项

页面的js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
        list:[
        {
          id:1,
          name:"涂博闻"
        },
        {
          id:2,
          name:"艾弗森"
        },
        {
          id:3,
          name:"贾森基德"
        }
      ]
  }
})

页面的wxml文件 

<view>
    <view wx:for="{{list}}"
                wx:for-item="item"
                wx:for-index="index"
                wx:key="id">
                索引：{{index}}
                --
                值：{{item.name}}
     </view>
</view>

 

对象循环

格式：wx:for="{{对象}}"      wx:for-item="对象的值"      wx:for-index="对象的属性"

注意：循环对象的时候 最好把 item和index的名称都修改一下

wx:for-item="value"        wx:for-index="key"

页面的js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
        person:{
          age:18,
          weight:94,
          height:161,
          name:"富婆"
        }
  }
})

页面的wxml文件 

<view>
    <view>对象循环</view>
       <view
          wx:for="{{person}}"
          wx:for-item="value"
          wx:for-index="key"
          wx:key="age">
          属性：{{key}}
          --
          值：{{value}}
      </view>
</view>

7.条件渲染

格式：  1.wx:if="{{true/false}}"      wx:elif        wx:else

             2.hidden 属性  hiddden="{{true/false}}" hidden为真则隐藏标签，为假显示标签，默认为真。

这两种属性的选择问题：

1.当标签不是频繁的切换显示  优先使用  wx:if——该语句直接把标签从页面结构给移除

2.当标签频繁的切换显示的时候  优先使用hidden——通过添加样式的方式来切换显示

注意：！！hidden属性不要和样式dispiay一起使用！！ 

<view>
    <view wx:if="{{false}}">
       你真好看
    </view>
    <view wx:elif="{{false}}">
    遇见你很高兴
    </view>
    <view wx:else>
    想再次与你相遇
    </view>
</view>

<view hidden>
不能说的秘密
</view>
<view hidden="{{false}}">
我还是告诉你吧
</view>

8.block标签

1）占位符的标签

2）写代码的时候 可以看到这标签存在

3）页面渲染会把它移除

<view>
          <block wx:for="{{list}}"
                wx:for-item="item"
                wx:for-index="index"
                wx:key="id"
                class="my_list">
                索引：{{index}}
                --
                值：{{item.name}}
            </block>
</view>