微信公众号开发

微信小程序语法WXML

本文主要是介绍微信小程序语法WXML,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

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>
这篇关于微信小程序语法WXML的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!