WXML
WXML 模板
在小程序中 WXML
充当类似 HTML
的角色,其内容如下:
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
和 HTML
非常相似。但也有很多不同之处:
- 标签名字不一样
- 小程序把很多常用组件包装了起来,大大提高了开发效率。更多详细的组件讲述参考 小程序的能力
- 多了一些
wx:if
这样的属性以及{{ }}
这样的表达式 - 在网页的一般开发流程中,我们通常会通过
JS
操作DOM
,以引起界面的变化响应用户的行为。但当项目越来越大时,你的代码会充斥着非常多的界面交互逻辑和程序的各种状态变量,显然这不是一个很好的开发模式,因此就有了 MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。简单来说就是不要再让JS
直接操控DOM
,JS
只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。 - 小程序的框架也是用到了这个思路,如果你需要把一个
Hello World
的字符串显示在界面上。 - WXML 是这么写 :
<text>{{msg}}</text>
- JS 只需要管理状态即可:
this.setData({ msg: "Hello World" })
- 通过
{{ }}
的语法把一个变量绑定到界面上,我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要if
/else
,for
等控制能力,在小程序里边,这些控制能力都用wx:
开头的属性来表达。 - 更详细的文档可以参考 WXML