微信小程序WXML学习

打开开发工具的编辑器，在根目录下找到 app.json 文件，双击打开，在 "pages/index/index" 上新增一行 "pages/wxml/index" 保存文件。模拟器刷新后，可以在编辑器中找到 pages/wxml/index.wxml 文件

这里我们可以观察到pages目录下有个多了个wxml文件夹

 

 

 

wxml语法与HTML 非常相似,但是不同的是，WXML 要求标签必须是严格闭合的，没有闭合将会导致编译错误。(html的</br>标签可以不闭合)

WXML中的属性是大小写敏感的

核心部分:数据绑定   

用户界面呈现会因为当前时刻数据不同而有所不同，或者是因为用户的操作发生动态改变，这就要求程序的运行过程中，要有动态的去改变渲染界面的能力。在 Web 开发中，开发者使用 JavaScript 通过Dom 接口来完成界面的实时更新( getElementById() )。在小程序中，使用 WXML 语言所提供的数据绑定功能，来完成此项功能。

WXML 通过 {{变量名}} 来绑定 WXML 文件和对应的 JavaScript 文件中的 data 对象属性

egs:

<!--
{
  time: (new Date()).toString()
}
-->
<text>当前时间：{{time}}</text>

属性值也可以动态的去改变，有所不同的是，属性值必须被包裹在双引号中，如下：

<text data-test="{{test}}"> hello world</text>

条件逻辑:

WXML 中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

时间有点紧哈,俺还是先学懂再写吧