12.22 wxml语法

1.page页面

1. 在app.json的pages中可以添加或删除页面

2. 每个页面由四个文件组件：

3. *.js ： 页面逻辑 *.json: 页面配置，可覆盖app.json中的配置 *.wxml: 页面结构 *.wxss: 页面样式

4. WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

2.WXML中常用组件

1. 视图组件：view

2. 文本组件：text

3. 按钮组件：button

4. 图片组件：image

5. Block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

6. 图标组件：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]

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

循环嵌套

<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]

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

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

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

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