微信小程序学习笔记(四)--框架-视图层
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。
数据绑定
使用{{}}绑定数据。
简单绑定
<view class='first-container' bindtap='bindTapFunc'>
FirstName:{{firstName}},lastName:{{lastName}}
</view>
组件属性(需要在双引号之内)
<view id='item-{{id}}' class='first-container' bindtap='bindTapFunc'>
FirstName:{{firstName}},lastName:{{lastName}}
</view>
控制属性(需要在双引号之内)
<view>
<view wx:if="{{view==='WEBVIEW'}}">{{view}}</view>
<view wx:elif="{{view==='APP'}}">{{view}}</view>
<view wx:if="{{view==='MAC'}}">{{view}}</view>
</view>
关键字(需要在双引号之内)
true
:boolean 类型的 true,代表真值。
false
: boolean 类型的 false,代表假值。
<checkbox checked="{{false}}"> </checkbox>
特别注意:不要直接写 checked="false"
,其计算结果是一个字符串,转成 boolean 类型后代表真值。
运算
三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
算数运算
<view> {{a + b}} + {{c}} + d </view>
逻辑判断
<view wx:if="{{length > 5}}"> </view>
组合
也可以在 Mustache 内直接进行组合,构成新的对象或者数组。
列表渲染
wx:for
在组件上使用 wx:for
控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index
,数组当前项的变量名默认为 item
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
这里页面上数据绑定的时候,试着把item换成了随便的字母,页面上就不能正常显示列表了,所以item应该是不可修改的值。
block wx:for
<block>不是一个组件,它仅仅是一个包装元素,只接受控制属性,不会在页面中做任何渲染。
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中,并且希望列表中的项目保持自己的特征和状态(如 <input/>
中的输入内容,<switch/>
的选中状态),需要使用 wx:key
来指定列表中项目的唯一的标识符。
条件渲染
wx:if
在框架中,使用 wx:if="{{condition}}"
来判断是否需要渲染该代码块;也可以用 wx:elif
和 wx:else
来添加一个 else 块:
<!--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'
}
})
block wx:if
因为 wx:if
是一个控制属性,需要将它添加到一个标签上。如果要一次性判断多个组件标签,可以使用一个 <block/>
标签将多个组件包装起来,并在上边使用 wx:if
控制属性。
wx:if
vs hidden
模板
定义模板
使用 name 属性,作为模板的名字。然后在<template/>
内定义代码片段,如:
<!--wxml-->
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template> <template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
使用模板
<template>中的is用于确定需要套用哪一个template,data则为在template中展现的数据。
一个wxml文件里面可以定义多个<template></template>,用name来区分。
调用时,is取对应的name值即可引用对应的模板。
is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:
<!--index.wxml-->
<template name="staffName">
<view class='first-container'>
FirstName:{{firstName}},lastName:{{lastName}}
</view>
</template>
<template name="anther">
<view class='another-container'>
FirstName:{{firstName}},lastName:{{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="anther" data="{{...staffC}}"></template>
效果图:
模板的作用域
模板拥有自己的作用域,只能使用 data 传入的数据以及模版定义文件中定义的 <wxs />
模块。
微信小程序学习笔记(四)--框架-视图层的更多相关文章
- 微信小程序学习笔记四 自定义组件
1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件 ...
- 微信小程序学习笔记四 页面的生命周期
1. 生命周期 1.1 对应阶段说明 onLOad(Object query) 1.1 页面加载时触发, 一个页面只会调用一次, 可以在 onLoad的参数中获取打开当前页面路径中的参数 1.2 参数 ...
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- 【微信小程序学习笔记】入门与了解
[微信小程序学习笔记(一)] IDE 下载安装 下载地址 官方工具:https://mp.weixin.qq.com/debug/w … tml?t=1476434678461 下载可执行文件后,可按 ...
- 微信小程序学习笔记一 小程序介绍 & 前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一 微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
- 微信小程序学习笔记(二)--框架-全局及页面配置
描述和功能 框架提供了自己的视图层描述语言 WXML 和 WXSS,以及基于 JavaScript 的逻辑层框架,并在视图层与逻辑层间提供了数据传输和事件系统,让开发者能够专注于数据与逻辑. 响应的数 ...
- 微信小程序学习笔记(3)--------框架之配置
我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. app.json 配置项列表 属性 类型 必填 描述 pages Stri ...
- 微信小程序学习笔记1--小程序的代码构成
最近打算学习一下微信小程序,看了微信公众平台的文档感觉还比较简单,就从这个方向重新找回学习的状态吧: 1.先了解一下小程序的代码构成: 创建项目后会看到四种后缀的文件: .json 后缀的 JSON ...
- 微信小程序学习笔记(一)--创建微信小程序
一.创建小程序 1.申请帐号.安装及创建小程序,请参照官方文档里面的操作 https://developers.weixin.qq.com/miniprogram/dev/. 小程序在创建的时候会要求 ...
- 微信小程序学习笔记(阶段一)
一阶段学习过程: (一)看官方文档的简易教程:https://mp.weixin.qq.com/debug/wxadoc/dev/ (二)看小码哥视频:https://chuanke.baidu.co ...
随机推荐
- BZOJ 5296: [Cqoi2018]破解D-H协议(BSGS)
传送门 解题思路 \(BSGS\)裸题??要求的是\(g^a =A (mod\) \(p)\),设\(m\)为\(\sqrt p\),那么可以设\(a=i*m-j\),式子变成 \[ g^{i*m-j ...
- 如何为网站启用HTTPS加密传输协议
前言 当今时代对上网的安全性要求比以前更高,chrome和firefox也都大力支持网站使用HTTPS,苹果也从2017年开始在iOS 10系统中强制app使用HTTPS来传输数据,微信小程序也是要求 ...
- 【SpringBoot】 一种解决接口返回慢的方式
前言 使用springboot开发后台代码的时候,很核心的一个功能是为前端提供接口,那么很可能你会遇到如下问题: 1. 接口里面调用的service层是第三方库或者第三方后台程序,导致访问很慢. 2. ...
- gitlab fatal: Authentication failed for 'http://10.2.80.17:8090/yeyichao/201904041026PROj.git/'
fatal: Authentication failed for 'http://10.2.80.17:8090/yeyichao/201904041026PROj.git/' git config ...
- linux中的常用信号
linux中的常用信号,见如下列表: 信号名 值 标注 解释 ------------------------------------------------------------------ HU ...
- 使用phpexcel导入excel文件种的时期数据时数据导入格式
在使用phpexcel导入类似于 YYYY-MM-DD HH:ii:ss格式的数据时,导入成功以后会发现导入的数据其实是类似于42085.746516204格式的数据( excel在存储时间类型的数据 ...
- css设置图片的高等于图片的高
<div class="box"> <img src="img/2222.jpg" /> </div> .box { pos ...
- js非布尔值的与(&&)与或(||)运算
/** * 非布尔值的与(&&)与或(||)运算 * 1.先将其转换成布尔值再做运算,并且返回原值 * 2.与(&&)运算: * a.如果第一个值为true,则返回第二 ...
- activiti 流程部署的各种方式
流程资源可以是各种类型的文件,在启动流程或流程实例运行过程中会被读取.下面介绍常用的流程资源. 一.流程资源 流程定义文件:扩展名为bpmn20.xml和bpmn; 流程定义的图片:用BPMN2.0规 ...
- Angular的一些常用命令
Angular的一些常用命令 cmd中创建项目: ng new taskmgr -si --style=scss //先不安装依赖,si 为skip install material需要scss样式的 ...