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

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

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

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

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

再打开 app.json

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

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

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

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

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

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

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

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

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

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

标题是 views ..

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

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