All about Loading in WeChat Mini-Program
It’s easy to just let the user wait for the content to load. But if they don’t see something happening soon, they can also just close your application and move on.
In this article, we will explore the different ways that we can handle loading in WeChat mini-program.
Default Loading
WeChat mini-program provides a default loading spinner. If you don’t need anything fancy, just a message to the user saying, “hey, something is loading here, please don’t go”
Show the spinner before asynchronous action
wx.showLoading({title: "Loading..."})
When the asynchronous action is completed, you can hide the spinner
wx.hideLoading()
A common pattern that I utilize is the javascript’s try and catch syntax
wx.showLoading({title: "Loading..."});
try {
// Some async action, like a request, note that try and catch works better with async and await syntax} catch(error) { // Handle the error that occur
} finally {// finally executes no matter if the code in try block succeed or fail, so we don't have a spinner that's spinning forever
wx.hideLoading();
}
Official Doc: https://developers.weixin.qq.com/miniprogram/dev/api/ui/interaction/wx.showLoading.html
Pull down to Refresh
Pull down to refresh is a functionality for user to refresh the page without reloading the entire app.
This is common for pages that have data changes often, e.g.
- Order status page
- Recommendation list
- Reservation list
In order to do this, here are the steps:
- Set
enablePullDownRefreshtotruein either app.json or individual page .json file (app.json applies the change to the whole app) - In the page’s js file, add
onPullDownRefresh()on the same level where you usually add the lifecycle callback - Within
onPullDownRefresh(), execute the methods to fetch new data or whatever you want to do - After the asynchronous action is completed, don’t forget to execute
wx.stopPullDownRefresh()Or else, the dots on the top won’t go away
Official Doc:
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onPullDownRefresh
Lazy Load Image
What if you want to show a placeholder image before your actual image loads?
In this case, you can create a component that loads your image.
The image tag of WeChat mini-program has a method bindload It’s a callback that’s triggered when an image is loaded
So the idea is that you show the placeholder image before bindload is triggered. And show the actual image.
Important Note: use opacity to hide element instead of wx:if or else the bindload will not trigger
Full example here:
Generate Skeleton
Skeleton is not referring to your skeletons in your closet. It’s a way to show something on the screen instead of a blank screen.
The WeChat Devtool provides a secret button to generate a skeleton file. It looks at the current styles of the page and generates a skeleton version of it.
- Click the generate skeleton file
2. It generates two files for that page
3. Include the skeleton file in or page wxml
<import src="index.skeleton.wxml"/><template is="skeleton" wx:if="{{loading}}" /><block wx:if="{{!loading}}">// Your main page's content
</block>
Although the generate skeleton file might not be perfect, but it will be a quick way to make your app load nicer.
Infinite Scroll
If you don’t know about infinite scroll, it’s the effect that you can scroll forever on a page. Some might argue it’s the reason why some social media is so addictive.
The technical advantage of infinite scroll is that is will reduce the initial load of the application while provides an intuitive way for user to gather more information.
To achieve this, you will need backend support as well.
The standard for most backend API pagination is usually adding page and limit param to the request
limit is the value that indicates the number of entries should be returned by the API.
page is the value that indicates from which increment it should load.
On the frontend, you can use onReachBottom() to trigger the request to the API.
And every time the request has successfully return result, you will concatenate those results to the local data.
You will update the local page value for the next request.
Page({
data: {
page: 1,
dataToDisplay: [] }, onReachBottom() { this.loadData();
},
async loadData() {
const { page } = this.data;
// Make request with page value
// Concatenate result with the current dataToDisplay
// Update page with +1 increment }})
Official Doc:
https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#onreachbottom
Other Resources:
If you just want to practice with some free API, here a list of them:
Otherwise, if you’re looking to invest in yourself to learn more about WeChat mini-program or project management, please visit www.shanghaicoders.com
