转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-17/

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

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

  1. template name =”[templateName]”
  2. 引用模板is = [templateName]
  3. 传入参数data = {{data}}
  4. 官方的阐述
    >https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/template.html

  1. 演示 模板的概念
    >WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。
    使用 name 属性,作为模板的名字。然后在template内定义代码片段,使用 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: "感谢关注,收藏!"
}
})

PS:应该是随着开发小程序项目的增多,肯定会积累一些代码,这些代码都可以通过抽离template的方式来方面后期的开发。

「小程序JAVA实战」小程序通用模板的使用(17)的更多相关文章

  1. 「小程序JAVA实战」小程序的flex布局(22)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...

  2. 「小程序JAVA实战」小程序的留言和评价功能(70)

    转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...

  3. 「小程序JAVA实战」小程序的举报功能开发(68)

    转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...

  4. 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...

  5. 「小程序JAVA实战」小程序的关注功能(65)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...

  6. 「小程序JAVA实战」小程序的视频点赞功能开发(62)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...

  7. 「小程序JAVA实战」小程序的springboot后台拦截器(61)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...

  8. 「小程序JAVA实战」小程序首页视频(49)

    转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...

  9. 「小程序JAVA实战」小程序视频封面处理(48)

    转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...

随机推荐

  1. nodejs调用百度统计api摆脱人肉数据统计

    var http = require("https"); var url = require('url'); var postData = JSON.stringify( { &q ...

  2. BZOJ2199 奶牛议会 【2-sat】

    BZOJ2199 奶牛议会 Description 由于对Farmer John的领导感到极其不悦,奶牛们退出了农场,组建了奶牛议会.议会以"每头牛 都可以获得自己想要的"为原则, ...

  3. atom的设置

    1.隐藏Keybinding Resolver Packages->Keybinding Resolver->Toggle.

  4. iOS Webview打开不受信的URL

    在我们开发过程中经常会碰到直接访问开发人员的私有地址, 这样在app 上是无法打开指定的网页的. 在iOS中需要对WKWebView 进行如下设置: 1.在工程的Plist 文件中添加一下选项 App ...

  5. LeetCode 529. Minesweeper

    原题链接在这里:https://leetcode.com/problems/minesweeper/description/ 题目: Let's play the minesweeper game ( ...

  6. PyBrain库的example之NFQ流程图分析

    PyBrain库的example之NFQ流程图分析 如下是测试程序.主要分析doEpisode和learn两个函数. #!/usr/bin/env python __author__ = 'Thoma ...

  7. python之面向对象(继承)

    类的继承 python之面向对象(继承) 面向对象的编程带来的主要好处之一是代码的重用,实现这种重用的方法之一是通过继承机制.继承完全可以理解成类之间的类型和子类型关系. 需要注意的地方:继承语法 c ...

  8. input type=number 禁止输入字符“e”的办法

    输入框input,的type设置为number,本想只输入数字,但是字符“e”却能通过, 首先科普一下, <body> <input onkeypress="getCode ...

  9. angular先加载页面再执行事件,使用echarts渲染页面

    剧情重现: 在一个页面中有多个小模块,这几个模块是可以拖动调顺序的,并且其中有两个模块使用了echarts渲染, 调整顺序angular插件有成熟的解决方案angular-sortable,https ...

  10. RK3288 制作开机动画

    Android 的开机动画是由 Linux 本地守护程序 bootanimation 专门控制实现的,其代码在 frameworks/base/cmds/bootanimation/ 目录下. 修改开 ...