WeToast for 微信小程序 toast增强插件
===
## 概述
[WeToast](https://github.com/kiinlam/wetoast) 是仿照微信小程序提供的 `showToast` 功能,提供视觉一致的增强插件,弥补小程序`showToast`功能上的不足(如只能显示`success`、`loading`两种icon,且icon不可去除,持续时间最大10秒等)。
## 预览
[下载WeToast项目](https://github.com/kiinlam/wetoast/archive/master.zip),用[微信web开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)打开项目根目录
<img src="https://raw.githubusercontent.com/kiinlam/wetoast/master/images/demo.png" alt="demo capture" />
## 如何使用
WeTaost插件源码位于`src`目录下,包含3个文件。
- wetoast.js: 脚本代码
- wetoast.wxml: 模板结构
- wetoast.wxss: 样式
使用时只需要加入以上3个文件即可,使用方法可参考本项目示范。
#### 推荐方案
##### Step1、在项目的`app.js`中引入`wetoast.js`,并注册到小程序上,小程序所有Page页面均可使用,无需再次引入
```javascript
let {WeToast} = require('src/wetoast.js') // 返回构造函数,变量名可自定义
App({
WeToast // 后面可以通过app.WeToast访问
})
```
##### Step2、在项目的`app.wxss`中引入`wetoast.wxss`
```css
@import "src/wetoast.wxss";
```
##### Step3、引入WeToast模板结构,
*方式一,在单独页面使用*
```html
<!-- 文件 index.wxml 中 -->
<import src="../../src/wetoast.wxml"/>
<template is="wetoast" data="{{...__wetoast__}}"/>
```
*方式二,创建公用包含文件,将所有公用模板放在一起*
```html
<!-- 文件 footer.wxml 中 -->
<import src="src/wetoast.wxml"/>
<template is="wetoast" data="{{...__wetoast__}}"/>
<!-- 其他xxoo模板 -->
<template is="wexxoo" data="{{...wexxoo}}"/>
```
*然后通过`include`引入*
```html
<!-- Page文件 index.wxml 底部 -->
<include src="footer.wxml"/>
```
## API
#### WeToast()
构造函数,返回WeToast实例对象,该操作会在当前Page上创建一个名为`wetoast`的引用,在Page中可通过`this.wetoast`访问。通常在Page的`onLoad`中调用,可重复使用。
###### 示例
```javascript
// 创建可重复使用的WeToast实例,并附加到Page上,通过this.wetoast访问
new app.WeToast()
// 也可创建变量来保存
let mytoast = new app.WeToast()
```
#### WeToast.prototype.toast(Object)
控制toast的显示、隐藏,接收一个可选的对象作为配置参数。不提供参数时,表示隐藏toast。
###### Object参数说明:
| 参数 | 类型 | 必填 | 说明 |
| ------------- | ------------- | ----- | ---------------------------- |
| img | String | 可选* | 提示的图片,网络地址或base64 |
| imgClassName | String | 否 | 自定义图片样式时使用的class |
| imgMode | String | 否 | 参考小程序image组件mode属性 |
| title | String | 可选* | 提示的内容 |
| titleClassName| String | 否 | 自定义内容样式时使用的class |
| duration | Number | 否 | 提示的持续时间,默认1500毫秒 |
| success | Function | 否 | 提示即将隐藏时的回调函数 |
| fail | Function | 否 | 调用过程抛出错误时的回调函数 |
| complete | Function | 否 | 调用结束时的回调函数 |
*可选表示至少设置 `img` 或 `title` 中的一个*
###### img参数补充说明
提示的图片设置尺寸为55px * 55px,建议使用原始大小为110px * 110px的图片。使用图片时,优先选择base64形式,保证实时显示。
###### title参数补充说明
提示框的宽度设置了最小宽度为8.4em,最大宽度为屏幕的70%,超过时会换行。
###### duration参数补充说明
当`duration`设置为`0`时,将不自动隐藏提示层,直到下次再次调用`wetoast.toast()`,不传入配置项表示隐藏提示。
###### 回调函数参数补充说明:
`success`、`fail`、`complete`执行时均会回传配置参数`Object`。无论成功或失败,`complete`都会执行。
###### 示例
```javascript
// 只显示图标,不显示文字
wetoast.toast({
img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/cross.png'
})
```
```javascript
// 只显示文字,不显示图标
wetoast.toast({
title: 'WeToast'
})
```
```javascript
// 显示文字、图标,执行回调函数
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')
}
})
```
```javascript
// 自定义显示持续时间
wetoast.toast({
title: 'WeToast',
duration: 5000
})
```
## 问答
##### 问:个人开发者怎么体验小程序?
答:可参考此文[个人开发者体验小程序的方法](https://sso.ifanr.com/trochili/thread/11856/)。原理很简单,只要能扫码进入微信web开发者工具,就能创建小程序项目,所以问题变为如何成为开发者。
个人成为开发者最简单的方式就是申请微信订阅号,完成后即可进入开发者工具。
##### 问:为什么做这个插件?
答:微信小程序提供的`showToast`API目前仅支持显示`success`、`loading`两种图标,不够用,且在某些场景下,最大值10秒也不够用。
在官方未提供更丰富配置的情况下,有必要在官方UI规范的框架下提供一套功能更实用的备选方案。
同时我也希望各开发者能够达成共识,在实现自身需求时,尽量以官方UI规范为指导,避免出现各种花样的弹层效果。
##### 问:是否会出现“串页”问题?
答:此处“串页”是指上一页的代码在当前页执行。在navigate跳转的情况下,由于页面不是被关闭,因此代码还在执行,一些涉及全局的操作会被带入当前页。
在开发本插件的时候,充分考虑了这一点,采用实例化toast对象并附加到当前的Page对象上,在切换Page后仍然指向上一页的Page对象,不会出现“串页”问题。
## TODO
- 增加预定义ICON
- 增加可自定义动画功能
## License
The MIT License(http://opensource.org/licenses/MIT)
请自由地享受和参与开源
## 贡献
如果你有好的意见或建议,欢迎给我提issue或pull request。
没有合适的资源?快使用搜索试试~ 我知道了~
微信小程序微商城示例模板demo
共188个文件
png:110个
js:29个
wxml:17个
5星 · 超过95%的资源 需积分: 50 40 下载量 181 浏览量
2017-07-18
20:59:44
上传
评论 4
收藏 742KB ZIP 举报
温馨提示
微信小程序微商城示例模板demo.微信小程序微商城示例模板demo.微信小程序微商城示例模板demo
资源推荐
资源详情
资源评论
收起资源包目录
微信小程序微商城示例模板demo (188个子文件)
.gitignore 177B
regenerator-runtime.js 23KB
index.js 20KB
then.js 14KB
index.js 12KB
amap-wx.js 8KB
index.js 7KB
es6-promise.min.js 6KB
index.js 6KB
index.js 5KB
co.js 5KB
bmap-wx.min.js 5KB
map.js 3KB
index.js 3KB
index.js 2KB
api.js 1KB
index.js 1KB
index.js 1KB
gulpfile.js 1KB
request.js 1KB
index.js 902B
promisify.js 524B
co-loader.js 366B
app.js 314B
index.js 175B
index.js 165B
dev.js 28B
pro.js 27B
index.js 0B
modal.js 0B
app.json 1KB
package.json 500B
index.json 77B
index.json 46B
index.json 46B
index.json 46B
index.json 43B
index.json 43B
index.json 43B
index.json 43B
index.json 40B
README.md 6KB
README.md 3KB
README.md 0B
goods-category.png 127KB
goods-detail.png 76KB
center_bg@2x.png 72KB
complete_img_receiptsuccess@2x.png 58KB
user-center.png 55KB
complete_img_paysuccess@2x.png 54KB
order_icon_add.png 16KB
order_img_weixin.png 16KB
complete_img_evaluationsuccess@2x.png 14KB
avatar_girl.png 10KB
avatar_boy.png 10KB
avatar_beiyun.png 8KB
avatar_huaiyun.png 7KB
avatar_moren_daishu.png 7KB
center_picture_location@2x.png 7KB
avatar_yichusheng.png 6KB
center_picture_search@2x.png 6KB
center_picture_mendian.png 6KB
ic_store_mapstore@2x.png 4KB
center_picture_coupons@2x.png 4KB
center_picture_cart@2x.png 4KB
mmhtab_icon_me_n@2x.png 3KB
ic_store_phone@2x.png 3KB
ic_store_map@2x.png 2KB
mmhtab_icon_fl_n@2x.png 2KB
mmhtab_icon_fl_s@2x.png 2KB
mmhtab_icon_mmh_n@2x.png 2KB
mmhtab_icon_me_s@2x.png 2KB
mmhtab_icon_gwc_n@2x.png 2KB
icon_level_4.png 2KB
order_bg_xinfeng.png 2KB
icon_level_2.png 2KB
cart_icon_sq@2x.png 2KB
ic_position_dark@2x.png 2KB
icon_level_3.png 2KB
mmhtab_icon_gwc_s@2x.png 2KB
order_img_zhifubao.png 2KB
order_img_yinlian.png 2KB
icon_level_1.png 2KB
cart_icon_xj@2x.png 2KB
icon_level_5.png 2KB
center_icon_bean@2x.png 2KB
center_icon_Customer-service@2x.png 2KB
ic_sight_gray.png 2KB
mmhtab_icon_mmh_s@2x.png 2KB
pro_icon_lift@2x.png 2KB
ic_position_red.png 2KB
pro_icon_shop@2x.png 2KB
cart_icon_sx@2x.png 2KB
contact_icon_smallcall.png 2KB
ic_coupon_word_xl.png 2KB
ic_star_white@2x.png 2KB
ic_sight_red.png 2KB
order_free_chat_typing@2x.png 2KB
logistics_icon_point.png 2KB
pro_icon_return@2x.png 2KB
共 188 条
- 1
- 2
资源评论
- qq_356112152019-06-19还行,一般般吧
- 顛沛流離的小時光2017-11-29很不错,非常有学习价值
A無痕A
- 粉丝: 9
- 资源: 99
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- MQTT协议发温湿度到阿里云平台支持下发控制LED灯与继电器对接阿里云APP
- STM32F103ZET6+OV2640+TF卡存储
- 操作系统考试要点最新版本.doc
- 操作系统试题B卷.doc
- 移动机器人自主路径规划之RRT算法MATLAB实现代码
- Python使用 LSTM循环神经网络预测风力发电厂中风机产生的功率项目源码+数据集.zip
- 深入探究文件I/O-I.MX6U嵌入式Linux C应用编程学习笔记基于正点原子阿尔法开发板
- MQTT协议发温湿度电压数据到ONENET支持下发控制LED灯与继电器(新平台)
- 平抑风电波动的电-氢混合储能容量优化配置(注释完全,可直接运行)(文档加Matlab源码)
- Gigabyte.RX560.4g 1750mhz bios GAMING OC
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功