Solution to data initialization failure on the WeChat applet homepage

This article mainly introduces the solution for failed data initialization on the home page of the applet. it is very good and has reference value. if you need it, refer to the next article and the problem description.

When a user enters the applet again after the first time, we usually need to obtain the user's openid or unionid as a unique identifier to communicate with the background data and initialize user information. When we establish a request through a third-party server, the user needs to confirm whether the information is disclosed. 1. we can see from the console that our homepage index has been loaded at the same time as the request, and the initialization data shown in the figure is blank. Whether we write the request information in the app. js onload or index. in js, when we click "OK", the request information is executed in the success method to process the data returned by a third-party server. This lags behind the user's click, it is difficult for us to ask the program to stop and wait for us. Then, we can use other ways to get the program to "stop". let me introduce my solution to the face.

II. basic requirements for solutions

The most basic requirements for the solution are as follows:

1) when we enter the home page, the data is initialized and displayed normally.

2) when the user enters the program for the first time, the user can access the home page normally only by confirming the public information.

III. Solution

My solution is: design a "temporary loading page" to achieve the desired effect. this temporary loading page is similar to the Android welcome page, but when the data loading is complete, or when I enter for the second time, the page will automatically jump to our homepage. The following is the design code section.

Step 1: Create a new page in app. json and name it "welcome ".

"Pages/welcome"

Note that this page should be placed on the home page, that is, the first page for the program to come in.

Step 2: write specific request operations to onload in welcome. js

// Pages/welcome. jsPage ({data :{}, onLoad: function (options) {// The parameter var that = getApp () brought by page initialization options for page jump () try {// first check whether there is any data in the cache that we need to request. if there is no data, we will connect to the server to obtain the data. // The first login is definitely unavailable that. globalData. userInfo = wx. getStorageSync ('userinfo') if (wx. getStorageSync ('userinfo ')! = '') {// If the cache is not empty, that is, data already exists and we do not need to interact with the server anymore, we will jump directly to the homepage wx. switchTab ({url :'.. /index/Index',})} if (value) {// Do something with return value console. log (that. globalData. userInfo) }} catch (e) {// Do something when catch error // when the cache data in the try does not exist, this step is skipped. in this step, we will connect to the server, and obtain the data if (that. globalData. userInfo = '') {wx. login ({success: function (res) {// obtain the user code, forward it to our server, and then interact with the server to obtain the openid var code = res. code wx. getUserInfo ({success: function (userInfo) {var encryptedData = userInfo. encryptedData var iv = userInfo. iv // Our server request url var url = that. apiHost + 'index/login' var userinfo = userInfo. userInfo var username = userinfo. nickName var useravatar = userinfo. avatarUrl var usersex = userinfo. gender wx. request ({url: url, method: 'post', data: {'code': code, 'username': username, 'useravatar ': useravatar, 'usersex ': usersex}, header: {"Content-Type": "application/x-www-form-urlencoded"}, success: function (response) {// after successful data interaction, we write the data returned by the server to the global variables and cache console. log (response. data) // write the global variable that. globalData. userInfo = response. data wx. hideToast () // write the cache wx. setStorage ({key: 'userinfo', data: that. globalData. userInfo, success: function (res) {console. log ("insert success")}, fail: function () {// fail}, complete: function () {// complete}) // after writing, we will jump to the homepage wx. switchTab ({url :'.. /index/Index',})}, failure: function (error) {console. log (error) },}) }}) }}, onReady: function () {// page rendering complete}, onShow: function () {// page display}, onHide: function () {// page hidden}, onUnload: function () {// page closed}, redirect: function () {wx. switchTab ({url :'.. /index/Index ',})}})

As you can see, when we log on for the first time, we will enter our welcome page. after the user confirms the public information, the page will automatically jump to the homepage, and the homepage data will be displayed normally.

During the second entry, the jump will be carried out in onload, and the page will jump without rendering, so the speed is very fast and the test jump is satisfactory, but after all, we will do one thing around the corner. if you have a better method, please share it with us. thank you!

The above is a small Editor to introduce you to the small program home page data initialization failure solution, I hope to help you, if you have any questions, please leave a message, the editor will reply to you in time!

For more articles on how to solve initialization failures on the homepage of mini programs, please follow the PHP Chinese network!