宁皓网 微信小程序：视图

下面可以先在我们的小程序里面去准备一个页面 .. 然后在这个页面上练习一下微信小程序的 WXML .. 先打开开发者工具的编辑 ..

在树型视图里找到 pages 目录 .. 先在这个目录的下面，新建一个目录，名字是 wxml ... 然后在这个目录下面再去新建一个页面 .. 名字可以是 wxml ..

开发者工具会给我们创建好页面需要的几个文件 .. 并且会自动更新小程序的配置，添加新创建的这个页面 ..

回到编辑器 .. 打开这个 wxml.js ... 里面已经注册好了一个页面 .. 页面的生命周期还有事件处理也在里面 ..

页面视图上用了一个 text 组件显示了一个文字内容 ..

再打开 app.json

在 pages 这里，已经给我们添加好了刚才新建的页面 .. 我们可以把这个页面放在最上面 . 这样这个页面会作为小程序的首页 ..

再去添加一个标签栏 .. 复制一份 .. 修改一下 .. 标签上的文字是 视图 ..

再改一下标签上用的小图标 .. 正常的状态是 web.png ... 激活状态下是 web-active.png ... 我们可以再去下载这两个小图标 .. 在 ninghao-icons 这个 github 仓库里面 ..
https://github.com/ninghao/ninghao-icons
打开 weixin .. app

找到 web.png 还有 web-active.png ..

Download ... 保存一下这个小图标 ... 放在项目的 assets .. icons 目录的下面 ..

再去下载另一个小图标 ... 同样放在 icons 目录的下面 ...

这个标签的页面地址也需要修改一下 ... pages/wxml/wxml

现在打开的就是视图标签 .. 显示的就是 wxml 这个页面 ..

再简单的修改一下 .. 打开这个页面的视图文件 . 还有它的主逻辑文件 .. 选中这个 js 文件 ... 右键 .. split down ..

再打开之前我们创建的 event 页面的视图 .. 复制一下里面的内容 ... 把它粘贴到 wxml 这个页面的视图文件里 ..

标题是 views ..

还有块样式 ... 把这个 header 样式可以放在全局样式表里 ...

现在我们就准备好了一个新的页面 ... 在这个页面上我们可以练习一下 wxml 相关的东西 ...

来自 https://ninghao.net/video/5076#info

小程序页面上要用的数据应该在它的 data 里面 .. 在注册页面用的 Page 函数里面，可以添加一个 data ... 里面可以包含页面需要的数据 .. 比如这里我们先添加一个 header ... 它的值是个对象 .. 里面再添加一个 content 属性 ... 它的值可以是 views ..

在页面的视图文件里，我们可以绑定输出页面的 data 里的数据 .. 比如在这个 text 组件里面，先去掉这个静态的文字 .. 然后在这里绑定一个动态的数据 .. 两组花括号 .. 在它里面可以做一些运算 . 这里我们绑定一个 header.content ..

在页面上会显示一个 views .. 这个数据来自页面的 data 对象 ..

这种绑定也可以用在组件的属性上面 .. 在 header 里面添加一个 class .. 对应的值是 header .. 然后去掉 text 组件上的 class 属性里的值 .. 在双引号的里面，再添加两组花括号 .. 绑定一个 header.class ..

现在这个页面视图上显示的文字还有它上面应用的类，都是来自页面的初始化数据 .. 这样你在小程序里面可以动态的去设置这些数据 ..

回到开发者工具 .. 在调试这里，打开 AppData 这个面板 .. 这里显示的就是当前页面上的数据 ..

你会看到这里有个 header ，它里面有个 content .. 还有个 class ..

在绑定数据用的花括号里面，我们还可以做一些运算 ..

比如在这个标题内容的前面，添加一个字符串 ... 加上一个标题前缀 ..

还可以这样 ... 判断一下 header.content .. 看看它里面有没有东西 .. 如果有，就显示一个 header.content ... 如果 header 里的 content 里面没有内容 .. 就显示一个 无标题 ..

现在页面上会显示一个 views .. 再去掉 header 里的 content ... 这样页面上就会显示一个 无标题 ...

来自 https://ninghao.net/video/5078#info

你想根据某个条件来决定是不是要渲染某块界面 .. 可以在界面上绑定一个条件 .. 比如在这个 header 的包装上面 ... 可以用一个 wx:if .. 一组引号 .. 里面绑定一个条件 .. 这个条件如果计算出来是 true ，那这块界面就会被渲染 ..

如果是 false 就不会被渲染 ..

比如绑定一个条件 ... 看一下 header 的 content 值的字符数是不是大于 5 ... . 现在页面上的标题会被隐藏 .. 因为这个条件计算出来的值是 false .. 再看一下这个 content 字符数是不是大于 3 ... 这次标题会显示 .. 因为条件计算出来的值是 true ..

一般我们可以在这里绑定页面上的一个数据 .. 这个数据的值应该是 true 或者 false .. 在 header 里面，添加一个 show .. 先把它设置成 false ..

然后把这个 show 的值绑定到个组件的 wx:if 里面 ...

现在页面上的标题没显示出来 .. 我们再回到开发者工具看一下 .. 在调试这里 .. 打开 wxml 面板 .. 在这里可以检查一下页面上的元素 ..

你会发现 .. 标题的包装组件没有在这里出现 .. 也就是 wx:if 并不是简单的让元素在界面上显示或者隐藏 .. 如果你给的值是 false .. 那这块元素压根就不会在页面上被渲染 ... 真到你给它一个 true ..

把 header 里的 show 设置成 true ... 标题元素现在就会在页面上渲染出来了 ..

这里我们可以继续使用 elseif 去做一些判断 .. 或者用一个 else 设置一下默认的东西 .. 复制一块 ..

在这个 view 组件上面，用一个 wx:else ... 这样它上面的这个 view 不显示的话，就会显示这个 view 组件，还有它里面包装的东西 .. 要显示的文字是 无标题 ..

保存 ... 现在会显示页面的标题 .. 因为 show 的值是 true ..

再把 show 的值设置成 false ..

这样页面上会就会显示一个 无标题 .. 再把 show 的值设置成 true ... 这样又会显示页面的标题 ..

来自 https://ninghao.net/video/5079#info

有一组数据，想在界面上显示，可以用一下 wx:for .. 先在页面上添加一组数据 .. 名字是 fruits .. 它里面的东西是一组水果 ... 添加一个苹果 .. 一个香蕉 .. 再添加一个柠檬 ..

在页面的视图文件里 .. 可以用一个 view 组件 .. 上面加上 wx:for .. 把要循环显示的数组交给它 .. 这里就是刚才添加的 fruits ..

数组里的每个项目可以使用 item 来表示 .. 在这组 view 里面，再绑定一个 item ... 这个 item 是一个默认的名字 ..

在这个 view 上面，可以再添加一个 class .. 名字是 item ..

保存 ... 你会看到，页面上会显示一组水果 ..

再到开发者工具的 wxml 这个面板上检查一下 .. 你会看到水果的包装上面都带一个 item 类 ..

再回到视图文件 .. 这里绑定的 item 是列表项目的默认的名字 .. 列表项目的索引值叫 index .. 你也可以在列表里面用一下它 ..

再绑定一个 index .. 页面上会输出列表的索引值还有列表项目 ..

有时候你可能希望自己指定这个项目的名字 .. 可以在这里再用一个 wx:for-item .. 它的值就是项目的名字 .. 比如 fruit ，你也可以使用 wx:for-index 去修改默认的项目的索引的名字 ..

在显示项目时候，再用一下我们自己指定的这个名字 ... 这里就是 fruit ..

现在页面上仍然会显示水果列表里的水果项目 ..

来自 https://ninghao.net/video/5080#info

常用的界面可以定义成一个模板，在需要的地方你可以重复使用它 .. 这里我们先清理一下 ...

比如这个页面标题 .. 需要一个 view 组件，里面包装了一个 text 组件 .. 这个组件上面绑定了一个 class，还有要显示的文字 ..

我们可以把它定义成一个模板 .. 先去新建一个模板文件 .. 放在 pages 下面， 添加一个新的目录，名字可以是 templates .. 模板文件的名字是 header.wxml

定义一个模板先用一组 template ，上面加上一个 name 属性设置一下模板的名字 .. 比如 header ..

这个 template 里面包装的东西就是模板的具体内容 .. 这里我需要一个 view 组件，里面包装一个 text 组件 .. 这个组件上添加一个 class 属性，然后绑定一个数据 .. 名字是 class

再绑定一个文字内容 .. 数据的名字是 content ...

这样就定义好了一个模板 .. 在使用这个模板的时候，你要给模板提供在模板里面绑定的这些数据 ..

比如在这个 wxml 页面的视图文件里，我们用一下刚才定义的模板 .. 这里需要先导入模板文件 ... 用一个 import .. 在 src 里面指定一下模板文件的位置 .. 是在上一级目录里的 templates 下面，名字是 header.wxml

在用一下这个文件里定义的 header 这个模板 ..

去掉这块内容 ... 换成一个 template .. 添加一个 is 属性，指定一下要使用的模板的名字 .. 这里就是 header .. 然后添加一个 data 属性，在这里你要设置一下模板里面需要的数据 .. 这些数据正好在页面 data 的 header 里面 .. 用一个扩展操作符 ... 把 header 数据里的东西扩展出来，放到这个模板的 data 里面 ..

保存 ..

页面上仍然会显示一个标题 .. 现在这块界面的结构来自我们定义的一个模板 ...

在其它的地方，我们可以重复的使用这个模板 ..

来自 https://ninghao.net/video/5081#info

小程序的框架里面提供了一些组件 .. 我们可以利用这些组件去构建小程序页面的界面 .. 这些组件就像是 html 里的标签 .. 之前我们已经用过了 view 组件，还有 text 组件 ..

view 组件是个包装组件，text 组件用来显示文字内容 .. 如果组件里面需要包装其它的内容，这种组件一般都有个开始标记，还有个结束标记 .. 结束标记里面会带一个斜线 .. 这开始还有结束标签之间可以添加一些内容 .. 比如在这个 view 组件里面，再嵌套一个 text 组件 ..

在这个 text 组件里面，可以添加要显示的文字 ..

属性

小程序的组件上面有一些共同的属性 .. 比如 id .. 可以给组件添加一个唯一的标识 .. class 可以在组件上定义类 .. 你可以在样式文件里去设计这些类的样式 ..

style 属性可以在组件上添加内联的样式 .. 这些都跟 html 差不多 .. 不一样的是，你可以在这些属性上面绑定动态的数据 .. 两组花括号 .. 里面可以添加绑定的数据 .. 你还可以在这里去做一些运算 .. 根据运算的结果来决定属性的值 ..

在组件上你还可以使用 data 开头的自定义属性 .. data 后面有个小横线，小横线右边的东西就是自定义属性的名字 .. 这些自定义属性的值会包含在组件的事件对象里 ..

组件上面还可以添加一些 bind 开头的事件绑定 .. 比如在这个组件上绑定一个 tap 事件，可以添加一个 bindtap .. 它的值是对应的事件处理方法 .. 在页面的主逻辑里面，你可以去定义这个方法具体要做的事情 ..

想要隐藏组件，你可以添加一个 hidden 属性 .. 给它绑定一个 true ... 这样组件的内容就会被隐藏 .. 如果你不想渲染组件，你可以使用 wx:if .. 只想简单的隐藏内容，就用这个 hidden .. 给它一个 false ... 组件又会显示出来 ..

自关闭标签

组件也可以是自关闭的 .. 比如小程序里有个 icon 组件，可以用来显示小程序里内置的一些小图标 ..

添加一个 icon .. 它可以是一个自关闭的组件 .. 就是不需要结束标签 .. 直接在这个标签的结尾添加一个斜线 .. 组件上除了可以使用组件共用的一些属性以外 ... 不同的组件可能会有一些自己特有的属性 ..

比如这个 icon 组件上面，可以用一个 type 属性，它的值就是小图标的类型 .. 或者叫小图标的名字 .. 具体可以使用的值需要参考这个 icon 组件的文档 .. 比如我们给它一个 success .. 显示的是一个表示成功的小图标 ..

info ... 表示信息 ...

这个 icon 组件上还有个 color 属性，可以设置小图标的颜色 ... 添加一个 color .. 给它一个颜色的值 ..

我们还可以使用 icon 的 size 属性去设置小图标的大小 .. 默认的大小是 23 .. 这里我们把它设置成 40 ..

来自 https://ninghao.net/video/5083#info