微信小程序学习笔记 (小程序页面学习五 WXML-数据绑定基本食用方法)

目录结构

页面学习

视图层

  框架的视图层由 WXML 与 WXSS 编写，由组件来进行展示。
  将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。
  WXML(WeiXin Markup language) 用于描述页面的结构。
  WXS(WeiXin Script) 是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。
  WXSS(WeiXin Style Sheet) 用于描述页面的样式。
  组件(Component)是视图的基本组成单元。

WXML

简介
WXML 全名(Wei Xin Markup Language) 是框架设计的一套标签语言, 结合了基础组件, 事件系统吗可以构建出页面的结构

其实WXML 刚开始和HTML还是挺像的, 但是到后来和我印象中的HTML脱钩了, 在HTML中我没用过模板这个东西,这个后来会介绍,我平时没事的时候会用手机看看后面的介绍, 所以我写的部分大多是我看了四五遍后的总结, 我很菜四五遍也就这个水平

WXML能力

数据绑定

数据绑定,我们要知道绑定的是什么, 我们在前面讲 Page()的时候说过,Page()里的data , 而这个data就是这个页面的数据,他是一个JSON数据, 而这些数据就是我们可以WXML可以绑定的
数据绑定我们使用的是Mustache 语法(双大括号{{ }})将变量包裹起来, 可以作用于以下部分

1. 简单绑定

内容
效果演示

当我们在{{}}中包裹了data中对应的数据路径后,WXML就会自动的和data中对应数据路径的数据进行绑定, 如我们绑定的是data中的msg, 所以 WXML就会在data的JSON数据中自动寻找msg这个数据
组件属性
效果演示
第一次测试用''包裹

第二次测试用""包裹

我测试了包裹在 "" 内和 '' 内发现都没有区别但是官方是推荐我们使用""来包裹的,建议以后还是用""来包裹
控制属性
效果演示

我测试了包裹在 "" 内和 '' 内发现都没有区别, 这个我也不理解官方的意思了,算了这个测试我不做了,估计是都差不多吧
关键字
又名布尔值吧
true : boolean 类型的 true, 代表真值
false : boolean 类型的 false, 代表假值
注意 : 字符串即如 "false"/'false' 这样的没有包裹在{{}} 内被转义为boolean类型后代表真值

2. 运算

可以在 {{}} 内进行进行以下的简单运算 :
1. 三元运算
关于三元运算解释不多他大致为 boolean : 运算式1 ? 运算式2;
当boolean 为 true 执行运算式1, 为false 执行运算式 2
运行效果

2. 算数运算
运行效果

3. 逻辑判断
运行结果

4. 字符串运算
运行结果

5. 数据路径运算
数据路径运算,在我看来就是通过data对应的数据路径来找到数据,这个前面我们都已经是过了, 但在这里我们加深一下路径试试
运行结果