微信小程序实战 (WXML:小程序版HTML)

上一篇讲了小程序框架基础，这一篇介绍WXML:小程序版HTML。

1.标签与属性

常用基础标签text view

特征：

text 类似html span标签 行内元素，不换行；

view 类似html div标签 块级元素，换行；

新建页面

<text>text 类似html span标签 行内元素</text>

<text>，不换行</text>

<view>view 类似html div标签 块级元素</view>

<view>view 类似html div标签 换行</view>
复制代码

测试

公共属性

所有组件都有以下属性：

2.数据绑定

数据绑定功能使得程序在运行过程中,具备动态改变渲染界面的能力,从而达到了更好的用户体验效果。在

WEB开发中,需要借助JavaScript并通过DOM接口来实现界面的动态更新,而在小程序中,则是使用WXML

语言提供的数据绑定功能来实现的。
复制代码

2.1简单数据绑定

  data: {
    id:1, message: 'Hello MINA!', 
    number:1234, 
    condition:true, 
    isChecked:true, 
    person:{ name:"张三", age:25, sex:"男" }
  },
复制代码

<view>{
  {message}}</view> 
<view>{
  {number}}</view> 
<view>{
  {condition}}</view> 
<view>{
  {isChecked}}</view> 
<view>{
  {person}}</view> 
<view>{
  {person.name}}</view> 
<view>{
  {person.age}}</view> 
<view>{
  {person.sex}}</view> <!-- 自定义属性 data-* --> 
<view data-number="{
  {number}}">自定义属性</view> <!-- 组件属性(需要在双引号之内) --> 
<view id="item-{
  {id}}">组件属性</view> <!-- 控制属性(需要在双引号之内) --> 
<view wx:if="{
  {condition}}">控制属性</view> <!-- 使用布尔类型充当属性 --> 
<checkbox checked="{
  {isChecked}}"></checkbox>
复制代码

测试：

2.2运算

可以在 { {}} 内进行简单的运算，支持的有如下几种方式

2.2.1 三元运算

如果flag条件是true 则hidden =true 如果flag条件是false 则hidden =false

<view hidden="{
  {flag?true:false}}">三元运算</view>
复制代码