微信小程序有什么模板代码？
微信的使用者大到各企业公司，下到各位爷爷奶奶叔叔阿姨，用户群可谓庞大，微信的使用人数已经超过五亿。微信推出的功能有很多，最近小程序的使用很火爆，下面跟随小编一起来看一看关于微信小程序的模板代码有哪些吧!
WXML提供模板(template)，可以在微信模板中定义代码片段，然后在不同的地方调用。
定义模板
使用name属*，作为模板的名字。然后在内定义代码片段，如：
{{index}}: {{msg}}
Time: {{time}}
使用模板
使用 is 属*，声明需要的使用的模板，然后将模板所需要的 data 传入，如：
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
is 属*可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：
odd
even
模板的作用域
模板拥有自己的作用域，只能使用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可自定义，经过测试，它可以和文件名不同
{{showToast.title}}
showToast.wxss
注：它并不会自动引用，
可以在index.wxss的头部加入 @import "../../template/showToast.wxss";
也可以直接写在app.wxss中
/*showToast*/
.toast-bg {
position: fixed;
top: 0;
bottom: 0;
z-index: 999999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .2);
}
/*水平居中必备样式*/
.toast-center {
position: fixed;
z-index: 9999999;
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: 0;
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
只传title，单纯文字提醒
指定图标，图标+文字提醒
指定duration，控制toast 3s消失
指定duration=10s，手动2s后关闭toast
指定mask，控制toast遮罩
指定cb， 控制回调处理业务
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'
});
以上就是今天的关于微信小程序的模板代码有哪些的全部的内容啦!大家看明白了吗?阅读完本篇文章后大家对关于微信小程序的模板代码有哪些应该很清楚的了解了吧!希望微微风的文章能够给大家带来一些帮助，帮助大家更加了解微信的各种功能，多多关注微微风，后面还有更多精彩内容。
相关推荐
微信小程序界面布局如何做?
小程序开发的静态页面怎么写?
小程序有什么注意点吗?
上一篇：微信有什么自动抢红包的方法？
下一篇：微信小程序界面布局如何做？