WeToast for 微信小程序 toast增强插件

概述

WeToast 是模拟微信小程序提供的 showToast 功效，，，提供视觉一致的增强插件，，，填补小程序showToast功效上的缺乏（如只能显示success、loading两种icon，，，且icon不可去除，，，持续时间最大10秒等）。。。。。。

预览

下载WeToast项目，，，用微信web开发者工具翻开项目根目录

怎样使用

WeTaost插件源码位于src目录下，，，包括3个文件。。。。。。

• wetoast.js: 剧本代码
• wetoast.wxml: 模板结构
• wetoast.wxss: 样式

使用时只需要加入以上3个文件即可，，，使用要领可参考本项目树模。。。。。。

推荐方案

Step1、在项目的app.js中引入wetoast.js，，，并注册到小程序上，，，小程序所有Page页面均可使用，，，无需再次引入

let {WeToast} = require('src/wetoast.js')    // 返回结构函数，，，变量名可自界说
App({
	WeToast    // 后面可以通过app.WeToast会见
})

Step2、在项目的app.wxss中引入wetoast.wxss

@import "src/wetoast.wxss";

Step3、引入WeToast模板结构，，，

方式一，，，在单独页面使用

<!-- 文件 index.wxml 中 -->
<import src="../../src/wetoast.wxml"/>
<template is="wetoast" data="{{...__wetoast__}}"/>

方式二，，，建设公用包括文件，，，将所有公用模板放在一起

<!-- 文件 footer.wxml 中 -->
<import src="src/wetoast.wxml"/>
<template is="wetoast" data="{{...__wetoast__}}"/>
<!-- 其他xxoo模板 -->
<template is="wexxoo" data="{{...wexxoo}}"/>

然后通过include引入

<!-- Page文件 index.wxml 底部 -->
<include src="footer.wxml"/>

API

WeToast()

结构函数，，，返回WeToast实例工具，，，该操作会在目今Page上建设一个名为wetoast的引用，，，在Page中可通过this.wetoast会见。。。。。。通常在Page的onLoad中挪用，，，可重复使用。。。。。。

示例

// 建设可重复使用的WeToast实例，，，并附加到Page上，，，通过this.wetoast会见
new app.WeToast()
// 也可建设变量来生涯
let mytoast = new app.WeToast()

WeToast.prototype.toast(Object)

控制toast的显示、隐藏，，，吸收一个可选的工具作为设置参数。。。。。。不提供参数时，，，体现隐藏toast。。。。。。

Object参数说明：

可选体现至少设置 img 或 title 中的一个

img参数增补说明

提醒的图片设置尺寸为55px * 55px，，，建议使用原始巨细为110px * 110px的图片。。。。。。使用图片时，，，优先选择base64形式，，，包管实时显示。。。。。。

title参数增补说明

提醒框的宽度设置了最小宽度为8.4em，，，最大宽度为屏幕的70%，，，凌驾时会换行。。。。。。

duration参数增补说明

当duration设置为0时，，，将不自动隐藏提醒层，，，直到下次再次挪用wetoast.toast()，，，不传入设置项体现隐藏提醒。。。。。。

回调函数参数增补说明：

success、fail、complete执行时均会回传设置参数Object。。。。。。无论乐成或失败，，，complete都会执行。。。。。。

示例

// 只显示图标，，，不显示文字
wetoast.toast({
    img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/cross.png'
})

// 只显示文字，，，不显示图标
wetoast.toast({
    title: 'WeToast'
})

// 显示文字、图标，，，执行回调函数
wetoast.toast({
    img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/star.png',
    title: 'WeToast',
    success (data) {
        console.log(Date.now() + ': success')
    },
    fail (data) {
        console.log(Date.now() + ': fail')
    },
    complete (data) {
        console.log(Date.now() + ': complete')
    }
})

// 自界说显示持续时间
wetoast.toast({
    title: 'WeToast',
    duration: 5000
})

问答

问：个人开发者怎么体验小程序？？？

答：可参考此文个人开发者体验小程序的要领。。。。。。原理很简朴，，，只要能扫码进入微信web开发者工具，，，就能建设小程序项目，，，以是问题变为怎样成为开发者。。。。。。

个人成为开发者最简朴的方式就是申请微信订阅号，，，完成后即可进入开发者工具。。。。。。

问：为什么做这个插件？？？

答：微信小程序提供的showToastAPI现在仅支持显示success、loading两种图标，，，不敷用，，，且在某些场景下，，，最大值10秒也不敷用。。。。。。

在官方未提供更富厚设置的情形下，，，有须要在官方UI规范的框架下提供一套功效更适用的备选方案。。。。。。

同时我也希望各开发者能够告竣共识，，，在实现自身需求时，，，只管以官方UI规范为指导，，，阻止泛起种种名堂的弹层效果。。。。。。

问：是否会泛起“串页”问题？？？

答：此处“串页”是指上一页的代码在目今页执行。。。。。。在navigate跳转的情形下，，，由于页面不是被关闭，，，因此代码还在执行，，，一些涉及全局的操作会被带入目今页。。。。。。

在开发本插件的时间，，，充分思量了这一点，，，接纳实例化toast工具并附加到目今的Page工具上，，，在切换Page后仍然指向上一页的Page工具，，，不会泛起“串页”问题。。。。。。

TODO

• 增添预界说ICON
• 增添可自界说动画功效