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
• 增添可自界说动画功效