微信小程序开发基础第二节

微信小程序开发基础第二节

WXML语法参考，语法均在代码里，代码如下：

<!--pages/demo03/demo03.wxml
   1.text 相当于以前web中的 span 标签，行内元素，不会换行
   2.view 相当于以前web中的 div 标签，块级元素，会换行
   3.checkbox以前的复选框标签
-->
<!-- <text>1</text>
<text>2</text>  
<view>1</view>
<view>2</view> -->
 <!-- 1 字符串 -->
<view>{{msg}}</view>
 <!-- 2 数字类型 -->
<view>{{num}}</view>
 <!--3 bool类型  -->
<view>是否是男神：{{isGirl}}</view>
<!-- 4 object类型 -->
<view>{{person.age}}</view>
<view>{{person.height}}</view>
<view>{{person.weight}}</view>
<view>{{person.name}}</view>

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

<!--6 使用bool类型充当属性  checked
    (1)字符串和花括号之间不要存在空格，否则会导致识别失败
      以下就是错误的示范：
      <checkbox checked="       {{isChecked}}"> </checkbox>
-->
<view>
<checkbox checked="{{isChecked}}"> </checkbox>
</view>

<!-- 7 运算 ——>也可以称为表达式
       （1）可以在花括号中 加入  表达式，加语句时会报错
       （2）表达式和语句的区别
       表达式：指的是一些简单运算，如数字运算、字符串、拼接、逻辑运算......
       语句：复杂的代码段：if else、switch、do while、for......

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

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

 <view>{{ 10%2==0 ? '偶数' : '奇数'}}</view>

<!--  8 列表循环
     （1）wx：for="{{数组或对象}}"  wx:for-item="循环项的名称"  wx:for-index="循环项的索引"
      (2)wx.key="唯一的值" 用来提高列表渲染的性能
        1) wx.key 绑定一个普通字符串的时候，那么这个字符串名称肯定是 循环数组中 的对象的唯一属性
        2)wx.key = "*this" 表示你的数组是一个普通的数组，*this 表示为循环项
         [1,2,3,4,5]
         ["1","2","3","adfdf"]
      (3)当出现数组的嵌套循环的时候，尤其要注意以下绑定的名称不要重名
      wx:for-item="item"
      wx:for-index="index"
      (4)默认情况下，我么们不写wx:for-item="item" wx:for-index="index"
      小程序也会把 循环项的名称和索引的名称分别自动写为 item 和 index
      只有一层循环的话，(wx:for-item="item"  wx:for-index="index")可以省略
      9 对象循环
    （1）wx：for="{{数组或对象}}"  wx:for-item="对象的值"  wx:for-index="对象的属性"
    （2）循环对象的时候，最好把item和index的名称都修改一下
         wx:for-item="value"  wx:for-index="key"
      -->
<view>
  <view 
  wx:for="{{list}}"
  wx:for-item="item" 
  wx:for-index="index"
  wx:key="id"
  >
   索引：{{index}}
   --
   值：{{item.name}}
 </view>
</view>

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

<!-- 10 block类似于占位符的标签，写代码的时候，可以看到此标签存在。
但是在页面渲染的时候，小程序会把它移除掉 -->
<view>
  <view 
  wx:for="{{list}}"
  wx:for-item="item" 
  wx:for-index="index"
  wx:key="id"
  >
   索引：{{index}}
   --
   值：{{item.name}}
 </view>
</view>