微信小程序学习笔记 ( 小程序页面学习 七 WXML-模板 基本食用方法)

视图层

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

模板

介绍

  WXML 提供了模板(template), 我们可以可以在模板中定义代码片段, 以使我们可以在不同的位置调用, 比如对列表的渲染, 或者是对一些信息的渲染, 这些一般在实际使用中我们需要将之从原来的代码中抽离,形成模板,方便使用,以及维护.

定义模板

如下方代码所示即为一个模板的代码

<template name="student">
    <view class='table'>
        <checkbox></checkbox>
        <text>学号</text>
        <text>{{id}}</text>
        <text>姓名</text>
        <text>{{name}}</text>
    </view>
</template>

它的作用是用于定义一个学生模板, 对于template 它的 name 属性即为 模板的标识符,其应当在作用域中是唯一的, 不唯一你怎么去使用, 而其内部的就是调用模板的位置传来的JSON数据内部数据 如上面的模板要求传来的数据至少应是这样的 {"id":*,"name":*}, * : 代表任意值

使用模板

下方代码即为循环调用我们定义的模板

<block wx:for="{{array.stus}}" wx:for-index="i" wx:for-item="obj" wx:key="id">
  <template is="student" data="{{...obj}}" />
</block>

上方代码其实就是对我们的列表渲染的另一种调用方式, 但是我们看到了template 的便捷性, 之要在这个template 作用域内使用 上面的代码就可以调用你的模板, 但是请仔细观察我的data中的{{...obj}},想想是为什么.
注意 因为对于模板来说,其实你传来的数据相当于直接封装在data中, 假如说 你的data中包含的是"obj" : {"id":*,"name":*}, 那么我们的模板应该是这么写的

<template name="student">
    <view class='table'>
        <checkbox></checkbox>
        <text>学号</text>
        <text>{{obj.id}}</text>
        <text>姓名</text>
        <text>{{obj.name}}</text>
    </view>
</template>

但是肯定是我们的代码去适应模板,而不是因为我们的代码问题去改变模板,所以我们需要使用{{...obj}} 来展开我们的数据将他从"obj" : {"id":*,"name":*}, 变为{"id":*,"name":*}

作用域

模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。

上方是官网对于模板传入数据的定义,没啥好说的, wxs到时在说

代码运行效果

分享代码片段 wechatide://minicode/iKf89Mm76tZx