Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use the showToast function of Mini Program". The editor shows you the operation process through an actual case. The method of operation is simple, fast and practical. I hope this article "how to use the showToast function of Mini Program" can help you solve the problem.

Overview of WeToast for WeChat Mini Programs toast enhanced plug-in

WeToast is modelled on the showToast function provided by WeChat Mini Programs, provides visually consistent enhanced plug-ins to make up for the lack of Mini Program showToast functionality (for example, can only display success, loading two kinds of icon, and icon can not be removed, duration up to 10 seconds, etc.).

Preview

Download the WeToast project and open the project root directory with Wechat web developer tool

How to use

The WeTaost plug-in source code is located in the src directory and contains 3 files.

Wetoast.js: script code

Wetoast.wxml: template structure

Wetoast.wxss: Styl

Recommend the solution Step1, introduce wetoast.js into the app.js of the project, and register on Mini Program. All app.js pages of Mini Program can be used without the need to introduce let {WeToast} = require ('src/wetoast.js') / / return constructor. The variable name can be customized by App ({WeToast / / later can be accessed via app.WeToast}) Step2, and wetoast.wxss@import "src/wetoast.wxss" is introduced into the project's app.wxss. Step3, introducing WeToast template structure

Method one, use it on a separate page.

Second, create a common include file and put all the common templates together

And then introduce it through include

APIWeToast ()

Constructor that returns the WeToast instance object, which creates a reference named wetoast on the current Page, which can be accessed through this.wetoast in Page. It is usually called in the onLoad of Page and can be reused.

Example / / create a reusable WeToast instance and attach it to Page. Access new app.WeToast () / / through this.wetoast and create variables to hold let mytoast = new app.WeToast () WeToast.prototype.toast (Object).

Controls the display and hiding of toast, and receives an optional object as a configuration parameter. When no parameters are provided, the toast is hidden.

Object parameter description: parameter type is required to indicate that imgString optional * prompt picture, network address or base64imgClassNameString No Custom Picture style classimgModeString No refer to Mini Program image component mode attribute titleString optional * prompt content titleClassNameString No customize content style duration of classdurationNumber No prompt Does the default 1500 millisecond callback function prompt the callback function failFunction when it is about to be hidden? does the callback function completeFunction when the callback process throws an error? does completeFunction call the callback function at the end?

Optional means to set at least one of the img or title

Supplementary description of img parameters

The size of the prompted image is set to 55px * 55px, and it is recommended to use the original size of 110px * 110px. When using pictures, the base64 form is preferred to ensure real-time display.

Supplementary description of title parameters

The width of the prompt box is set to a minimum width of 8.4em and a maximum width of 70% of the screen.

Supplementary description of duration parameters

When duration is set to 0, the prompt layer is not automatically hidden until the next time wetoast.toast () is called, and no configuration item is passed in to indicate a hidden prompt.

Supplementary instructions for callback function parameters:

The configuration parameter Object is returned when success, fail and complete are executed. Complete executes regardless of success or failure.

Example / / only show icons, not text wetoast.toast ({img: 'https://raw.githubusercontent.com/kiinlam/wetoast/master/images/cross.png'})// only text, not icon wetoast.toast ({title:' WeToast'}) / / display text, icons Execute the callback function 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')}) / / Custom display duration wetoast.toast ({title: 'WeToast', duration: 5000}) Q: how do individual developers experience Mini Program?

A: please refer to this article on how individual developers experience Mini Program. The principle is very simple, as long as you can scan the code into Wechat web developer tools, you can create Mini Program projects, so the question becomes how to become a developer.

The easiest way for an individual to become a developer is to apply for Wechat Subscription account, and then enter the developer tools.

Q: why do you do this plug-in?

A: the showToastAPI provided by WeChat Mini Programs only supports displaying success and loading icons, which is not enough, and in some scenarios, the maximum value of 10 seconds is not enough.

In the absence of a richer configuration, it is necessary to provide a set of more functional options within the framework of the official UI specification.

At the same time, I also hope that developers can reach a consensus to follow the official UI specification as far as possible when realizing their own needs, so as to avoid various kinds of bullet layer effects.

Q: will there be a "cross page" problem?

A: here "string page" means that the code of the previous page is executed on the current page. In the case of a navigate jump, the code is still executing because the page is not closed, and some global operations are brought to the current page.

In the development of this plug-in, fully take this into account, using instantiation of the toast object and attached to the current Page object, after switching Page still points to the previous page of the Page object, there will be no "cross-page" problem.

This is the end of the content about "how to use Mini Program's showToast function". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.