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

概述

WeToast 是仿照微信小程序提供的 showToast 功能，提供視覺一致的增強插件，彌補小程序showToast功能上的不足（如只能顯示success、loading兩種icon，且icon不可去除，持續(xù)時間最大10秒等）。

預覽

下載WeToast項目，用微信web開發(fā)者工具打開項目根目錄

如何使用

WeTaost插件源碼位于src目錄下，包含3個文件。

• wetoast.js: 腳本代碼
• wetoast.wxml: 模板結構
• wetoast.wxss: 樣式

使用時只需要加入以上3個文件即可，使用方法可參考本項目示范。

推薦方案

Step1、在項目的app.js中引入wetoast.js，并注冊到小程序上，小程序所有Page頁面均可使用，無需再次引入

let {WeToast} = require('src/wetoast.js')    // 返回構造函數(shù)，變量名可自定義
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__}}"/>

方式二，創(chuàng)建公用包含文件，將所有公用模板放在一起

<!-- 文件 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()

構造函數(shù)，返回WeToast實例對象，該操作會在當前Page上創(chuàng)建一個名為wetoast的引用，在Page中可通過this.wetoast訪問。通常在Page的onLoad中調用，可重復使用。

示例

// 創(chuàng)建可重復使用的WeToast實例，并附加到Page上，通過this.wetoast訪問
new app.WeToast()
// 也可創(chuàng)建變量來保存
let mytoast = new app.WeToast()

WeToast.prototype.toast(Object)

控制toast的顯示、隱藏，接收一個可選的對象作為配置參數(shù)。不提供參數(shù)時，表示隱藏toast。

Object參數(shù)說明：

可選表示至少設置 img 或 title 中的一個

img參數(shù)補充說明

提示的圖片設置尺寸為55px * 55px，建議使用原始大小為110px * 110px的圖片。使用圖片時，優(yōu)先選擇base64形式，保證實時顯示。

title參數(shù)補充說明

提示框的寬度設置了最小寬度為8.4em，最大寬度為屏幕的70%，超過時會換行。

duration參數(shù)補充說明

當duration設置為0時，將不自動隱藏提示層，直到下次再次調用wetoast.toast()，不傳入配置項表示隱藏提示。

回調函數(shù)參數(shù)補充說明：

success、fail、complete執(zhí)行時均會回傳配置參數(shù)Object。無論成功或失敗，complete都會執(zhí)行。

示例

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

// 只顯示文字，不顯示圖標
wetoast.toast({
    title: 'WeToast'
})

// 顯示文字、圖標，執(zhí)行回調函數(shù)
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')
    }
})

// 自定義顯示持續(xù)時間
wetoast.toast({
    title: 'WeToast',
    duration: 5000
})

問答

問：個人開發(fā)者怎么體驗小程序？

答：可參考此文個人開發(fā)者體驗小程序的方法。原理很簡單，只要能掃碼進入微信web開發(fā)者工具，就能創(chuàng)建小程序項目，所以問題變?yōu)槿绾纬蔀殚_發(fā)者。

個人成為開發(fā)者最簡單的方式就是申請微信訂閱號，完成后即可進入開發(fā)者工具。

問：為什么做這個插件？

答：微信小程序提供的showToastAPI目前僅支持顯示success、loading兩種圖標，不夠用，且在某些場景下，最大值10秒也不夠用。

在官方未提供更豐富配置的情況下，有必要在官方UI規(guī)范的框架下提供一套功能更實用的備選方案。

同時我也希望各開發(fā)者能夠達成共識，在實現(xiàn)自身需求時，盡量以官方UI規(guī)范為指導，避免出現(xiàn)各種花樣的彈層效果。

問：是否會出現(xiàn)“串頁”問題？

答：此處“串頁”是指上一頁的代碼在當前頁執(zhí)行。在navigate跳轉的情況下，由于頁面不是被關閉，因此代碼還在執(zhí)行，一些涉及全局的操作會被帶入當前頁。

在開發(fā)本插件的時候，充分考慮了這一點，采用實例化toast對象并附加到當前的Page對象上，在切換Page后仍然指向上一頁的Page對象，不會出現(xiàn)“串頁”問題。

TODO

• 增加預定義ICON
• 增加可自定義動畫功能