WeChat Applet
Mini Program Development
Solve the problem of code synchronization execution in small programs
Solve the problem of code synchronization execution in small programs
Jul 02, 2020 am 09:41 AM
When making small programs, do you often encounter these two synchronization problems:
1. When using a for loop, the operation in one loop has not yet ended, and the next loop has already started. If there is no interdependence between loops, the problem should not be big, but if the start of the next loop depends on the result of the previous loop, then there will be problems with this series of operations, such as drawing:
for?(let?index?in?images)?{
??????//每畫一張圖，都要在上一張圖畫結(jié)束才能開始，因?yàn)橐?jì)算畫圖位置
??????ctx.drawImage
}
2 . Call the server interface to access data, download pictures, etc., but the server has not returned the data and the code has continued to execute other codes. This will obviously cause problems.
wx.downloadFile({
??????url:?URL,
??????success(wr)?{
??????//如果其他執(zhí)行代碼在success代碼塊里面，還能保證在成功獲取數(shù)據(jù)后正常執(zhí)行
??????//如果下載功能是共用的，其他操作邏輯肯定就會(huì)抽離出來，這樣就保證不了同步執(zhí)行了。
??????}
});
How to solve it?
In the first case, many solutions on the Internet are to add sync or await, and some add setInterval. I did not choose any of these solutions, and used nested calls.
/**
???*?處理圖片
???*/
??handleOneImage:?function(ctx,?images,?idx)?{
????let?that?=?this;
????let?oneImage?=?images[idx];
????let?pro?=?new?Promise(function(resolve,?reject)?{
??????if?(oneImage?==?undefined)?{
????????//畫圖結(jié)束
????????//執(zhí)行一系列操作
??????}?else?{
????????//成功畫圖結(jié)束，執(zhí)行下一張圖的操作
????????that.drawOneImage(ctx,?oneImage,?that.data.xp).then(isSuccess?=>?{
??????????if?(isSuccess?==?'success')?{
????????????that.handleOneImage(ctx,?images,?idx?+?1);
??????????}
????????});
??????}
????});
????return?pro;
??},
??/**
???*?畫圖片
???*/
??drawOneImage:?function(ctx,?image,?xp)?{
????let?that?=?this;
????//保證獲取圖片信息、畫圖等操作同步進(jìn)行結(jié)束再返回結(jié)果
????let?pro?=?new?Promise(function(resolve,?reject)?{
??????wx.getImageInfo({
????????src:?image,
????????success:?function(imageInfo)?{
??????????let?iWidth?=?imageInfo.width;
??????????let?iHeight?=?imageInfo.height;
??????????let?dWidth?=?(iWidth?*?580)?/?iHeight;
??????????ctx.drawImage(image,?xp,?0,?dWidth,?580);
??????????ctx.stroke();
??????????that.setData({
????????????xp:?that.data.xp?+?dWidth
??????????});
??????????resolve('success');
????????}
??????});
????});
????return?pro;
??},
Second case: In fact, the code to solve the first case is also used to solve the second case. Using Promise, you can study the above code if necessary.
These solutions are also code snippets from a small program of mine. Xiaocheng’s name is Tu Zuo Yao. It is a small and beautiful small program for image synthesis and cutting. Everyone is welcome to try it.
Recommended tutorial: "WeChat Mini Program"
The above is the detailed content of Solve the problem of code synchronization execution in small programs. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Develop WeChat applet using Python
Jun 17, 2023 pm 06:34 PM
With the popularity of mobile Internet technology and smartphones, WeChat has become an indispensable application in people's lives. WeChat mini programs allow people to directly use mini programs to solve some simple needs without downloading and installing applications. This article will introduce how to use Python to develop WeChat applet. 1. Preparation Before using Python to develop WeChat applet, you need to install the relevant Python library. It is recommended to use the two libraries wxpy and itchat here. wxpy is a WeChat machine
Implement card flipping effects in WeChat mini programs
Nov 21, 2023 am 10:55 AM
Implementing card flipping effects in WeChat mini programs In WeChat mini programs, implementing card flipping effects is a common animation effect that can improve user experience and the attractiveness of interface interactions. The following will introduce in detail how to implement the special effect of card flipping in the WeChat applet and provide relevant code examples. First, you need to define two card elements in the page layout file of the mini program, one for displaying the front content and one for displaying the back content. The specific sample code is as follows: <!--index.wxml-->&l
Alipay launched the 'Chinese Character Picking-Rare Characters' mini program to collect and supplement the rare character library
Oct 31, 2023 pm 09:25 PM
According to news from this site on October 31, on May 27 this year, Ant Group announced the launch of the "Chinese Character Picking Project", and recently ushered in new progress: Alipay launched the "Chinese Character Picking-Uncommon Characters" mini program to collect collections from the society Rare characters supplement the rare character library and provide different input experiences for rare characters to help improve the rare character input method in Alipay. Currently, users can enter the "Uncommon Characters" applet by searching for keywords such as "Chinese character pick-up" and "rare characters". In the mini program, users can submit pictures of rare characters that have not been recognized and entered by the system. After confirmation, Alipay engineers will make additional entries into the font library. This website noticed that users can also experience the latest word-splitting input method in the mini program. This input method is designed for rare words with unclear pronunciation. User dismantling
Can small programs use react?
Dec 29, 2022 am 11:06 AM
Mini programs can use react. How to use it: 1. Implement a renderer based on "react-reconciler" and generate a DSL; 2. Create a mini program component to parse and render DSL; 3. Install npm and execute the developer Build npm in the tool; 4. Introduce the package into your own page, and then use the API to complete the development.
How uniapp achieves rapid conversion between mini programs and H5
Oct 20, 2023 pm 02:12 PM
How uniapp can achieve rapid conversion between mini programs and H5 requires specific code examples. In recent years, with the development of the mobile Internet and the popularity of smartphones, mini programs and H5 have become indispensable application forms. As a cross-platform development framework, uniapp can quickly realize the conversion between small programs and H5 based on a set of codes, greatly improving development efficiency. This article will introduce how uniapp can achieve rapid conversion between mini programs and H5, and give specific code examples. 1. Introduction to uniapp unia
Teach you how to use public account template messages in mini programs (with detailed ideas)
Nov 04, 2022 pm 04:53 PM
This article brings you some related issues about WeChat mini programs. It mainly introduces how to use official account template messages in mini programs. Let’s take a look at them together. I hope it will be helpful to everyone.
Tutorial on writing a simple chat program in Python
May 08, 2023 pm 06:37 PM
Implementation idea: Establishing the server side of thread, so as to process the various functions of the chat room. The establishment of the x02 client is much simpler than the server. The function of the client is only to send and receive messages, and to enter specific characters according to specific rules. To achieve the use of different functions, therefore, on the client side, you only need to use two threads, one is dedicated to receiving messages, and the other is dedicated to sending messages. As for why not use one, that is because, only
Geographical positioning and map display using PHP and mini-programs
Jul 04, 2023 pm 04:01 PM
Geolocation positioning and map display of PHP and mini programs Geolocation positioning and map display have become one of the necessary functions in modern technology. With the popularity of mobile devices, people's demand for positioning and map display is also increasing. During the development process, PHP and applets are two common technology choices. This article will introduce you to the implementation method of geographical location positioning and map display in PHP and mini programs, and attach corresponding code examples. 1. Geolocation in PHP In PHP, we can use third-party geolocation
