微信小程序开发之模板

简介: 一、简介 WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。 定义模板 使用name属性,作为模板的名字。然后在内定义代码片段,如: {{index}}: {{msg}} Time: {{time}} ...

一、简介

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: 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

<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月前
|
消息中间件 人工智能 Java
抖音微信爆款小游戏大全:免费休闲/竞技/益智/PHP+Java全筏开源开发
本文基于2025年最新行业数据,深入解析抖音/微信爆款小游戏的开发逻辑,重点讲解PHP+Java双引擎架构实战,涵盖技术选型、架构设计、性能优化与开源生态,提供完整开源工具链,助力开发者从理论到落地打造高留存、高并发的小游戏产品。
|
2月前
|
小程序 JavaScript API
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
这篇文章介绍了使用uni-halo框架进行微信小程序开发的过程,包括选择该框架的原因、开发目标以及项目配置和部署的步骤。
113 0
uni-halo + 微信小程序开发实录:我的第一个作品诞生记
|
5月前
|
小程序 前端开发 Android开发
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
1195 29
小程序微信分享功能如何开发?开放平台已绑定仍不能使用的问题?-优雅草卓伊凡
|
4月前
|
监控 数据可视化 数据处理
微信养号脚本,全自动插件,AUTOJS开发版
这是一套自动化微信养号工具,包含主脚本`wechat_auto.js`与配置文件`config.json`。主脚本实现自动浏览朋友圈、随机阅读订阅号文章及搜索指定公众号三大功能,支持自定义滚动次数、阅读时长等参数。代码通过随机化操作间隔模拟真实用户行为,具备完善的错误处理和日志记录功能。配套UI模块提供可视化操作界面,可实时监控任务状态与运行日志,便于调整参数设置。控制器部分扩展了批量数据处理能力,如学生信息的增删改查操作,适用于多场景应用。下载地址:https://www.pan38.com/share.php?code=n6cPZ 提取码:8888(仅供学习参考)。
|
6月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
557 12
|
6月前
|
小程序 Java 关系型数据库
weixin163基于微信小程序的校园二手交易平台系统设计与开发ssm(文档+源码)_kaic
本文介绍了一款基于微信小程序的校园二手物品交易平台的开发与实现。该平台采用Java语言开发服务端,使用MySQL数据库进行数据存储,前端以微信小程序为载体,支持管理员和学生两种角色操作。管理员可管理用户、商品分类及信息、交易记录等,而学生则能注册登录、发布购买商品、参与交流论坛等。系统设计注重交互性和安全性,通过SSM框架优化开发流程,确保高效稳定运行,满足用户便捷交易的需求,推动校园资源共享与循环利用。
|
6月前
|
人工智能 开发框架 小程序
工会成立100周年纪念,开发职工健身AI运动小程序、APP方案推荐
为庆祝中华全国总工会成立100周年,特推出基于AI技术的智能健身系统,以小程序和APP形式呈现,助力职工健康生活。方案包括:1) 小程序插件,支持多种运动识别,开箱即用;2) APP插件,提供更高精度的运动检测;3) 成熟的「AI乐运动」系统,支持赛事活动管理。这些方案满足不同需求,推动全民健身体验升级,彰显工会对职工健康的关怀。
|
9月前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
361 0
|
11月前
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
228 0
在线课堂+工具组件小程序uniapp移动端源码
|
12月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
1968 3

热门文章

最新文章