微信小程序中的WXML模板
解释:WXML的作用类似有HTML网页,用来定义页面中有哪些内容。你也可以把WXML当作HTML来操作,WXML里有标签如view,button,text等标签,这些标签给开发者包装好的基本能力,还提供了地图、视频、音频等等组件。
首先打开pages/index/index.wxml,就可以看到如下内容:
<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>
在WXML里呢,多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式,小程序采用了MVVM 的开发模式(例如 React, Vue),提倡把渲染和逻辑分离。
简单来说就是不要再让 JS 直接操控 DOM,JS只需要管理状态即可,然后再通过一种模板语法来描述状态和界面结构的关系即可。
举例来说:
一个WXML里有如下代码:
<text>{{msg}}</text>
JS 只需要管理状态即可:
this.setData({ msg: "Hello World" })
通过 {{ }} 的语法把一个变量绑定到界面上,我们称为数据绑定.
当然,仅仅通过数据绑定还不够完整的描述状态和界面的关系,还需要 if/else, for等控制能力,在小程序里边,这些控制能力都用 wx: 开头的属性来表达。
WXML还具有以下的能力:列表渲染,条件渲染,模板,事件,引用等。