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

视图层

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

引用

简介

  在HTML实际使用中,引用是十分常见的,比如不同的页面,相同的标题, 再比如在我们微信小程序开发时, 我们有template 但是我们不可能有一个页面需要模板,就在这个页面写一个模板, 最后模板应该是统一的放在一个页面中, 最后 通过某个方式调用, 而这个就是引用.
  在微信小程序开发中 我们使用以下两种方式来完成引用 import , include

import

import 可以使目标文件使用引入文件内定义的 template , 我们将模板中我们使用的学生模板提出来
temp.wxml

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

index.wxml

<view>
    <text class='title'>模板</text>
    <import src="../temp.wxml"/>
    <block wx:for="{{array.stus}}" wx:for-index="i" wx:for-item="obj" wx:key="id">
        <template is="student" data="{{...obj}}" />
    </block>
</view>

注意 import的使用方式,他是以相对路径的形式进行引用, 而且 它的作用域 仅在他的父容器内,而且不能在使用后进行引用给个图示

如上图所示, 蓝框画住的就是这个 import 的有效区
运行效果
再聊聊作用域的概念
我们看看官方的作用域的概念

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

官方的话应该是毋庸置疑的,但是我却想要做下改变, 我有可能在B的模板中引用了A, 在我的测试中我对学生的模板有一些疑惑,因为学生模板中不应当存在checkbox , 他应当是在另一个模板中的,同时为了做测试(很没有意义的), 我将之拆为两个模板

temp.wxml

<template name="student">
    <text>学号</text>
    <text>{{id}}</text>
    <text>姓名</text>
    <text>{{name}}</text>  
</template>

test.wxml

<import src="temp.wxml" />
<template name="stus">
    <view class='table'>
        <checkbox></checkbox>
        <template is="student" data="{{...obj}}" />
    </view>
</template>

index.wxml

<view>
    <text class='title'>引用</text>
    <block wx:for="{{array.stus}}" wx:for-index="i" wx:for-item="obj" wx:key="id">
        <import src="../test.wxml"/>
        <template is="stus" data="{{obj}}" />
    </block>
</view>

运行效果

上图中我也对官网的说法做了测试,的确如官网所说

include

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，这个没什么好说的, 他在应用上比起template 会比较死但是传参上就没有太多问题

temp.wxml

<template name="student">
  <text>学号</text>
  <text>{{id}}</text>
  <text>姓名</text>
  <text>{{name}}</text>
</template>

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

index.xml

<view>
    <text class='title'>include</text>
    <block wx:for="{{array.stus}}" wx:for-index="i" wx:for-item="obj" wx:key="id">
        <include src="../temp.wxml" />
    </block>
</view>

运行效果

在上面的测试中我在include 后加入了<template is="student" data="{{...obj}}" /> 但是没有用,我们发现了include 他是会屏蔽掉与template 相关的数据的,使用时也要注意作用域的问题
友情提示 temp中的

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

也是可以使用的,是可以用template 的,好了介绍完毕

微信代码片段
wechatide://minicode/ClJnJNmD6jZi