「小程序JAVA实战」小程序通用模板的使用（17）

IT架构圈

发布于 2018-12-24 15:23:28

1.1K0

发布于 2018-12-24 15:23:28

文章被收录于专栏：IT架构圈

小程序也为了页面增加了通用模板的功能，如何去理解一个通用的模板呢？模板的定义就是为了让我们的页面可以享受一些公用话的模板，模板可以我们当成js里面定义的通用方法，我们需要这些通用的模板的时候，只需要调用这些模板就可以了，并且模板也提供一些参数。源码：https://github.com/limingios/wxProgram.git 中的No.8

小程序的为页面定义通用模板

template name ="[templateName]"
引用模板is = [templateName]
传入参数data = {{data}}
官方的阐述

https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html

演示模板的概念

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在内定义代码片段，使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的模块。

templateIs.wxml

<!templateIs.wxml-->
<template name="mytemp">
  <view>姓名：{{name}}</view>
  <view>年龄：{{age}}</view>
  <view>地址：{{address}}</view>
  <view>备注：{{remark}}</view>
  <view>msg：{{msg}}</view>
</template>

<view class="container">
  <template is="mytemp" data="{{...person,msg,name:'limng',age:'永远18岁'}}" />
  <template is="mytemp" data="{{...person,msg,name:'limng',age:'永远18岁'}}" />
  <template is="mytemp" data="{{...person,msg,name:'limng',age:'永远18岁'}}" />
</view>

templateIs.js

//templateIs.js
//获取应用实例
const app = getApp()

Page({
  data: {
    person: {
      address: "公众号：编程坑太多",
      remark: "个人主页：www.idig8.com"
    },
    msg: "感谢关注，收藏！"
  }
})