12.22 wxml语法 - 技术栈

1.page页面

在app.json的pages中可以添加或删除页面
每个页面由四个文件组件：
*.js ：页面逻辑 *.json: 页面配置，可覆盖app.json中的配置 *.wxml: 页面结构 *.wxss: 页面样式
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

2.WXML中常用组件

视图组件：view
文本组件：text
按钮组件：button
图片组件：image
Block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
图标组件：icon

BUG：wran按钮不能显示红色背景的原因新版中的button的type为warn时，只是改变了文字颜色，没有改变button背景色 可以通过修改style:'v2'来解决

![[1280X1280 (56).PNG]]

3.数据绑定

WXML 中的动态数据均来自对应 Page 的 data。

![[1280X1280 (57).PNG]]

![[1280X1280 (58).PNG]]

![[1280X1280 (59).PNG]]

![[1280X1280 (60).PNG]]

![[1280X1280 (61).PNG]]

![[1280X1280 (62).PNG]]

![[7c241047-01fc-4ff4-974f-4ad77915c131.png]]

4.列表渲染

![[5a4085d8-98f9-4106-9bf2-8c1251c7518f.png]]

![[341f497e-6f3a-452b-bee4-47fb7aaf467a.png]]

![[977ca2f7-ecb4-426a-a304-980a7a100292.png]]

![[fdd919a9-b694-4c04-b36b-614adf47b139.png]]

Plain 复制代码

<view  wx:for="{{list}}" wx:key="id" > {{item.id}} </view>
data: {
  arr: ["a","b","c"]
}
<view  wx:for="{{arr}}" wx:key="*this" > {{item}} </view>

循环嵌套

HTML 复制代码

<view class="goodList">
    <view wx:for="{{goodList}}">
        <view class="type">{{item.type}}</view>
        <view wx:for="{{item.list}}" wx:for-item="smallItem" wx:for-index="idx">
        {{smallItem.title}} --- {{idx}}
        </view>
    </view>
</view>

5.条件渲染

![[9a47fe26-220b-4c8e-9cf6-ec8fa47cb710.png]]

![[76d3a67c-1658-40ee-b0d7-292d4b5ae027.png]]

Plain 复制代码

<view hidden="{{true}}">{{newNum}}</view>

![[b8bed575-0e81-4431-b098-9501abb21293.png]]

面试题：小程序是不是双向数据绑定？

HTML 复制代码

默认情况下，小程序不是双向数据绑定，但是想要实现双向数据绑定，可以给input的value值添加model操作
<input type="text" class="inp" model:value="{{value}}"/>