view标签是我们开发过程中最常用的标签了,这个就相当于Html中的div。
text标签也是我们开发中常用的,这个相当于Html中的span
image标签相当于我们Html中的img。
官方文档
https://developers.weixin.qq.com/miniprogram/dev/component/
数据绑定
在小程序中,使用 WXML 语言所提供的数据绑定功能,来完成界面的实时更新。
data: { msg:"hello world", num: 18, },
引用数据
通过{{}}的方式可以引用数据。
<view>{{msg}},{{num + 10}}</view>
逻辑渲染
<!-- wx:if 相当于vue中的 v-if --> <view class="img1" wx:if='{{length == "first"}}'> <text>{{msg.img1}}</text> </view> <!-- wx:elif 相当于vue中的 v-else-if --> <view class="img1" wx:elif='{{length == "second"}}'> <text>{{msg.img2}}</text> </view> <!-- wx:else 相当于vue中的 v-else --> <view class="img1" wx:else> <text>{{msg.img3}}</text> </view>
因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。
<!-- 也可以在对应data定义true和false --> <block wx:if="{{true}}"> <view> view1 </view> <view> view2 </view> </block>
除此之外微信小程序还可以通过hidden属性进行条件渲染。wx:if在不满足条件的时候会删除掉对应的DOM,hidden属性则是通过display属性设置为none来进行条件渲染。
<!-- 也可以在对应data定义true和false,true为隐藏 --> <view hidden="{{true}}"> 隐藏 </view>