WeToast for 微信小程式 toast增強外掛

Github:https://github.com/kiinlam/wetoast

概述

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)開啟專案根目錄

如何使用

WeTaost外掛原始碼位於src目錄下，包含3個檔案。

• wetoast.js: 指令碼程式碼
• wetoast.wxml: 模板結構
• wetoast.wxss: 樣式

使用時只需要加入以上3個檔案即可，使用方法可參考本專案示範。

推薦方案 Step1、在專案的app.js中引入wetoast.js，並註冊到小程式上，小程式所有Page頁面均可使用，無需再次引入

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

方式二，建立公用包含檔案，將所有公用模板放在一起

<!-- 檔案 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()

建構函式，返回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引數說明：

引數型別必填說明

·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都會執行。

示例

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

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

// 顯示文字、圖示，執行回撥函式
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')
    }
})

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

問答 問：個人開發者怎麼體驗小程式？

答：可參考此文個人開發者體驗小程式的方法。原理很簡單，只要能掃碼進入微信web開發者工具，就能建立小程式專案，所以問題變為如何成為開發者。

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

問：為什麼做這個外掛？

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

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

同時我也希望各開發者能夠達成共識，在實現自身需求時，儘量以官方UI規範為指導，避免出現各種花樣的彈層效果。

問：是否會出現“串頁”問題？

答：此處“串頁”是指上一頁的程式碼在當前頁執行。在navigate跳轉的情況下，由於頁面不是被關閉，因此程式碼還在執行，一些涉及全域性的操作會被帶入當前頁。

在開發本外掛的時候，充分考慮了這一點，採用例項化toast物件並附加到當前的Page物件上，在切換Page後仍然指向上一頁的Page物件，不會出現“串頁”問題。

TODO

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

License

The MIT License

請自由地享受和參與開源

貢獻

如果你有好的意見或建議，歡迎給我提issue或pull request。