一、简介

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。

定义模板

使用name属性,作为模板的名字。然后在<template/>内定义代码片段,如:

<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>

使用模板

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入,如:

<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})

is 属性可以使用 Mustache 语法,来动态决定具体需要渲染哪个模板:

<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template> <block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

模板的作用域

模板拥有自己的作用域,只能使用data传入的数据。

二、封装消息模板

1.功能需求

 小程序的wx.showToast接口只提供了两种icon【success和loading】展示形式,

  那假如我想要的是不要图标只要存粹的文字提醒呢?或者是我不要微信单方面提供的那种图片呢?想要自己指定的情况呢?这时候要怎么办..

根据wx.showToast接口提供的参数,实现一下消息提醒模板

1、如果没有指定icon图标地址,那么就是单纯的显示文字提示,否则就是图标+文字的模式,这时候就要确保icon指向的图片地址是正确的啦。

2、如果没有指定duration提示的延迟时间,默认是1.5s,而我设置的最大值10s是不会自动隐藏消息提示的,除非手动hideToast. 单位:毫秒

3、如果没有指定mask遮罩,默认是跟着显示的,防止触摸穿透

4、如果没有指定cb回调函数,默认直接显示消息提醒,否则可以在等消息提示结束后即刻处理一些其他业务:例如地址跳转,改变订单状态等等

2.模板代码

代码文件结构

images
|--msg_info.png
pages
|--index
|--index.wxml
|--index.wxss
|--index.js
template
|--showToast.wxml
|--showToast.wxss
utils
|--showToast.js

showToast.wxml代码

注:name可自定义,经过测试,它可以和文件名不同

<template name="showToast">
<block wx:if="{{showToast.isShow? showToast.isShow: false}}">
<view class="toast-bg" wx:if="{{showToast.mask==false? false : true}}"></view>
<view class="toast-center">
<view class="toast">
<image class="toast-icon" src="{{showToast.icon}}" mode="scaleToFill" wx:if="{{showToast.icon}}" />
<text class="toast-text">{{showToast.title}}</text>
</view>
</view>
</block>
</template>

showToast.wxss

注:它并不会自动引用,

可以在index.wxss的头部加入 @import "../../template/showToast.wxss";

也可以直接写在app.wxss中

/*showToast*/
.toast-bg {
position: fixed;
top:;
bottom:;
z-index:;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .2);
}
/*水平居中必备样式*/
.toast-center {
position: fixed;
z-index:;
width: 100%;
height: 100%;
text-align: center;
}
.toast {
display: inline-block;
padding: 20rpx 40rpx;
max-width: 600rpx;
font-size: 28rpx;
color: #fff;
background: rgba(0, 0, 0, .5);
border-radius: 10rpx;
text-align: center;
}
/*垂直居中必备样式*/
.toast-center::after{
content: '';
display: inline-block;
width:;
height: 100%;
vertical-align: middle;
}
.toast .toast-icon {
display: block;
margin: 0 auto 10rpx auto;
width: 50rpx;
height: 50rpx;
}

showToast.js

/*
显示toast提示
title: 提示的内容 必填
icon: 图标,//请指定正确的路径,选填
duration: 提示的延迟时间,单位毫秒,默认:1500, 10000永远存在除非手动清除 选填
mask: 是否显示透明蒙层,防止触摸穿透,默认:true 选填
cb: 接口调用成功的回调函数 选填
*/
function showToast(obj) {
if (typeof obj == 'object' && obj.title) {
if (!obj.duration || typeof obj.duration != 'number') { obj.duration = 1500; }//默认1.5s后消失
if(obj.icon=='info'){obj.icon = '/images/msg_info.png';}
else if(obj.icon=='error'){obj.icon = '/images/msg_error.png';}
var that = getCurrentPages()[getCurrentPages().length - 1];//获取当前page实例
obj.isShow = true;//开启toast
if (obj.duration < 10000) {
setTimeout(function () {
obj.isShow = false;
obj.cb && typeof obj.cb == 'function' && obj.cb();//如果有成功的回调则执行
that.setData({
'showToast.isShow': obj.isShow
});
}, obj.duration);
}
that.setData({
showToast: obj
});
} else if (typeof obj == 'string') {
var that = getCurrentPages()[getCurrentPages().length - 1];//获取当前page实例
var objData = { title: obj, duration: 1000, isShow: true };
setTimeout(function () {
objData.isShow = false;
that.setData({
showToast: objData
});
}, objData.duration);
that.setData({
showToast: objData
});
} else {
console.log('showToast fail:请确保传入的是对象并且title必填');
}
}
/**
*手动关闭toast提示
*/
function hideToast() {
var that = getCurrentPages()[getCurrentPages().length - 1];//获取当前page实例
if (that.data.showToast) {
that.setData({
'showToast.isShow': false
});
}
}
module.exports = {
showToast: showToast,
hideToast: hideToast
}

3.模板的引用

这里将在index页面进行测试

index.wxml

<import src="../../template/showToast.wxml" />
<template is="showToast" data="{{showToast: showToast}}" />
<!--上面两句话是放置模板的路径和传入的data! data传入方式写死固定-->
<view bindtap="testToast" data-test="1">只传title,单纯文字提醒</view>
<view bindtap="testToast" data-test="2">指定图标,图标+文字提醒</view>
<view bindtap="testToast" data-test="3">指定duration,控制toast 3s消失</view>
<view bindtap="testToast" data-test="31">指定duration=10s,手动2s后关闭toast</view>
<view bindtap="testToast" data-test="4">指定mask,控制toast遮罩</view>
<view bindtap="testToast" data-test="5">指定cb, 控制回调处理业务</view>

index.js

var feedbackApi=require('../../common/showToast');//引入消息提醒暴露的接口
Page({
.....//其他省略
testToast: function(e){
var test=e.target.dataset.test;
if(test==1){
feedbackApi.showToast({title: 'test shoToast title'})//调用
}
if(test==2){
feedbackApi.showToast({
title: 'test shoToast title',
icon: '/images/msg_info.png'
})
}
if(test==3){
feedbackApi.showToast({
title: 'test shoToast title',
duration: 3000
})
}
if(test==31){
feedbackApi.showToast({
title: 'test shoToast title',
duration: 10000
})
setTimeout(function(){
feedbackApi.hideToast();
}, 2000)
}
if(test==4){
feedbackApi.showToast({
title: 'test shoToast title',
mask: false
})
}
if(test==5){
feedbackApi.showToast({
title: 'test shoToast title',
cb: function(){
console.log('回调进来了,可以制定业务啦')
}
})
}
}
})

其他用法

//扩展一
feedbackApi.showToast('test');
//扩展二
feedbackApi.showToast({
  title: 'test shoToast title',
  icon:'info' //'error'
});
 

参考:http://blog.csdn.net/eadio/article/details/54616595

欢迎阅读本系列文章:微信小程序开发教程目录

微信小程序开发之模板的更多相关文章

  1. 微信小程序开发之模板消息

    一.添加模板 登录https://mp.weixin.qq.com获取模板,如果没有合适的模板,可以申请添加新模板,审核通过后可使用,详见模板审核说明 页面的 <form/> 组件,属性r ...

  2. 微信小程序开发 [04] 模板和模块化

    1.模板 如果相同的wxml代码可能在不同的页面重复使用,ctrl+c配合ctrl+v的方式,后期维护起来未免也太麻烦了.微信提供了"模板",可以在模板中定义代码片段,然后在不同的 ...

  3. 微信小程序开发教程目录

    本系列教程是自己在工作中使用到而记录的,没有顺序之分 如有错误之处,请给与指正,也不希望误导了别人 微信小程序开发教程目录 微信小程序之注册和入门 微信小程序之HTTPS请求 微信小程序开发之选项卡 ...

  4. 微信小程序开发:学习笔记[2]——WXML模板

    微信小程序开发:学习笔记[2]——WXML模板 快速开始 介绍 WXML 全称是 WeiXin Markup Language,是小程序框架设计的一套标签语言,结合小程序的基础组件.事件系统,可以构建 ...

  5. 微信小程序开发工具测评

    1月9日微信小程序正式上线.很多企业都希望能在这个.但是在技术开发的问题上,却不知道该如何下手.经过一些程序员不辞辛苦连夜测试,终于从十余款工具呕心沥血筛选出四款比较靠谱实用的微信小程序开发工具.接下 ...

  6. 微信小程序开发详解——小程序,大颠覆!

    微信小程序开发 联系 苏念 188.1414.7927  微信小程序系统开发 微信新功能开发 小程序开发 小程序怎么开发 app小程序开发 简化小程序开发 微信小程序定制 小程序制作 开发微信小程序  ...

  7. 微信小程序开发库grace vs wepy

    grace和wepy都是辅助小程序开发的开源库,本文对两者做个对比. 注:本文是作者本人的一些拙见,纯粹的技术讨论,不想引起技术信仰之争,欢迎积极.正向的讨论及建议. 如果你还不了解Grace, 请参 ...

  8. 微信小程序开发03-这是一个组件

    编写组件 基本结构 接上文:微信小程序开发02-小程序基本介绍 我们今天先来实现这个弹出层: 之前这个组件是一个容器类组件,弹出层可设置载入的html结构,然后再设置各种事件即可,这种组件有一个特点: ...

  9. 微信小程序开发基础

    前言: 微信小程序开入入门,如果你有html+css+javascript的基础,那么你就很快地上手掌握的.下面提供微信小程序官方地址:https://developers.weixin.qq.com ...

随机推荐

  1. python2.6升级2.7

    1.下载Python-2.7.3 #wget http://python.org/ftp/python/2.7.3/Python-2.7.3.tar.bz2   2.解压 #tar -jxvf Pyt ...

  2. 适合Linux新手的发行版有哪些?

    一个很古老的问题,找到适合的 Linux 发行版比简单的指出哪种 Linux 版本受欢迎更重要.为什么这么说?让我们设置一个情景:你有一位用户,很有可能,他过去大多数时候都是在 Windows 或者 ...

  3. springmvc对于JSON对象的处理

    1.常见的json    jar包,及其优缺点(开发中可以一起使用) json-lib     缺点:依赖第三方的包 jackson SpringMVC内置的json装换工具,依赖包较少 GSON   ...

  4. Docker: 限制容器可用的 CPU

    默认情况下容器可以使用的主机 CPU 资源是不受限制的.和内存资源的使用一样,如果不对容器可以使用的 CPU 资源进行限制,一旦发生容器内程序异常使用 CPU 的情况,很可能把整个主机的 CPU 资源 ...

  5. IEEE Trans 2008 Gradient Pursuits论文学习

    之前所学习的论文中求解稀疏解的时候一般采用的都是最小二乘方法进行计算,为了降低计算复杂度和减少内存,这篇论文梯度追踪,属于贪婪算法中一种.主要为三种:梯度(gradient).共轭梯度(conjuga ...

  6. 来自Ext的UI边界识别函数constrain

    //constrain函数 var min = 1 var max = 3; var num = 4; var result = Math.min(Math.max(num,min),max); co ...

  7. 參与 Spring 4 中文文档翻译

    參与 Spring 4 中文文档翻译 我们从2014年12月開始翻译Spring 4的框架文档.尽管至今已有一年,可是进度非常慢. 当中一部分原因是由于Spring 文档有1000多页,并且翻译的时候 ...

  8. IntelliJ IDEA(五) :Settings(中)

    上篇介绍了Settings中的Appearance & Behavior和Keymap,这篇继续,将介绍Editor,Plugins,Version Control. 一.Editor(编辑) ...

  9. 人工智能背景下的Office 365现状和发展趋势

    作者:陈希章 发表于 2017年7月31日 引子 谈论人工智能是让人兴奋的,因为它具有让人兴奋的两大特征 -- 每个人都似乎知道一点并且以知道一点为荣,但又好像没多少人能真正讲的明白.毫无疑问,我也仅 ...

  10. activeMq 使用方法

    一:activeMq介绍 ActiveMQ是一种开源的,实现了JMS1.1规范的,面向消息(MOM)的中间件,为应用程序提供高效的.可扩展的.稳定的和安全的企业级消息通信,下载地址是:http://a ...