#b:d:9:8:6:4:c:c:4:2:a:9:8:9:c:a:1:9:0:7:6:3:a:6:6:5:9:3:0:2:4:5#
停更了有一段时间了，首先得和你们说一声抱歉，前段时间家里的事情有一点多，常出门帮家里做点事情，有一些空闲的时间，也在写代码，人也不能总处于仍然学习新事物的路上，每收获一些内容，停下来巩固巩固，实际操练一下在我看来还是十分重要的，如何平衡 学习+输入文章 以及 写一些小 Demo以及项目确实是一个难点，写一篇文章，比我写代码要费事多了，首先得让他人能看懂，有时候就须要大量的文字或则配图、代码来配合演示，包括后期的上传发，针对不同社区图片地址、文章格式的处理，我觉得都是很繁杂的工作，在写代码的日子中，这些琐屑的工作会打断我的思路，所以此次搁了有一段时间了。
其实关于小程序最基本的一些文章，早就写好了，但是看来看去，总觉得差强人意，只能前面一边更改，一遍考虑再发下来，其实好多内容爬着官方的文档，都是可以找到答案的，只不过可能会比较隐蔽、晦涩。虽然，现在写的一些东西，已经能配合自己写的后台实现我的一些需求了，但是其实我只是一个前端狗，前台也只是用一些原生的代码写的，优化等也都不是很专业，总觉得写的没哪些胆气。
没更新的日子，还是见到有很多小伙伴在后台私聊，或者每晚有一些小小的关注，还是十分高兴，我还是尽可能给你们更新一些文章，和你们分享一些我对小程序也好，Java 系列相关的或则别的技术的一些学习记录，以及我的理解和思路，和你们一起交流~
9月份我的时间就相对稳定了，如果近来更新有所延后，希望你们拜谢，最后依然十分谢谢你们的支持！！！
(一) WXML 是哪些
官方说明：WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以建立出页面的结构
在上面我们就早已提过，WXML，就可以理解为我们传统页面中的HTML，它是陌陌为我们提供的一套标签语言，可以说它就是我们小程序的脸面（虽然没经过CSS装潢前不一定光鲜亮丽），开发中 WXML 页面就作为我们一些逻辑行为的入口，以及疗效展示的承载者。
再大白话一点：你所看见的小程序页面长什么样（不涉及背后做了哪些行为，只说表面），就是 WXML（主要） + WXSS （美化） 实现的
这一篇，我们主要涉及到的是 WXML 中诸如数据绑定、或者运算等等，但是学习之前，很显然，我们须要认识几个常见的标签，后面我们会总结一些常用的标签，下面会用到的有：
、 还有一些标签，大家去看官网文档就可以了，写的特别清楚，我们这儿重点还是说一下关于其中的一些标签句型问题
官网——WXML句型文档
官网——组件文档
#1:2:2:2:c:8:b:4:c:e:8:a:2:d:5:4:6:1:4:8:0:b:2:b:1:7:d:b:6:a:a:b#
看一下疗效
#0:d:0:e:e:6:b:a:5:5:3:7:f:d:b:b:9:c:9:8:0:d:5:4:4:3:3:8:9:e:4:f#
(二) 数据绑定
虽然还不涉及到哪些页面的美化，以及复杂的标签，不过一个极为简单的静态页面如今早已可以构造下来了，归根结底，我们最后都是要进行前后台数据的交互的，而陌陌小程序就为我们提供了好多挺好用的用法，能很快的进行数据的绑定操作
有一个前提条件，我们先模拟一些数据，我们只须要在页面的 js 文件中的 data对象中定义小程序初始化的数据，例如下边代码，我们随意拿一些常见的数据类型来模拟一下
#7:a:e:d:8:c:7:2:8:1:8:9:8:9:3:e:a:c:3:9:1:c:2:e:1:3:e:6:6:2:0:e#
(1) 常见类型普通写法
如何在 WXML 标签组件中进行数据的绑定虽然是极其简单的，微信小程序中通过 {{}} 来解析刚刚在 JS 中模拟的变量
要注意：直接通过 {{}} 解析的变量都是 页面 js 文件中 Page --> data 下的
A：字符串
字符串内容直接用两个大括号括住接收就可以了，在前面我们有这样的定义：
msg: "你好，微信小程序", 所以直接括住 msg 就可以获取到旁边的值了
#8:3:8:6:6:7:4:4:a:7:f:1:c:2:3:7:5:3:0:c:0:f:d:d:7:0:8:6:a:4:7:f#
B：数值
数值也是一样直接可以获取
#8:4:9:4:5:4:1:4:4:3:9:6:2:0:c:6:d:f:f:7:0:0:4:6:d:7:9:0:1:8:b:3#
C：布尔类型
布尔类型第一个代码是直接复印出其布尔类型 true 或者 false
#e:d:7:e:a:4:c:2:8:c:5:6:4:e:c:6:c:7:c:a:2:1:9:0:7:a:2:4:4:e:3:5#
而下边配合 checkbox 就可以实现是否选中的疗效
#d:c:9:8:1:3:6:3:0:3:4:5:9:3:c:c:d:7:b:4:9:3:7:2:0:a:a:c:e:1:e:a#
D：对象
对象这块假如你直接复印 person 就会输出一个 Object 类型，所以假如想要领到对象的属性值，一定要指定到具体的属性
#a:9:e:9:2:6:1:f:c:e:f:8:b:b:4:2:f:3:a:f:1:6:6:8:0:5:d:1:7:b:8:c#
看一下上述所有的绑定疗效
#7:c:2:e:9:2:3:a:6:e:6:5:6:a:9:5:a:7:b:8:5:a:7:f:a:4:4:3:5:c:f:1#
(2) 组件属性中
例如我们 view 组件的 id 值前缀是固定的 user- 后面就是用户的序号，这时候就可以通过变量来进行巧妙的解析到属性中了
注：不要轻易的乱加空格，否则可能会读取失败诸如：
#d:6:3:a:5:3:4:5:0:a:e:5:2:8:6:6:a:e:5:3:6:f:8:e:2:c:d:8:9:0:1:e#
看一下 Wxml 的源码 id 这个属性中早已进行了拼接，这种方法同样都会常用在 class 或者 style 中，配合三元运行能不错的实现一些需求，下面我们会提及
#e:a:b:3:b:f:7:4:1:e:7:c:9:e:5:8:2:0:f:7:d:c:5:a:b:9:d:7:3:6:6:0#
(三) 运算
首先我们仍然定义一些数据，三个整数，和两个字符串
#1:4:c:a:7:3:b:9:7:6:c:9:4:a:b:6:2:e:2:7:5:f:7:7:7:8:d:0:e:1:d:3#
(1) 算数运算
直接在 {{}} 中进行 加减乘除等的运算，直接就可以得到结算的结果，例如：
#9:c:d:1:0:7:6:4:4:a:0:a:c:f:5:e:a:1:c:e:2:5:5:9:a:b:c:9:2:6:8:b#
(2) 字符串运算
如果是字符串类型的数据，利用 + 进行运算，结果是一个拼接的疗效
#1:7:6:0:9:9:1:e:f:8:4:d:f:5:a:9:c:c:6:5:e:2:3:9:e:1:c:2:d:a:e:f#
(3) 逻辑判定
这个就是常见的 if 判断，例如使用 wx:if 这个属性，那么就只有在前面的表达式为 true 的情况下才能显示文本 a 大于 0
#7:b:a:6:a:f:5:c:5:4:d:4:1:9:b:f:3:2:2:0:f:2:a:0:5:1:b:0:b:0:e:e#
(4) 三元运算
三元运算的应用场景还是好多的（等式 ? : true情况，false的情况）
#7:c:1:2:f:5:4:b:0:4:a:d:a:6:8:e:6:c:6:f:3:9:c:5:d:a:9:0:b:4:b:e#
三元补充：
通过在属性中解析变量的方法，可以达到依照变量的值，来指定不同的 class名，以显示不同的款式
例如我们的 css 样式是这样的，iconfont 是我们共用的，所以直接写在属性中就可以了，而到底是用 icon-back 还是 icon-remove 就可以通过一个变量来操纵，例如我们下边的 isClick 就是在 js 里 data 中定义的一个 布尔类型的变量
#7:8:6:8:9:0:5:1:c:5:7:b:f:e:d:6:2:1:1:4:4:f:8:8:d:4:4:7:7:8:4:5#
当 isClick 为 true 就执行 class 就是这样的 class="iconfont icon-remove" 为 false 就是用另一个，我们就可以通过 控制变量值来进行不同的显示
#4:2:4:8:9:e:e:3:6:c:3:8:4:0:1:7:7:6:3:6:1:f:2:3:c:9:6:9:9:3:d:b#
看一下上述所有运算的执行结果（不含补充的结果）
#0:0:c:6:c:2:0:b:0:4:4:e:c:3:5:c:8:2:0:7:c:b:4:8:f:8:5:c:a:5:c:a#
(四) 列表循环（列表渲染）(1) 模拟数据
依旧我们给一些模拟数据，一个是 person 这样的对象内部有一些属性，还有一个就是 studentList 学生集合，其中有三个中学生的数据
#5:f:b:5:d:f:8:7:6:c:1:8:5:b:5:c:1:f:9:4:e:8:d:a:d:e:d:a:4:e:c:d#
如果我们接受到了后台的一些集合或则链表等内容，循环遍历是一个十分常用的操作
(2) 正式使用
组件（标签）上使用 wx:for 就可以绑定一个链表或集合内容，就可用链表中各项的数据重复渲染该组件
先举个事例
#d:2:8:3:c:8:d:9:7:9:2:7:4:d:e:f:b:d:2:3:0:6:9:2:7:4:9:6:7:f:f:3#
我们分别来解释一下：
如果传这个 key 值，会有一个警告弹出
#0:e:8:d:1:d:8:d:9:f:b:4:c:b:1:9:c:f:5:b:0:3:5:8:a:e:b:e:8:5:f:0#
(3) 嵌套用法的补充说明
嵌套的正确写法
#b:9:5:a:9:8:3:6:7:f:1:e:e:5:7:0:2:9:1:1:8:8:c:7:8:8:8:9:c:5:2:e#
再举一个事例（遍历对象的所有属性）：
#8:d:f:3:a:d:1:2:d:8:1:4:6:1:f:d:5:5:d:2:a:7:d:5:8:f:8:7:a:1:b:6#
看一下执行疗效
#3:9:c:6:3:5:f:0:e:a:6:5:b:8:a:6:c:1:b:8:1:9:b:2:a:8:0:f:4:e:d:1#
(4) 循环（渲染）block标签
如果我们使用两种不同的组件（标签）看看最终渲染下来的结果有哪些区别呢？
方法一（view 标签）
#0:1:4:2:c:5:1:7:4:0:2:6:9:f:e:c:c:e:c:2:3:3:3:d:c:2:3:b:d:8:7:4#
#7:e:9:e:1:0:c:b:8:5:1:b:d:8:3:7:2:8:9:9:4:2:3:2:0:e:0:e:0:e:4:5#
方法二（block 标签）
#a:9:8:9:3:6:2:5:b:6:8:7:4:7:e:0:c:9:8:1:6:5:f:f:b:8:c:6:1:3:f:7#
#6:e:8:0:5:3:3:1:0:9:c:c:0:d:c:3:3:d:b:9:e:a:0:d:e:d:6:2:c:2:c:9#
通过控制台中 Wxml 界面，可以看见，只有在 view 组件下遍历内容时才真正的生成了 dom 结构，而直接使用 block 则只是将内容重复写了几次，不会弄成真正的dom元素
(五) 逻辑判定（条件渲染）(1) 用法
这块理解没哪些难点，无非就是关于逻辑的几种判定，看一个反例就清楚了
说明：isLogin 是在 js 中模拟的一个数据，分别赋于 true false 或者其他的 例如 null，会依照逻辑值显示不同的内容
#3:c:d:2:e:d:4:e:a:e:b:8:9:9:5:e:c:5:3:8:0:6:5:0:3:5:9:7:9:4:9:6#
(2) 补充 hidden
补充用法（hidden）：
通过前面的 if else 等可以控制组件比如 view 的显示，而有一个属性 hidden 同样可以实现按照逻辑值控制组件的显示
例如给 hidden 传入一个 false 就会显示下来
#e:a:5:4:0:3:c:4:3:b:7:e:4:7:1:d:4:a:8:3:4:2:1:5:e:1:1:a:7:2:7:5#
