结构

简介 Introduction

• 小程序的页面 page 由各种 组件 - component构成
• 区分：系统组件和自定义组件
• 每个组件包括：结构文件 .wxml、逻辑文件 .js、样式文件 .wxss和配置文件 .json
• 结构文件中由标签组成；不支持 HTML 标签
• 由于小程序大小的限制，多媒体资源如图像、视频、音频等等，应通过在线方式获取；需搭建本地资源服务器或者花钱使用云开发

• 可以绑定 内容，也可以绑定 属性
• 在 .wxml 中使用插值表达式 {{}} 和 .js 中的数据绑定起来；测试数据如下
• 简单粗暴 - 想绑哪个值就绑哪个值
• WXML 中的动态数据均来自对应页面 Page 的数据 data
• 更多信息，请访问 数据绑定

绑定内容

<view> {{msg}} </view>

• 可以进行简单的逻辑运算，如三元表达式、算术运算

<view> {{age + 2}} </view>
<view> {{age>=18 ? 'Welcome' : 'Bye'}} </view>

绑定属性

• src

<image src="{{src}}" mode=""/>

• 样式 wxss

<view class="{{isActive?'bold':''}}">动态类的三元表达式</view>

<view class="title {{isActive?'bold':'normal'}}">静态类和动态类的组合形式</view>

<text style="color: {{color}};">内联样式</text>

<view class="box" style="background-image: url({{src}});">类和内联样式可以共同使用</view>

• 编译后，使用调试器的拾取工具，单击模拟器中的元素，可以查看结构对应的样式

<view class="{{'bold':isActive}}">错误！简洁起见，小程序不支持对象形式</view>

<text style="backgroundColor: {{color}};">居然不支持驼峰语法</text>

• 以绑定属性的方式使用 wx:if 判断条件是否成立，成立则渲染，否则不渲染或不处理
• 更多信息，请访问 条件渲染 wx:if
• 测试数据如下：

data: {
  age: 18,
  isShow: true
}

单分支判断

• 仅使用 wx:if

<view wx:if = '{{ age >= 18 }}'> Welcome </view>

• 单分支判断还可以使用 hidden 属性实现条件渲染；为 true 时，隐藏；为 false 时，显示

<view hidden="{{age >= 18}}">88</view>
<view hidden="{{isShow}}">88</view>

双分支判断

• 配合 wx:else 使用

<view wx:if = '{{ age >= 18 }}'> Welcome </view>
<view wx:else> Bye </view>

多分支判断

• wx:if wx:elif wx:else
• 可读性不好，不建议使用

• 以绑定属性的方式使用 wx:for 循环数组或对象
• 默认情况下，使用 item 表示迭代的当前数据项，使用 index 表示当前数据项的索引
• 多重循环下，系统可以自动识别 index 和 item 的作用域；也可以使用 wx:for-index 和 wx:for-item 指定索引和当前项，但是不建议
• 为保证渲染效率和数据的唯一性，应总是使用 wx:key
• 通常使用数据项的唯一标识 id 作为key
• 如果没有 id，可以使用 index 或 item 作为 key；或者为数据创建时间戳作为id - now()
• 更多信息，请访问 列表渲染 wx:for

数组列表渲染

• 测试数据

obj:[
  {id:0, name:'gl', year:1995},
  {id:1, name:'sh', year:2005},
  {id:2, name:'nj', year:2008}
],
arr: [1, 2, 3, 4, 5]

• 数字 - 循环9次，多用于测试

<view wx:for="{{9}}" wx:key="index"> {{item}} </view>

• 简单数组 - 循环5次

<view wx:for="{{obj}}" wx:key="id"> {{item.name}}- {{item.year}} </view>

• 对象数组 - 循环3次

<view wx:for="{{arr}}" wx:key="item"> {{item}} </view>

• 样式自定
• 为了更加直观的观察效果，配置页面 pageOrientation 为横板 landscape

<view  class="item" wx:for="{{arr}}" wx:key="index" wx:for-item='i'>
  <text wx:for="{{i+1}}" wx:key="index" wx:for-item='j'>
    <text class="item" wx:if="{{j>0}}">{{j}} * {{i}} = {{i*j}} </text>
  </text>
</view>

对象列表渲染

• index 相当于 key；item 相当于 value - 也可以自定义为 key-value 形式

obj:{id:100,name:'glpla',gender:'male'}

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