Chapter02 wxml页面

1. 数据绑定

//在pages/index1/index1.js文件中：
Page({
​
  /**
   * 页面的初始数据
   */
  data: {
    msg: "hello", // 定义了一个叫msg的变量，冒号后要有一个空格
    mun: 99,
    isboy: false,
    person:{
      name:"小明",
      bumen:"搬砖部"
    },
    title:"你想吃啥？"
  },

//在pages/index1/index1.js文件中：
<!-- pages/index1/index1.wxml -->
<view>
    你是来自哪里的干饭人？
​
    //调用.js文件中的data数据
    <view>msg:{{msg}}</view>
    <view>mun:{{mun}}</view>
    <view>isboy:{{isboy}}</view>
    <view>person.name:{{person.name}}</view>
    <view>person.bumen:{{person.bumen}}</view>
​
    //组件属性
    <view data-id="{{title}}">title</view>
​
    //选中框的布尔属性要加大括号
    <view>
        <checkbox checked="{{false}}"></checkbox>
    </view>
</view>

2. 运算

   * 在.js文件中添加页面的初始数据，在.wxml文件中运算。
  data: {
    num1:200,
    num2:2,
    String1:"你好",
    string2:"大白痴"
  },

2.1 三元运算

    //选中框的布尔属性要加大括号
    <view>
        <checkbox checked="{{ischecked?true:false}}"></checkbox>
    </view>

2.2 算数运算

    <view>
         //加减运算
        {{1000+10}}||        
        {{num1+num2}}        
    </view>

2.3 字符串运算

        //字符串连接
        {{String1+string2}}

2.4 逻辑运算

        //逻辑运算
        <checkbox checked="{{num1>100}}">            
        </checkbox>

3. 列表渲染（for循环）

3.1 wx:for

循环的变量名默认为iterm，默认的下标名为index。

wx:for-index=”key” 可修改下标的名称；

wx:for-item=”xuanxiang” 可修改变量的名称。

// pages/index1/index1.js
Page({
  //页面的初始数据
  data: {
   person:{
      name:"小明",
      bumen:"搬砖部"
    },
   arr1:["社畜人生","傻逼日常","无情干饭"] //这是定义一个数组
  },
​
// pages/index1/index1.wxml
    <view wx:for="{{arr1}}" wx:key="{{index}}">
        {{index}}:{{item}}            
    </view>
    
    <view wx:for="{{person}}" wx:key="{{index}}"> wx:for-index="key"
        {{key}}:{{item}}
    </view>  

3.2 渲染结构快blok

    <block wx:for="{{arr1}}" wx:key="{{index}}">
        {{index}}:{{item}}
    </block>

补充：

页面组件及功能