项目里边生成了不同类型的文件:

  1. .json 后缀的 JSON 配置文件
  2. .wxml 后缀的 WXML 模板文件
  3. .wxss 后缀的 WXSS 样式文件
  4. .js 后缀的 JS 脚本逻辑文件

WXML 模板

WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件事件系统,可以构建出页面的结构。


数据绑定

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

数据绑定使用 Mustache 语法(双大括号)将变量包起来,以下适用

内容绑定

<!--wxml-->
<view>{{message}}</view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})

组件属性绑定(需要在双引号之内)

<view id="item-{{id}}"></view>
Page({
data: {
id: 0
}
})

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"></view>
Page({
data: {
condition: true
}
})

关键字(需要在双引号之内)

true:boolean 类型的 true,代表真值。

false: boolean 类型的 false,代表假值。

<checkbox checked="{{false}}"></checkbox>

运算

可以在 {{}} 内进行简单的运算,支持的有如下几种方式

三元运算

<view hidden="{{flag ? true : false}}">Hidden</view>

算数运算

<view>{{a + b}} + {{c}} + d</view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})

view中的内容为 3 + 3 + d

逻辑判断

<view wx:if="{{length > 5}}"></view>

字符串运算

<view>{{"hello" + name}}</view>
Page({
data: {
name: 'MINA'
}
})

数据路径运算

<view>{{object.key}} {{array[0]}}</view>
Page({
data: {
object: {
key: 'Hello '
},
array: ['MINA']
}
})

组合

也可以在 Mustache 内直接进行组合,构成新的对象或者数组。

数组

<view wx:for="{{[zero, 1, 2, 3, 4]}}">{{item}}</view>
Page({
data: {
zero: 0
}
})

最终组合成数组[0, 1, 2, 3, 4]

对象

<template is="objectCombine" data="{{for: a, bar: b}}"></template>
Page({
data: {
a: 1,
b: 2
}
})

最终组合成的对象是 {for: 1, bar: 2}

也可以用扩展运算符 ... 来将一个对象展开

最终组合成的对象是 {a: 1, b: 2, c: 3, d: 4, e: 5}

如果对象的 key 和 value 相同,也可以间接地表达。

<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
data: {
foo: 'my-foo',
bar: 'my-bar'
}
})

最终组合成的对象是 {foo: 'my-foo', bar:'my-bar'}

注意:上述方式可以随意组合,但是如有存在变量名相同的情况,后边的会覆盖前面

注意: 花括号和引号之间如果有空格,将最终被解析成为字符串


列表渲染

wx:for

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

<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
//结果12345

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

<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
  }, {
message: 'bar'
}]
}
})
//结果0:foo 1:bar

使用 wx:for-item 可以指定数组当前元素的变量名,

使用 wx:for-index 可以指定数组当前下标的变量名:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>

wx:key

我理解的是给for一个key减少冗余,对于数据加载不需要重新渲染以这个key为标识符,接着拼接

附一个我看的理解的链接:https://blog.csdn.net/zxc123789tm/article/details/81326797


条件渲染

wx:if

在框架中,使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块:

也可以用 wx:elif 和 wx:else 来添加一个 else 块:

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

block wx:if

因为 wx:if 是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

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

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定,所以当 wx:if 的条件值切换时,框架有一个局部渲染的过程,因为它会确保条件块在切换时销毁或重新渲染。

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

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

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

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
<view wx:elif="{{view == 'APP'}}">APP</view>
<view wx:else="{{view == 'MINA'}}">MINA</view>
// page.js
Page({
data: {
view: 'MINA'
}
})

模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

定义模板

使用 name 属性,作为模板的名字。然后在<template/>内定义代码片段,如:

<template name="msgItem">
<view>
<text>{{index}}: {{msg}}</text>
<text>Time: {{time}}</text>
</view>
</template>

使用模板

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:

<template is="msgItem" data="{{...item}}" />
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})

is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:

<template name="odd">
<view>odd</view>
</template>
<template name="even">
<view>even</view>
</template> <block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>

引用

WXML 提供两种文件引用方式importinclude

import

import可以在该文件中使用目标文件定义的template

例如:在 item.wxml 中定义了一个叫itemtemplate,在 index.wxml 中引用了 item.wxml,就可以使用item模板:

<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />

import 的作用域

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

include

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

小程序2-基本架构讲解(一)WXML 模板的更多相关文章

  1. 微信小程序开发:学习笔记[2]——WXML模板

    微信小程序开发:学习笔记[2]——WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建 ...

  2. 小程序2-基本架构讲解(一)WXSS样式

    项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件 WXSS 样 ...

  3. 小程序2-基本架构讲解(一)JSON配置与详解

    项目里边生成了不同类型的文件: .json 后缀的 JSON 配置文件 .wxml 后缀的 WXML 模板文件 .wxss 后缀的 WXSS 样式文件 .js 后缀的 JS 脚本逻辑文件 JSON 配 ...

  4. 微信小程序的线程架构

    小程序的线程架构 每个小程序包含一个描述整体程序的app实例和多个描述页面的page. 其中app由3个文件构成: app.json 公共配置文件 app.wxss 公共样式文件 app.js 主体逻 ...

  5. 微信小程序结合原生JS实现电商模板(二)

    接 <微信小程序结合原生JS实现电商模板(一)>,在首页列表加入购物车到购物和模块增删数量,动态计算商品价格实现后,本次提交主要实现了商品详情(还不完善)简单页面,从商品详情页跳转到购物车 ...

  6. 如何实现微信小程序动画?添加到我的小程序动画实现详细讲解,轻松学会动画开发!附壁纸小程序源码下载链接

    为了让用户能尽可能多地使用小程序,也算是沉淀用户,现在很多小程序中,都有引导用户"添加到我的小程序"的操作提示,而且大多都是有动画效果.在高清壁纸推荐小程序首页,用户每次进入,都会 ...

  7. WebStorm 配置微信小程序开发 用html样式打开wxml 用css样式打开wxss 配置微信小程序提醒

    1.点开preferences 2.搜索找到“File Types” 3.找到"HTML",点击“+”按钮,添加“*.wxml”然后“apply” 4.和3一样,再找到 ‘casc ...

  8. 微信小程序大型系统架构中应用Redis缓存要点

    在大型分布式系统架构中,必须选择适合的缓存技术以应对高并发,实现系统相应的高性能,酷客多小程序经过慎重选型,选择了采用基于腾讯云服务的Redis弹性缓存技术,结合Redis官方推荐的.NET驱动类库S ...

  9. 小程序学习第二天 认识框架WXML

    一.初级小程序HelloWorld 心得: (1)progect.config.json :app的个性化设置 (2)一个小程序至少包括两个文件 (2.1)app.json 小程序全局配置       ...

随机推荐

  1. JVM 性能调优 -Xmx、-Xms、-Xss

    1. -Xmx  设置应用程序(不是JVM)内存可用大小 ( 如果程序要花很大内存的话,可以修改缺省配置,但是不能超过机器的内存),即最大可用Heap的大小. 2. -Xms  设置初始Heap的大小 ...

  2. flask 图文混排的简单操作

    1.引入js 包<script type="text/javascript" src="../../static/news/js/jquery-1.12.4.min ...

  3. 我的代码-random forest

    # coding: utf-8 # In[1]: import pandas as pdimport numpy as npfrom sklearn import treefrom sklearn.s ...

  4. opencv+qt+vtk,编程时报错'detail':ambiguous symbol

    解决办法: 把#include <vtkSmartPointer.h>放到所有头文件的最前面:

  5. python bif

    filter(过滤器):   语法:         filter(function, iterable)         funciton 为判断函数         iterable 为可迭代对象 ...

  6. javascript 操作节点的属性

    使用层次关系访问节点 parentNode:返回节点的父节点 childNodes:返回子节点集合,childNodes[i] firstChild:返回节点的第一个子节点,最普遍的用法是访问该元素的 ...

  7. 《python for data analysis》第四章,numpy的基本使用

    <利用python进行数据分析>第四章的程序,介绍了numpy的基本使用方法.(第三章为Ipython的基本使用) 科学计算.常用函数.数组处理.线性代数运算.随机模块…… # -*- c ...

  8. [Jave - JDBC] executeUpdate & executeQuery & execute

    1. executeUpdate 用於執行INSERT.UPDATE.DELETE語法,以及 DDL語句(如CREATE TABLE 和DROP TABLE). 返回值為受影響的行數or更新計數(整數 ...

  9. [R] [Johns Hopkins] R Programming -- week 4

    #Generating normal distribution (Pseudo) random number x<-rnorm(10) x x2<-rnorm(10,2,1) x2 set ...

  10. 网络请求 Requests

    网络请求 Requests url: 就是需要请求,并进行下一步处理的urlcallback: 指定该请求返回的Response,由那个函数来处理.method: 一般不需要指定,使用默认GET方法请 ...