原生微信小程序语法

一.WXML语法

---

wxml语法主要包括：数据绑定 列表渲染 条件渲染 模板 引用

1.wxml概述及作用

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

2.数据绑定

---

WXML 中的动态数据均来自对应 Page 的 data。通过{{变量|js单号行表达式}}语法在对应的.wxml页面解析输出即可。

页面第一次渲染需要的业务数据，当页面加载的时候，data会以json字符串的形式将数据从逻辑层传递到视图层。

使用语法：

<!-- ============数据绑定 {{变量 | js单行表达式}}========= -->

<!-- 1.组件内容绑定 {{}} -->

<!-- <view>hello</view>

<view>{{str}}</view>

<view>{{'你好'}}</view>

<view>{{[1,2,3]}}</view>

<view>{{ {id:1,name:"李四"} }}</view> -->

<!-- 2.组件属性 id 注意引号和花括号之间不要空格-->

<!-- <view id="11">id</view>

<view id="{{id}}">id--属性变量</view> -->

<!--问题： -->

<!-- <view id="{{id}}">id--属性变量</view> -->

<!-- 3.组件属性 class -->

<!-- <view class="box">class</view>

<view class="{{className}}">class--变量写法</view> -->

<!-- 4.组件属性 style -->

<!-- <view style="margin: 40px;background: red;">style</view>

<view style="margin: {{magin}}px;background: red;">style-变量写法</view> -->

<!-- 5.组件属性 关键词 bool(true | false) 一定要嵌套在{{}} -->

<!--错误用法： <view hidden="false">hello</view> -->

<!-- <view hidden="{{false}}">hello</view>

<view hidden="{{true}}">hello</view> -->

<!-- 6.运算表达式 + - * / 三元运算 数据路径取值(array object) -->

<!-- <view>{{1+1+3}}+5</view>

<view>{{'hello'+'你好'+str}}</view>

<view>{{5>13 ? '大于' : '小于'}}</view>

<view class="{{5 >23 ? className : ''}}">三元动态class</view> -->

<!-- 注意：不支持复杂的单行表达式，js内置函数 -->

<!-- <view>{{Math.random()}}</view>

<view>{{score[1]}}</view>

<view>用户姓名是：{{user.name}}</view>

<view>编号：{{userInfo[0].id}}--用户姓名是：{{userInfo[0].name}}</view> -->

使用注意：

1.注意引号和花括号之间不要有空格

2.如果属性的值是bool类型， 注意bool类型一定嵌套在{{}}，如果值是true可以简写（只写属性名称不写值）

3.在组件上不管是属性的值还是内容只要是变量一定嵌套在{{}}

3.列表渲染wx:for

---

在组件上使用 `wx:for` 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 `index`，数组当前项的变量名默认为 `item`

使用语法：

wx:for 默认下标名:index 默认值名:item 修改下标名:wx:for-index 修改item值名：wx:for-item

<!-- 2.列表渲染（循环） 循环语法也是属性 是控制属性-->

<!-- 语法：wx:for 默认下标名:index 默认值名:item

修改下标名:wx:for-index 修改item值名：wx:for-item -->

<!-- 2.1循环数组 [] -->

<!-- <view wx:for="{{score}}" wx:key="*this"> -->

<view wx:for="{{score}}" wx:key="index">

下标是：{{index}}----值是：{{item}}

</view>

<!-- 重写默认下标名称和变量名称 wx:for-index wx:for-item 嵌套循环中需要重写-->

<view wx:for="{{score}}" wx:for-index="i" wx:for-item="m">

下标是：{{i}}----值是：{{m}}

</view>

<!-- 2.2循环对象 {} vue: (value,key,index) in user-->

<view wx:for="{{user}}">

下标是：{{index}}----值是：{{item}}

</view>

<!-- 2.3循环对象数组 [{},{}] -->

<!--错误用法： <view wx:for="{{userInfo}}" wx:key="{{item.id}}"> -->

<view wx:for="{{userInfo}}" wx:key="id">

下标是：{{index}}----值是：{{item.name}}

</view>

<!-- 2.4注意 引号和花括号之间不能有空格-->

<view wx:for="{{[1,2,3]}} ">

下标是：{{index}}--值是{{item}}

</view>

<view wx:for="{{[1,2,3]+' '}}">

下标是：{{index}}--值是{{item}}

</view>

使用注意：

1. 引号和花括号之间不能有空格

wx:key：

作用：

当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

定义key：

1.如果列表是静态的可以不用定义key。

2.字符串，代表在 for 循环的 array 中 item 的某个 property（对象数组格式），该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。(数据的id)。

3.保留关键字 `*this` 代表在 for 循环中的 item 本身（number/string类型的数组），这种表示需要 item 本身是一个唯一的字符串或者数字。

1.

<view

wx:for="{{array}}"

wx:for-index="i"

wx:for-item='m'

wx:key="*this"

>

下标是{{i}}---值是{{m}}

</view> -->

2.

<view wx:for="{{userInfo}}" wx:key="id">

下标是{{index}}---值是{{item.name}}

</view>

使用注意：

key的值不需要嵌套在{{}}，哪怕它是一个变量

4.条件渲染

---

在小程序开发过程中，我们也会经常碰见分支操作，这里我们称为条件渲染，而在小程序中实现条件渲染，我们使用wx:if

使用语法：

wx:if wx:elif wx:else

<view wx:if="{{score[0] > 90}}">优秀</view>

<view wx:elif="{{score[0] > 70}}">良好</view>

<view wx:else="">一般</view>

if VS hidden：

`wx:if` 也是**惰性的**，如果在初始渲染条件为 `false`，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，`hidden` 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，`wx:if` 有更高的切换消耗而 `hidden` 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 `hidden` 更好，如果在运行时条件不大可能改变则 `wx:if` 较好。

<view wx:if="{{true}}">if-显示</view>

<view wx:if="{{false}}">if-不显示</view>

<view hidden="{{false}}">hidden-显示</view>

<view hidden="{{true}}">hidden-不显示</view>

block使用：

block使用 不会在页面输出显示 主要放置循环（wx:for）和判断(wx:if) 多个代码段输出，hidden不能使用block

<!-- <block wx:for="{{array}}">

下标是{{index}}----值是{{item}}

</block> -->

<view class="info">

<!-- 用户已经登录展示信息 -->

<block wx:if="{{buffer}}">

<image src="../../images/0.jpg"></image>

<text>李四</text>

</block>

<!-- 用户没有登录提示登录 -->

<button wx:else>请登录</button>

</view>

5.模板

---

类似于vue.js一样，微信小程序也是存在模板语法的，WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。可以提高代码的复用率

定义模板：

<templatename='模板的名称'>

业务组件......

</template>

使用模板：

<templateis='模板的名称'/>

模板传参：

data="" <templateis='模板的名称'data="param1,"param2...." />

使用语法：

<!--代码复用 template name is data -->

<!-- 1.基本使用 -->

<!-- 1.1定义一个代码片段（小程序标签） name-->

<!-- <template name="demo1">

<view>

<text>用户姓名是:李四--年龄是:20</text>

</view>

</template> -->

<!-- 1.2使用代码片段 is -->

<!-- <template is="demo1" />

<template is="demo1" /> -->

<!-- 2.data传递 -->

<!-- 模板中没有数据 需要使用者来传递 没有样式，需要使用者设置样式-->

<!-- 2.1定义模板 -->

<!-- <template name="demo2">

<view>

<text>用户姓名是:{{name}}--年龄是:{{age}}</text>

</view>

</template> -->

<!-- 2.2使用模板 -->

<!-- <template is="demo2" data="{{name,age}}" /> -->

<!-- 3.data传递 对象格式-->

<!-- 3.1定义模板 -->

<!-- <template name="demo3">

<view>

<text>用户姓名是:{{user.name}}--年龄是:{{user.age}}</text>

</view>

</template> -->

<!-- 3.2使用模板 -->

<!-- <template is="demo3" data="{{user}}" /> -->

<!-- 4.data传递 对象格式：{} ... -->

<!-- 4.1定义模板 -->

<!-- <template name="demo4">

<view>

<text>用户姓名是:{{name}}--年龄是:{{age}}</text>

</view>

</template> -->

<!-- 4.2使用模板 -->

<!-- <template is="demo4" data="{{...user}}" /> -->

<!-- 5.data传递 格式数组对象：[{},{}...] -->

<!-- 5.1定义模板 -->

<!-- <template name="demo5">

<view>

<text>用户姓名是:{{name}}--年龄是:{{age}}</text>

</view>

</template> -->

<!-- 5.2使用模板 -->

<!-- <template

is="demo5"

wx:for="{{userInfo}}"

wx:key="id"

data="{{...item}}"

/> -->

使用注意：

1.模板本身没有数据，谁使用谁传递（data）

2.模板没有js逻辑文件和wxss样式文件,需要使用者设置样式和逻辑

6.引用

1.import

import引入目标文件中定义好的template。

<!-- 1.import 引入目标文件（.wxml文件）中的模板 -->

<!-- 1.引入模板 -->

<importsrc="../../temp/demo6.wxml"/>

<!-- 2.使用引入的模板 -->

<templateis="demo6"data="{{...user}}"/>

WXML 提供两种文件引用方式import和include。

import作用域：import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import的template。

<!-- 3.import 作用域 不能夸文件使用模板，必须是直接使用关系-->

<importsrc="../../temp/demo6.wxml"/>

<!-- Template `demo7` not found. -->

<templateis="demo7"/>

2.include

include 可以将目标文件除了 <template/> 和wxs模块外的整个代码引入，相当于是拷贝到 include 位置。

<!-- 1.引入目标文件中的代码片段 -->

<includesrc="../../temp/demo6.wxml"/>