WeToast for 微信小程序 toast增強(qiáng)插件

概述

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

預(yù)覽

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

如何使用

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

• wetoast.js: 腳本代碼
• wetoast.wxml: 模板結(jié)構(gòu)
• wetoast.wxss: 樣式

使用時(shí)只需要加入以上3個(gè)文件即可，使用方法可參考本項(xiàng)目示范。

推薦方案

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

let {WeToast} = require('src/wetoast.js')    // 返回構(gòu)造函數(shù)，變量名可自定義
App({
	WeToast    // 后面可以通過app.WeToast訪問
})

Step2、在項(xiàng)目的app.wxss中引入wetoast.wxss

@import "src/wetoast.wxss";

Step3、引入WeToast模板結(jié)構(gòu)，

方式一，在單獨(dú)頁面使用

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

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

示例

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

WeToast.prototype.toast(Object)

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

Object參數(shù)說明：

可選表示至少設(shè)置 img 或 title 中的一個(gè)

img參數(shù)補(bǔ)充說明

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

title參數(shù)補(bǔ)充說明

提示框的寬度設(shè)置了最小寬度為8.4em，最大寬度為屏幕的70%，超過時(shí)會(huì)換行。

duration參數(shù)補(bǔ)充說明

當(dāng)duration設(shè)置為0時(shí)，將不自動(dòng)隱藏提示層，直到下次再次調(diào)用wetoast.toast()，不傳入配置項(xiàng)表示隱藏提示。

回調(diào)函數(shù)參數(shù)補(bǔ)充說明：

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

示例

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

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

// 顯示文字、圖標(biāo)，執(zhí)行回調(diào)函數(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ù)時(shí)間
wetoast.toast({
    title: 'WeToast',
    duration: 5000
})

問答

問：個(gè)人開發(fā)者怎么體驗(yàn)小程序？

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

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

問：為什么做這個(gè)插件？

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

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

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

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

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

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

TODO

• 增加預(yù)定義ICON
• 增加可自定義動(dòng)畫功能