微信小程序--WXML 语法

Data: 2019-11-03 06:45:22Form: JournalClick: 7

# 微信小程序--`WXML` 语法

# 一、数据交互（初始数据）

data 是页面第一次渲染使用的初始数据。
页面加载时，data 将会以JSON字符串的形式由逻辑层传至渲染层，因此data中的数据必须是可以转成JSON的类型：字符串，数字，布尔值，对象，数组。

Page({
  data: {
    str: 'PHP中文网',
    boole : true,
    number : 2020,
    array : {
      name : '欧阳克',
      age : 18
    },
    object: [
      {
        name: '朱老师',
        age: 38
      },
      {
        name: '西门大官人',
        age: 28
      }
    ]
  }
})

通过语法可以使得 WXML 拥有动态渲染的能力，除此外还可以在内进行简单的逻辑运算

<view>字符串：{{ str }}</view>
<view>布尔值：{{ boole }}</view>
<view>数字：{{ number }}</view>
<view>运算：{{ number + 100 }}</view>
<view>数字运算：{{ 20 + 20 }}</view>
<view>字符串运算：{{ '欧阳克' + ' ' + '朱老师' }}</view>

# 二、条件逻辑

<view>姓名：{{ array.name=='欧阳克' ? '欧阳克' : '朱老师' }}</view>
<view wx:if="{{ array.age < 20 }}">青年</view>
<view wx:elif="{{ array.age < 30 }}">中年</view>
<view wx:else>老年</view>

# 三、循环

使用 wx:for-item 可以指定数组当前元素的变量名
使用 wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{ object }}">{{index}} --- 姓名：{{ item.name }} --- 年龄：{{ item.age }}</view>
<view wx:for="{{ object }}" wx:for-item="v" wx:for-index="k">{{k}} --- 姓名：{{ v.name }} --- 年龄：{{ v.age }}</view>

# 四、九九乘法表

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

# 五、案例

// pages/index/list.js
Page({
  data: {
    lists : [
      {
        title : '海尔LQ55H31 55英寸 4K曲面人工智能全面屏超高清LED液晶电视',
        image: 'http://img13.360buyimg.com/n1/s450x450_jfs/t1/7230/6/1519/219969/5bcecf16E2479d1d4/d7bfb4691e84f50c.jpg',
        old_price: '300',
        price : '100',
        sales: 10
      },
      {
        title: '海尔LQ55H31 55英寸 4K曲面人工智能全面屏超高清LED液晶电视',
        image: 'http://img13.360buyimg.com/n1/s450x450_jfs/t1/7230/6/1519/219969/5bcecf16E2479d1d4/d7bfb4691e84f50c.jpg',
        old_price: '300',
        price: '100',
        sales: 10
      },
      {
        title: '海尔LQ55H31 55英寸 4K曲面人工智能全面屏超高清LED液晶电视',
        image: 'http://img13.360buyimg.com/n1/s450x450_jfs/t1/7230/6/1519/219969/5bcecf16E2479d1d4/d7bfb4691e84f50c.jpg',
        old_price: '300',
        price: '100',
        sales: 10
      },
      {
        title: '海尔LQ55H31 55英寸 4K曲面人工智能全面屏超高清LED液晶电视',
        image: 'http://img13.360buyimg.com/n1/s450x450_jfs/t1/7230/6/1519/219969/5bcecf16E2479d1d4/d7bfb4691e84f50c.jpg',
        old_price: '300',
        price: '100',
        sales: 10
      },
      {
        title: '海尔LQ55H31 55英寸 4K曲面人工智能全面屏超高清LED液晶电视',
        image: 'http://img13.360buyimg.com/n1/s450x450_jfs/t1/7230/6/1519/219969/5bcecf16E2479d1d4/d7bfb4691e84f50c.jpg',
        old_price: '300',
        price: '100',
        sales: 10
      },
      {
        title: '海尔LQ55H31 55英寸 4K曲面人工智能全面屏超高清LED液晶电视',
        image: 'http://img13.360buyimg.com/n1/s450x450_jfs/t1/7230/6/1519/219969/5bcecf16E2479d1d4/d7bfb4691e84f50c.jpg',
        old_price: '300',
        price: '100',
        sales: 10
      },
      {
        title: '海尔LQ55H31 55英寸 4K曲面人工智能全面屏超高清LED液晶电视',
        image: 'http://img13.360buyimg.com/n1/s450x450_jfs/t1/7230/6/1519/219969/5bcecf16E2479d1d4/d7bfb4691e84f50c.jpg',
        old_price: '300',
        price: '100',
        sales: 10
      }
    ]
  }
}

<!--pages/index/list.wxml-->
<view style='background:#f3f3f3;'>
  <!-- 商品列表 -->
  <view class="fui-content">
    <view class="fui-content-inner">
      <view class="fui-goods-group block">
        <!-- 单个商品 -->
        <view class="fui-goods-item" wx:for="{{lists}}">
          <image class='image' src='{{item.image}}'></image>
          <view class="detail">
            <view class="name">{{item.title}}</view>
            <view class="old_price">￥{{item.old_price}}</view>
            <view class="price">
              <span class="text">￥{{item.price}}</span>
              <span class="buy">销量：{{item.sales}}</span>
            </view>
          </view>
        </view>
        <!-- 单个商品 -->
      </view>
    </view>
  </view>
</view>

我是 PHP 程序员

微信小程序--WXML 语法

# 微信小程序--WXML 语法

# 一、数据交互（初始数据）

# 二、条件逻辑

# 三、循环

# 四、九九乘法表

# 五、案例

# 微信小程序--`WXML` 语法