微信小程序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>

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