「小程序JAVA实战」小程序通用模板的使用(17)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-17/
小程序也为了页面增加了通用模板的功能,如何去理解一个通用的模板呢?模板的定义就是为了让我们的页面可以享受一些公用话的模板,模板可以我们当成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 属性,作为模板的名字。然后在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)的更多相关文章
- 「小程序JAVA实战」小程序的flex布局(22)
转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...
- 「小程序JAVA实战」小程序的留言和评价功能(70)
转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...
- 「小程序JAVA实战」小程序的举报功能开发(68)
转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...
- 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...
- 「小程序JAVA实战」小程序的关注功能(65)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...
- 「小程序JAVA实战」小程序的视频点赞功能开发(62)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeshipindianzangongnengkaifa61/ 视频点 ...
- 「小程序JAVA实战」小程序的springboot后台拦截器(61)
转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudespringboothoutailanjieqi60/ 之前咱们把 ...
- 「小程序JAVA实战」小程序首页视频(49)
转自:https://idig8.com/2018/09/21/xiaochengxujavashizhanxiaochengxushouyeshipin48/ 视频显示的内容是视频的截图,用户的头像 ...
- 「小程序JAVA实战」小程序视频封面处理(48)
转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinfengmianchuli47/ 截图这块,在微信小程序工 ...
随机推荐
- nodejs调用百度统计api摆脱人肉数据统计
var http = require("https"); var url = require('url'); var postData = JSON.stringify( { &q ...
- BZOJ2199 奶牛议会 【2-sat】
BZOJ2199 奶牛议会 Description 由于对Farmer John的领导感到极其不悦,奶牛们退出了农场,组建了奶牛议会.议会以"每头牛 都可以获得自己想要的"为原则, ...
- atom的设置
1.隐藏Keybinding Resolver Packages->Keybinding Resolver->Toggle.
- iOS Webview打开不受信的URL
在我们开发过程中经常会碰到直接访问开发人员的私有地址, 这样在app 上是无法打开指定的网页的. 在iOS中需要对WKWebView 进行如下设置: 1.在工程的Plist 文件中添加一下选项 App ...
- LeetCode 529. Minesweeper
原题链接在这里:https://leetcode.com/problems/minesweeper/description/ 题目: Let's play the minesweeper game ( ...
- PyBrain库的example之NFQ流程图分析
PyBrain库的example之NFQ流程图分析 如下是测试程序.主要分析doEpisode和learn两个函数. #!/usr/bin/env python __author__ = 'Thoma ...
- python之面向对象(继承)
类的继承 python之面向对象(继承) 面向对象的编程带来的主要好处之一是代码的重用,实现这种重用的方法之一是通过继承机制.继承完全可以理解成类之间的类型和子类型关系. 需要注意的地方:继承语法 c ...
- input type=number 禁止输入字符“e”的办法
输入框input,的type设置为number,本想只输入数字,但是字符“e”却能通过, 首先科普一下, <body> <input onkeypress="getCode ...
- angular先加载页面再执行事件,使用echarts渲染页面
剧情重现: 在一个页面中有多个小模块,这几个模块是可以拖动调顺序的,并且其中有两个模块使用了echarts渲染, 调整顺序angular插件有成熟的解决方案angular-sortable,https ...
- RK3288 制作开机动画
Android 的开机动画是由 Linux 本地守护程序 bootanimation 专门控制实现的,其代码在 frameworks/base/cmds/bootanimation/ 目录下. 修改开 ...