注冊

仿照微信小程序提供的 showToast 功能,小程序視覺一致的增強(qiáng)插件

2020-09-27
導(dǎo)讀:公告 微信小程序現(xiàn)已在框架升級了 showToast API,增加了更多自定義功能,推薦使用。本倉庫停止更新。需要交流可提Issue,不便之處請海涵。 wx.showToast API地址:https://mp.weixin.qq.com/debu...

 

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)目根目錄

仿照微信小程序提供的 showToast 功能,小程序視覺一致的增強(qiáng)插件

如何使用

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

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

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

仿照微信小程序提供的 showToast 功能,小程序視覺一致的增強(qiá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í)例對象,該操作會在當(dāng)前Page上創(chuàng)建一個名為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的顯示、隱藏,接收一個可選的對象作為配置參數(shù)。不提供參數(shù)時(shí),表示隱藏toast。

Object參數(shù)說明:
參數(shù) 類型 必填 說明
img String 可選* 提示的圖片,網(wǎng)絡(luò)地址或base64
imgClassName String 自定義圖片樣式時(shí)使用的class
imgMode String 參考小程序image組件mode屬性
title String 可選* 提示的內(nèi)容
titleClassName String 自定義內(nèi)容樣式時(shí)使用的class
duration Number 提示的持續(xù)時(shí)間,默認(rèn)1500毫秒
success Function 提示即將隱藏時(shí)的回調(diào)函數(shù)
fail Function 調(diào)用過程拋出錯誤時(shí)的回調(diào)函數(shù)
complete Function 調(diào)用結(jié)束時(shí)的回調(diào)函數(shù)

可選表示至少設(shè)置 imgtitle 中的一個

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

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

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

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

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

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

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

success、failcomplete執(zhí)行時(shí)均會回傳配置參數(shù)Object。無論成功或失敗,complete都會執(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
})

問答

問:個人開發(fā)者怎么體驗(yàn)小程序?

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

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

問:為什么做這個插件?

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

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

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

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

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

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

TODO

  • 增加預(yù)定義ICON
  • 增加可自定義動畫功能
更多小程序開發(fā)教程入門關(guān)注Hi小程序。
重磅推薦:小程序開店目錄

第一部分:小商店是什么

第二部分:如何開通一個小商店

第三部分:如何登錄小商店

第四部分:開店任務(wù)常見問題

第五部分:小商店可以賣什么

第六部分:HiShop小程序特色功能

第七部分:小程序直播

第八部分:小程序收貨/物流

第九部分:小程序怎么結(jié)算

第十部分:小程序客服

第十一部分:電商創(chuàng)業(yè)

第十二部分:小程序游戲開發(fā)