小程序的showToast功能如何使用

這篇文章主要介紹“小程序的showToast功能如何使用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“小程序的showToast功能如何使用”文章能幫助大家解決問題。

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: 樣式

推薦方案

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

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ú)頁(yè)面使用

<!-- 文件 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。

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

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

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

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

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)小程序的方法。原理很簡(jiǎn)單，只要能掃碼進(jìn)入微信web開發(fā)者工具，就能創(chuàng)建小程序項(xiàng)目，所以問題變?yōu)槿绾纬蔀殚_發(fā)者。

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

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

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

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

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

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

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

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

關(guān)于“小程序的showToast功能如何使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。