用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
  • TA的每日心情
    郁闷
    2017-6-29 17:34
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    76

    主题

    104

    帖子

    10万

    金钱

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    0

    优秀版主

    2017-1-11 17:41:38 cyk 管理员 楼主 32718
    本帖最后由 cyk 于 2017-1-11 18:05 编辑

    微信小程序精品插件:toast增强插件,三种弹出样式(适用于1304版本)

    We Toast 是仿照微信小程序提供的 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页面均可使用,无需再次引入
    [AppleScript] 纯文本查看 复制代码
    let {WeToast} = require('src/wetoast.js')    // 返回构造函数,变量名可自定义
    App({
        WeToast    // 后面可以通过app.WeToast访问
    })


    Step2、在项目的app.wxss中引入wetoast.wxss
    [AppleScript] 纯文本查看 复制代码
    @import "src/wetoast.wxss";


    Step3、引入WeToast模板结构,
    方式一,在单独页面使用
    [AppleScript] 纯文本查看 复制代码
    <!-- 文件 index.wxml 中 -->
    <import src="../../src/wetoast.wxml"/>
    <template is="wetoast" data="{{...__wetoast__}}"/>


    方式二,创建公用包含文件,将所有公用模板放在一起
    [AppleScript] 纯文本查看 复制代码
    <!-- 文件 footer.wxml 中 -->
    <import src="src/wetoast.wxml"/>
    <template is="wetoast" data="{{...__wetoast__}}"/>
    <!-- 其他xxoo模板 -->
    <template is="wexxoo" data="{{...wexxoo}}"/>


    然后通过include引入
    [AppleScript] 纯文本查看 复制代码
    <!-- Page文件 index.wxml 底部 -->
    <include src="footer.wxml"/>


    APIWeToast()

    构造函数,返回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参数说明:[td]
    参数类型必填说明
    imgString可选*提示的图片,网络地址或base64
    imgClassNameString自定义图片样式时使用的class
    imgModeString参考小程序image组件mode属性
    titleString可选*提示的内容
    titleClassNameString自定义内容样式时使用的class
    durationNumber提示的持续时间,默认1500毫秒
    successFunction提示即将隐藏时的回调函数
    failFunction调用过程抛出错误时的回调函数
    completeFunction调用结束时的回调函数

    可选表示至少设置 img 或 title 中的一个

    img参数补充说明

    提示的图片设置尺寸为55px * 55px,建议使用原始大小为110px * 110px的图片。使用图片时,优先选择base64形式,保证实时显示。

    title参数补充说明

    提示框的宽度设置了最小宽度为8.4em,最大宽度为屏幕的70%,超过时会换行。

    duration参数补充说明

    当duration设置为0时,将不自动隐藏提示层,直到下次再次调用wetoast.toast(),不传入配置项表示隐藏提示。

    回调函数参数补充说明:

    success、fail、complete执行时均会回传配置参数Object。无论成功或失败,complete都会执行。

    示例
    [AppleScript] 纯文本查看 复制代码
    // 只显示图标,不显示文字
    wetoast.toast({
        img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/cross.png'
    })


    [AppleScript] 纯文本查看 复制代码
    // 只显示文字,不显示图标
    wetoast.toast({
        title: 'WeToast'
    })


    [AppleScript] 纯文本查看 复制代码
    // 显示文字、图标,执行回调函数
    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')
        }
    })


    [AppleScript] 纯文本查看 复制代码
    // 自定义显示持续时间
    wetoast.toast({
        title: 'WeToast',
        duration: 5000
    })


    问答问:为什么做这个插件?

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

    在官方未提供更丰富配置的情况下,有必要在官方UI规范的框架下提供一套功能更实用的备选方案。

    同时我也希望各开发者能够达成共识,在实现自身需求时,尽量以官方UI规范为指导,避免出现各种花样的弹层效果。

    问:是否会出现“串页”问题?

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

    在开发本插件的时候,充分考虑了这一点,采用实例化toast对象并附加到当前的Page对象上,在切换Page后仍然指向上一页的Page对象,不会出现“串页”问题。


    游客,如果您要查看本帖隐藏内容请回复


    本帖子中包含更多资源

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    使用道具 举报 回复
    正需要,支持楼主大人了!
    看看看啊看你
    专注于与个人游戏开发者合作,有产品的朋友联系微信号jim20180688,详聊
    发新帖
    您需要登录后才可以回帖 登录 | 立即注册
    咫尺论坛|小程序开发社区
    X

    扫码添加专属客服即可随时咨询

    还可领取小程序推广攻略