├── LICENSE
├── README.md
├── app.js
├── app.json
├── app.wxss
├── images
├── cross.png
├── demo.png
└── star.png
├── pages
├── about
│ ├── about.js
│ └── about.wxml
├── code
│ ├── code.js
│ └── code.wxml
└── index
│ ├── index.js
│ └── index.wxml
└── src
├── wetoast.js
├── wetoast.wxml
└── wetoast.wxss
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2016 kiinlam
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## 公告
2 |
3 | 微信小程序现已在框架升级了`showToast`API，增加了更多自定义功能，推荐使用。本仓库停止更新。需要交流可提Issue，不便之处请海涵。
4 |
5 | `wx.showToast` API地址：https://developers.weixin.qq.com/miniprogram/dev/api/wx.showToast.html
6 |
7 | ===
8 |
9 | WeToast for 微信小程序 toast增强插件
10 | ===
11 |
12 | ## 概述
13 |
14 | [WeToast](https://github.com/kiinlam/wetoast) 是仿照微信小程序提供的 `showToast` 功能，提供视觉一致的增强插件，弥补小程序`showToast`功能上的不足（如只能显示`success`、`loading`两种icon，且icon不可去除，持续时间最大10秒等）。
15 |
16 | ## 预览
17 |
18 | [下载WeToast项目](https://github.com/kiinlam/wetoast/archive/master.zip)，用[微信web开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)打开项目根目录
19 |
20 | 
21 |
22 | ## 如何使用
23 |
24 | WeTaost插件源码位于`src`目录下，包含3个文件。
25 |
26 | - wetoast.js: 脚本代码
27 | - wetoast.wxml: 模板结构
28 | - wetoast.wxss: 样式
29 |
30 | 使用时只需要加入以上3个文件即可，使用方法可参考本项目示范。
31 |
32 | #### 推荐方案
33 |
34 | ##### Step1、在项目的`app.js`中引入`wetoast.js`，并注册到小程序上，小程序所有Page页面均可使用，无需再次引入
35 |
36 | ```javascript
37 | let {WeToast} = require('src/wetoast.js') // 返回构造函数，变量名可自定义
38 | App({
39 | WeToast // 后面可以通过app.WeToast访问
40 | })
41 | ```
42 |
43 | ##### Step2、在项目的`app.wxss`中引入`wetoast.wxss`
44 |
45 | ```css
46 | @import "src/wetoast.wxss";
47 | ```
48 |
49 | ##### Step3、引入WeToast模板结构，
50 |
51 | *方式一，在单独页面使用*
52 |
53 | ```html
54 |
55 |
56 |
57 | ```
58 |
59 | *方式二，创建公用包含文件，将所有公用模板放在一起*
60 |
61 | ```html
62 |
63 |
64 |
65 |
66 |
67 | ```
68 |
69 | *然后通过`include`引入*
70 |
71 | ```html
72 |
73 |
74 | ```
75 |
76 | ## API
77 |
78 | #### WeToast()
79 |
80 | 构造函数，返回WeToast实例对象，该操作会在当前Page上创建一个名为`wetoast`的引用，在Page中可通过`this.wetoast`访问。通常在Page的`onLoad`中调用，可重复使用。
81 |
82 | ###### 示例
83 |
84 | ```javascript
85 | // 创建可重复使用的WeToast实例，并附加到Page上，通过this.wetoast访问
86 | new app.WeToast()
87 | // 也可创建变量来保存
88 | let mytoast = new app.WeToast()
89 | ```
90 |
91 | #### WeToast.prototype.toast(Object)
92 |
93 | 控制toast的显示、隐藏，接收一个可选的对象作为配置参数。不提供参数时，表示隐藏toast。
94 |
95 | ###### Object参数说明：
96 |
97 | | 参数 | 类型 | 必填 | 说明 |
98 | | ------------- | ------------- | ----- | ---------------------------- |
99 | | img | String | 可选* | 提示的图片，网络地址或base64 |
100 | | imgClassName | String | 否 | 自定义图片样式时使用的class |
101 | | imgMode | String | 否 | 参考小程序image组件mode属性 |
102 | | title | String | 可选* | 提示的内容 |
103 | | titleClassName| String | 否 | 自定义内容样式时使用的class |
104 | | duration | Number | 否 | 提示的持续时间，默认1500毫秒 |
105 | | success | Function | 否 | 提示即将隐藏时的回调函数 |
106 | | fail | Function | 否 | 调用过程抛出错误时的回调函数 |
107 | | complete | Function | 否 | 调用结束时的回调函数 |
108 |
109 | *可选表示至少设置 `img` 或 `title` 中的一个*
110 |
111 | ###### img参数补充说明
112 |
113 | 提示的图片设置尺寸为55px * 55px，建议使用原始大小为110px * 110px的图片。使用图片时，优先选择base64形式，保证实时显示。
114 |
115 | ###### title参数补充说明
116 |
117 | 提示框的宽度设置了最小宽度为8.4em，最大宽度为屏幕的70%，超过时会换行。
118 |
119 | ###### duration参数补充说明
120 |
121 | 当`duration`设置为`0`时，将不自动隐藏提示层，直到下次再次调用`wetoast.toast()`，不传入配置项表示隐藏提示。
122 |
123 | ###### 回调函数参数补充说明：
124 |
125 | `success`、`fail`、`complete`执行时均会回传配置参数`Object`。无论成功或失败，`complete`都会执行。
126 |
127 | ###### 示例
128 |
129 | ```javascript
130 | // 只显示图标，不显示文字
131 | wetoast.toast({
132 | img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/cross.png'
133 | })
134 | ```
135 |
136 | ```javascript
137 | // 只显示文字，不显示图标
138 | wetoast.toast({
139 | title: 'WeToast'
140 | })
141 | ```
142 |
143 | ```javascript
144 | // 显示文字、图标，执行回调函数
145 | wetoast.toast({
146 | img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/star.png',
147 | title: 'WeToast',
148 | success (data) {
149 | console.log(Date.now() + ': success')
150 | },
151 | fail (data) {
152 | console.log(Date.now() + ': fail')
153 | },
154 | complete (data) {
155 | console.log(Date.now() + ': complete')
156 | }
157 | })
158 | ```
159 |
160 | ```javascript
161 | // 自定义显示持续时间
162 | wetoast.toast({
163 | title: 'WeToast',
164 | duration: 5000
165 | })
166 | ```
167 |
168 | ## 问答
169 |
170 | ##### 问：个人开发者怎么体验小程序？
171 |
172 | 答：可参考此文[个人开发者体验小程序的方法](https://sso.ifanr.com/trochili/thread/11856/)。原理很简单，只要能扫码进入微信web开发者工具，就能创建小程序项目，所以问题变为如何成为开发者。
173 |
174 | 个人成为开发者最简单的方式就是申请微信订阅号，完成后即可进入开发者工具。
175 |
176 | ##### 问：为什么做这个插件？
177 |
178 | 答：微信小程序提供的`showToast`API目前仅支持显示`success`、`loading`两种图标，不够用，且在某些场景下，最大值10秒也不够用。
179 |
180 | 在官方未提供更丰富配置的情况下，有必要在官方UI规范的框架下提供一套功能更实用的备选方案。
181 |
182 | 同时我也希望各开发者能够达成共识，在实现自身需求时，尽量以官方UI规范为指导，避免出现各种花样的弹层效果。
183 |
184 | ##### 问：是否会出现“串页”问题？
185 |
186 | 答：此处“串页”是指上一页的代码在当前页执行。在navigate跳转的情况下，由于页面不是被关闭，因此代码还在执行，一些涉及全局的操作会被带入当前页。
187 |
188 | 在开发本插件的时候，充分考虑了这一点，采用实例化toast对象并附加到当前的Page对象上，在切换Page后仍然指向上一页的Page对象，不会出现“串页”问题。
189 |
190 | ## TODO
191 |
192 | - 增加预定义ICON
193 | - 增加可自定义动画功能
194 |
195 | ## License
196 | The MIT License(http://opensource.org/licenses/MIT)
197 |
198 | 请自由地享受和参与开源
199 |
200 | ## 贡献
201 |
202 | 如果你有好的意见或建议，欢迎给我提issue或pull request。
203 |
204 |
--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
1 | //app.js
2 | let {WeToast} = require('src/wetoast.js')
3 |
4 | //注册小程序，接收一个Object参数
5 | App({
6 | WeToast
7 | })
--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
1 | {
2 | "pages":[
3 | "pages/index/index",
4 | "pages/about/about",
5 | "pages/code/code"
6 | ],
7 | "window":{
8 | "navigationBarTitleText": "WeToast example"
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/app.wxss:
--------------------------------------------------------------------------------
1 | @import "src/wetoast.wxss";
2 |
3 | /*
4 | * reset
5 | */
6 | page {
7 | font-size: 14px;
8 | font-family: -apple-system-font, "Helvetica Neue", sans-serif;
9 | line-height: 1.5;
10 | color: #404141;
11 | background: #f4f4f5;
12 | padding-bottom: 60px;
13 | }
14 |
15 | .page__hd {
16 | padding: 18px;
17 | }
18 | .page__title {
19 | text-align: left;
20 | font-size: 16px;
21 | }
22 |
23 | /*button*/
24 | .btn {
25 | flex: 3;
26 | }
27 | .btn-code {
28 | flex: 1;
29 | margin-left: 1em;
30 | color: #3f8af0;
31 | }
32 | .btn-area {
33 | margin: 1.17647059em 15px 0.3em;
34 | display: flex;
35 | }
36 |
37 | /*text*/
38 | .text {
39 | margin: 1em 3em;
40 | font-size: 1em;
41 | }
42 |
43 | /*code*/
44 | .code {
45 | padding: 1em;
46 | }
47 |
48 | /*indent*/
49 | .indent {
50 | text-indent: 2em;
51 | }
52 | .indent2 {
53 | text-indent: 4em;
54 | }
55 |
56 | /*footer*/
57 | .footer {
58 | padding: 0.5em 0;
59 | color: #999999;
60 | font-size: 14px;
61 | text-align: center;
62 | background: #000;
63 | }
64 | .footer_fixed-bottom {
65 | position: fixed;
66 | bottom: 0;
67 | left: 0;
68 | right: 0;
69 | }
70 | .footer__links {
71 | font-size: 0;
72 | }
73 | .footer__link {
74 | display: inline-block;
75 | vertical-align: top;
76 | margin: 0 .62em;
77 | position: relative;
78 | font-size: 14px;
79 | color: #3f8af0;
80 | }
81 | .footer__link:before {
82 | content: " ";
83 | position: absolute;
84 | left: 0;
85 | width: 1px;
86 | border-left: 1rpx solid #C7C7C7;
87 | color: #C7C7C7;
88 | left: -0.65em;
89 | top: .36em;
90 | bottom: .36em;
91 | }
92 | .footer__link:first-child:before {
93 | display: none;
94 | }
95 | .footer__text {
96 | padding: 0 .34em;
97 | font-size: 12px;
98 | color: #898989;
99 | }
--------------------------------------------------------------------------------
/images/cross.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kiinlam/wetoast/e3ab4c4577035f0a2af01b7c28de11ea2d017002/images/cross.png
--------------------------------------------------------------------------------
/images/demo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kiinlam/wetoast/e3ab4c4577035f0a2af01b7c28de11ea2d017002/images/demo.png
--------------------------------------------------------------------------------
/images/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/kiinlam/wetoast/e3ab4c4577035f0a2af01b7c28de11ea2d017002/images/star.png
--------------------------------------------------------------------------------
/pages/about/about.js:
--------------------------------------------------------------------------------
1 | // about.js
2 |
3 | // 获取应用实例
4 | let app = getApp()
5 |
6 | Page({
7 | back () {
8 | wx.navigateBack()
9 | }
10 | })
11 |
--------------------------------------------------------------------------------
/pages/about/about.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 | WeToast by kiinlam
4 | WeApp Toast add-ons
5 | 微信小程序toast增强插件
6 | Github:
7 | https://github.com/kiinlam/wetoast
8 | LICENSE: MIT
9 | ----------
10 | TODO:
11 | 1、增加可自定义动画功能
12 | 2、增加预定义ICON
13 |
14 |
--------------------------------------------------------------------------------
/pages/code/code.js:
--------------------------------------------------------------------------------
1 | // code.js
2 |
3 | // 获取应用实例
4 | let app = getApp()
5 |
6 | Page({
7 | onLoad (option) {
8 | this.type = option.type
9 | this.setData({type:this.type})
10 |
11 | //创建可重复使用的toast实例，并附加到this上，通过this.wetoast访问
12 | new app.WeToast()
13 | },
14 |
15 | onRun () {
16 | let type = this.type
17 | this[type + 'Toast']()
18 | },
19 |
20 | imgToast () {
21 | this.wetoast.toast({
22 | img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABuCAMAAADxhdbJAAAAgVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9d3yJTAAAAKnRSTlMA+0IPA2iTLO7YuiXr4/IcCqYkFbKZN/bUiHlbBs7J3L5hTtvDjFFx6Uzm0WRUAAAB20lEQVRo3u3Zy3KCQBCF4R4QFZGL4F0x4jXp93/AVBbmFFMx4MB0pVLz7bv+zdk1OY7jOI7j/C3ROh6RGG/MPBXrBYpZrDcYMrNYz5/ww5Ssi0L+FpM1GAlqOVkWKIkaRiJRw0jgLSW7olCy5o1FahgJhNZqGAmsC7LKn0jWolCmhpFAaa2GkcDBJyswEsGaPxGqYSRwsVbDSOCYkU2BkqhhJEI1jAQm1moYCcz3ZJE3lqwFSqqGkcDMXg0jQW1A9kShcS39MBiJcc0/89w3GgksUGsyY+bzyGQkqFFrFX9ZVQYjMahFyeMmazuSDrWs5IcyNxoJX6m9IUNyMxgJb+gF9evroHEkJjW4cs0lbRiJWQ0WXPPutRgJbOlVM65R24aRGNVgoPV4XjSOBDWD3pzr4mXDSFAzsdd7KmgxEr6ToezImlnWNBIOyFh2Yc16pI+kew38A2uSnT6S7jXwS9YN909HoirqqFiz7pA+GYnaUWfFmXXjXeGF/dYgfeNmqHXvxa1qN+pJ3qKnTtSb0VSmhp5EDZYJ/2LlEQn0UOudtxKpoackanD6sZcsyZKbkqjBTknUoBKpQcAg8Te6i9RgK1KDjWANvTgnIQvURGxUmZPjOI7jOM7/9wkPMejs5BepRwAAAABJRU5ErkJggg=='
23 | })
24 | },
25 |
26 | titleToast () {
27 | this.wetoast.toast({
28 | title: 'WeToast'
29 | })
30 | },
31 |
32 | timeToast () {
33 | this.wetoast.toast({
34 | title: 'WeToast',
35 | duration: 5000
36 | })
37 | },
38 |
39 | fullToast () {
40 | this.wetoast.toast({
41 | img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABuCAMAAADxhdbJAAAAgVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9d3yJTAAAAKnRSTlMA+0IPA2iTLO7YuiXr4/IcCqYkFbKZN/bUiHlbBs7J3L5hTtvDjFFx6Uzm0WRUAAAB20lEQVRo3u3Zy3KCQBCF4R4QFZGL4F0x4jXp93/AVBbmFFMx4MB0pVLz7bv+zdk1OY7jOI7j/C3ROh6RGG/MPBXrBYpZrDcYMrNYz5/ww5Ssi0L+FpM1GAlqOVkWKIkaRiJRw0jgLSW7olCy5o1FahgJhNZqGAmsC7LKn0jWolCmhpFAaa2GkcDBJyswEsGaPxGqYSRwsVbDSOCYkU2BkqhhJEI1jAQm1moYCcz3ZJE3lqwFSqqGkcDMXg0jQW1A9kShcS39MBiJcc0/89w3GgksUGsyY+bzyGQkqFFrFX9ZVQYjMahFyeMmazuSDrWs5IcyNxoJX6m9IUNyMxgJb+gF9evroHEkJjW4cs0lbRiJWQ0WXPPutRgJbOlVM65R24aRGNVgoPV4XjSOBDWD3pzr4mXDSFAzsdd7KmgxEr6ToezImlnWNBIOyFh2Yc16pI+kew38A2uSnT6S7jXwS9YN909HoirqqFiz7pA+GYnaUWfFmXXjXeGF/dYgfeNmqHXvxa1qN+pJ3qKnTtSb0VSmhp5EDZYJ/2LlEQn0UOudtxKpoackanD6sZcsyZKbkqjBTknUoBKpQcAg8Te6i9RgK1KDjWANvTgnIQvURGxUmZPjOI7jOM7/9wkPMejs5BepRwAAAABJRU5ErkJggg==',
42 | title: 'WeToast',
43 | success (data) {
44 | console.log(Date.now() + ': success')
45 | },
46 | fail (data) {
47 | console.log(Date.now() + ': fail')
48 | },
49 | complete (data) {
50 | console.log(Date.now() + ': complete')
51 | }
52 | })
53 | },
54 |
55 | back () {
56 | wx.navigateBack()
57 | }
58 | })
59 |
--------------------------------------------------------------------------------
/pages/code/code.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | wetoast.toast({
6 | img: 'data:image/png;base64......'
7 | })
8 |
9 |
10 | wetoast.toast({
11 | title: 'WeToast'
12 | })
13 |
14 |
15 | wetoast.toast({
16 | title: 'WeToast',
17 | duration: 5000
18 | })
19 |
20 |
21 | wetoast.toast({
22 | img: 'data:image/png;base64......'
23 | title: 'WeToast',
24 | success (data) {
25 | console.log(Date.now() + ': success')
26 | },
27 | fail (data) {
28 | console.log(Date.now() + ': fail')
29 | },
30 | complete (data) {
31 | console.log(Date.now() + ': complete')
32 | }
33 | })
34 |
35 |
36 |
37 |
38 |
39 |
45 |
--------------------------------------------------------------------------------
/pages/index/index.js:
--------------------------------------------------------------------------------
1 | // index.js
2 |
3 | // 获取应用实例
4 | let app = getApp()
5 |
6 | Page({
7 | data: {},
8 |
9 | // 仅执行一次，可用于获取、设置数据
10 | onLoad () {
11 | //创建可重复使用的WeToast实例，并附加到this上，通过this.wetoast访问
12 | new app.WeToast()
13 | },
14 |
15 | onImgToast () {
16 | this.wetoast.toast({
17 | img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABuCAMAAADxhdbJAAAAgVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9d3yJTAAAAKnRSTlMA+0IPA2iTLO7YuiXr4/IcCqYkFbKZN/bUiHlbBs7J3L5hTtvDjFFx6Uzm0WRUAAAB20lEQVRo3u3Zy3KCQBCF4R4QFZGL4F0x4jXp93/AVBbmFFMx4MB0pVLz7bv+zdk1OY7jOI7j/C3ROh6RGG/MPBXrBYpZrDcYMrNYz5/ww5Ssi0L+FpM1GAlqOVkWKIkaRiJRw0jgLSW7olCy5o1FahgJhNZqGAmsC7LKn0jWolCmhpFAaa2GkcDBJyswEsGaPxGqYSRwsVbDSOCYkU2BkqhhJEI1jAQm1moYCcz3ZJE3lqwFSqqGkcDMXg0jQW1A9kShcS39MBiJcc0/89w3GgksUGsyY+bzyGQkqFFrFX9ZVQYjMahFyeMmazuSDrWs5IcyNxoJX6m9IUNyMxgJb+gF9evroHEkJjW4cs0lbRiJWQ0WXPPutRgJbOlVM65R24aRGNVgoPV4XjSOBDWD3pzr4mXDSFAzsdd7KmgxEr6ToezImlnWNBIOyFh2Yc16pI+kew38A2uSnT6S7jXwS9YN909HoirqqFiz7pA+GYnaUWfFmXXjXeGF/dYgfeNmqHXvxa1qN+pJ3qKnTtSb0VSmhp5EDZYJ/2LlEQn0UOudtxKpoackanD6sZcsyZKbkqjBTknUoBKpQcAg8Te6i9RgK1KDjWANvTgnIQvURGxUmZPjOI7jOM7/9wkPMejs5BepRwAAAABJRU5ErkJggg==',
18 | imgClassName: 'my_wetoast_img',
19 | imgMode: 'scaleToFill'
20 | })
21 | },
22 |
23 | onTitleToast () {
24 | this.wetoast.toast({
25 | title: 'WeToast',
26 | titleClassName: 'my_wetoast_title'
27 | })
28 | },
29 |
30 | onTimeToast () {
31 | this.wetoast.toast({
32 | title: 'WeToast',
33 | duration: 5000
34 | })
35 | },
36 |
37 | onFullToast () {
38 | this.wetoast.toast({
39 | img: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABuCAMAAADxhdbJAAAAgVBMVEUAAAD///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////9d3yJTAAAAKnRSTlMA+0IPA2iTLO7YuiXr4/IcCqYkFbKZN/bUiHlbBs7J3L5hTtvDjFFx6Uzm0WRUAAAB20lEQVRo3u3Zy3KCQBCF4R4QFZGL4F0x4jXp93/AVBbmFFMx4MB0pVLz7bv+zdk1OY7jOI7j/C3ROh6RGG/MPBXrBYpZrDcYMrNYz5/ww5Ssi0L+FpM1GAlqOVkWKIkaRiJRw0jgLSW7olCy5o1FahgJhNZqGAmsC7LKn0jWolCmhpFAaa2GkcDBJyswEsGaPxGqYSRwsVbDSOCYkU2BkqhhJEI1jAQm1moYCcz3ZJE3lqwFSqqGkcDMXg0jQW1A9kShcS39MBiJcc0/89w3GgksUGsyY+bzyGQkqFFrFX9ZVQYjMahFyeMmazuSDrWs5IcyNxoJX6m9IUNyMxgJb+gF9evroHEkJjW4cs0lbRiJWQ0WXPPutRgJbOlVM65R24aRGNVgoPV4XjSOBDWD3pzr4mXDSFAzsdd7KmgxEr6ToezImlnWNBIOyFh2Yc16pI+kew38A2uSnT6S7jXwS9YN909HoirqqFiz7pA+GYnaUWfFmXXjXeGF/dYgfeNmqHXvxa1qN+pJ3qKnTtSb0VSmhp5EDZYJ/2LlEQn0UOudtxKpoackanD6sZcsyZKbkqjBTknUoBKpQcAg8Te6i9RgK1KDjWANvTgnIQvURGxUmZPjOI7jOM7/9wkPMejs5BepRwAAAABJRU5ErkJggg==',
40 | imgClassName: 'my_wetoast_img',
41 | imgMode: 'scaleToFill',
42 | title: 'WeToast',
43 | titleClassName: 'my_wetoast_title',
44 | success (data) {
45 | console.log(Date.now() + ': success')
46 | },
47 | fail (data) {
48 | console.log(Date.now() + ': fail')
49 | },
50 | complete (data) {
51 | console.log(Date.now() + ': complete')
52 | }
53 | })
54 | },
55 |
56 | onCode (e) {
57 | let type = e.currentTarget.dataset.type
58 | wx.navigateTo({
59 | url: `../code/code?type=${type}`
60 | })
61 | },
62 |
63 | })
64 |
--------------------------------------------------------------------------------
/pages/index/index.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | WeToast 是仿照微信小程序提供的 showToast 功能，提供视觉一致的增强插件，弥补小程序 showToast 功能上的不足（如只能显示success、loading两种icon，且icon不可去除，持续时间最大10秒等）。
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
31 |
32 |
33 |
--------------------------------------------------------------------------------
/src/wetoast.js:
--------------------------------------------------------------------------------
1 | /**
2 | * WeToast by kiinlam
3 | * WeApp Toast add-ons
4 | * 微信小程序toast增强插件
5 | * Github: https://github.com/kiinlam/wetoast
6 | * LICENSE: MIT
7 | */
8 |
9 | function WeToastClass () {
10 |
11 | //构造函数
12 | function WeToast () {
13 | let pages = getCurrentPages()
14 | let curPage = pages[pages.length - 1]
15 | this.__page = curPage
16 | this.__timeout = null
17 |
18 | //附加到page上，方便访问
19 | curPage.wetoast = this
20 |
21 | return this
22 | }
23 |
24 | //切换显示/隐藏
25 | WeToast.prototype.toast = function(data) {
26 | try {
27 | if (!data) {
28 | this.hide()
29 | } else {
30 | this.show(data)
31 | }
32 | } catch (err) {
33 | console.error(err)
34 |
35 | // fail callback
36 | data && typeof data.fail === 'function' && data.fail(data)
37 | } finally {
38 | // complete callback
39 | data && typeof data.complete === 'function' && data.complete(data)
40 | }
41 | }
42 |
43 | //显示
44 | WeToast.prototype.show = function(data) {
45 | let page = this.__page
46 |
47 | clearTimeout(this.__timeout)
48 |
49 | //display需要先设置为block之后，才能执行动画
50 | page.setData({
51 | '__wetoast__.reveal': true
52 | })
53 |
54 | setTimeout(()=>{
55 | let animation = wx.createAnimation()
56 | animation.opacity(1).step()
57 | data.animationData = animation.export()
58 | data.reveal = true
59 | page.setData({
60 | __wetoast__: data
61 | })
62 | },30)
63 |
64 | if (data.duration === 0) {
65 | // success callback after toast showed
66 | setTimeout (() => {
67 | typeof data.success === 'function' && data.success(data)
68 | }, 430)
69 | } else {
70 | this.__timeout = setTimeout(() => {
71 | this.toast()
72 |
73 | // success callback
74 | typeof data.success === 'function' && data.success(data)
75 | }, (data.duration || 1500) + 400)
76 | }
77 |
78 | }
79 |
80 | //隐藏
81 | WeToast.prototype.hide = function() {
82 | let page = this.__page
83 |
84 | clearTimeout(this.__timeout)
85 |
86 | if (!page.data.__wetoast__.reveal) {
87 | return
88 | }
89 |
90 | let animation = wx.createAnimation()
91 | animation.opacity(0).step()
92 | page.setData({
93 | '__wetoast__.animationData': animation.export()
94 | })
95 |
96 | setTimeout(() => {
97 | page.setData({
98 | __wetoast__: {'reveal': false}
99 | })
100 | }, 400)
101 | }
102 |
103 | return new WeToast()
104 | }
105 |
106 | module.exports = {
107 | WeToast: WeToastClass
108 | }
--------------------------------------------------------------------------------
/src/wetoast.wxml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | {{title}}
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/src/wetoast.wxss:
--------------------------------------------------------------------------------
1 | /**toast.wxss**/
2 | .wetoast {
3 | display: none;
4 | }
5 | .wetoast_show {
6 | display: block;
7 | }
8 | .wetoast__mask {
9 | position: fixed;
10 | z-index: 1000;
11 | top: 0;
12 | right: 0;
13 | left: 0;
14 | bottom: 0;
15 | }
16 | .wetoast__bd {
17 | opacity: 0;
18 | display: flex;
19 | flex-direction: column;
20 | position: fixed;
21 | z-index: 5000;
22 | min-width: 8.4em;
23 | min-height: 8.4em;
24 | max-width: 70%;
25 | top: 140px;
26 | left: 50%;
27 | padding: 15px;
28 | box-sizing: border-box;
29 | transform: translateX(-50%);
30 | background: rgba(40, 40, 40, 0.75);
31 | border-radius: 5px;
32 | color: #FFFFFF;
33 | word-wrap: break-word;
34 | word-break: break-all;
35 | align-items: center;
36 | justify-content: space-around;
37 | }
38 | .wetoast__bd__img {
39 | margin-top: 3px;
40 | }
41 | .wetoast__bd__img_desc {
42 | width: 55px;
43 | height: 55px;
44 | vertical-align: middle;
45 | }
46 | .wetoast__bd__title {
47 | margin: 3px 0;
48 | font-size: 1.2em;
49 | }
--------------------------------------------------------------------------------