Mini Program iconfont icon problem and page loading problem

1. When taking over an old project, the customer reported that when they clicked on the product details link forwarded by a friend, a blank space appeared after entering

After consulting the code, it is found that the user token must be carried when requesting parameters in the details page interface, otherwise it cannot be returned.

Everyone knows this parameter. After the user logs in, every request interface will bring this parameter, and this interface requires the user to log in before requesting, so after consideration, I added a judgment: check whether the user is logged in or not. Request the interface after logging in, and request the interface directly after logging in:

    However, the previously encapsulated doLogin method, after obtaining user authorization, directly wx.navigateBack(); After returning, it does not carry the latest token to re-initiate the request. It is still the interface of the original unsuccessful request. Now there are two ways to consider, first The first method is asynchronous, but the user login authorization method does not return true or false and needs to be changed; the second method is authorized to return to the details page, and then resend the interface request. Note:

You do not need to refresh functions written in the onLoad   inside

The function that needs to be refreshed is written in onShow

So the resending request is in onShow:

In this way, if you have not logged in, go to the authorization page, and then return to the page after authorization, and then resend the request; repeat the request for user authorization if you are not logged in and not authorized; the logic will be smooth, there will be no blanks

 

2. Small program iconfont icon problem mark

I took over the company’s small program project. The icon icon uses Alibaba’s iconfont vector icon library. Because there is no previous icon library account, there is only an iconfont.wxss file under the utils folder in the small program, so how to analyze which icons are in the local icon? , I summarize as follows:

1. The url in @font-face, copy the selected link (you can see from the link, the resource is placed on the CDN) to the browser to open

2. Paste the link in the browser and download eot

3. Open the Baidu font editor (  http://fontstore.baidu.com/static/editor  ), drag the eot file into it, and you can see all the icons in the entire icon warehouse

               

Another question is how to add new icons. I think the easiest way is to create a new icon library project on iconfont.

1. First select the material you need from the Alibaba vector icon library , and download it locally

2. The downloaded file format is as follows, select iconfont.css among them

 

3. Copy the selected css to your applet project, and rename it to iconfont.wxss according to the text format of the applet. To use the icon in the entire project, place it in the project’s common style file, as shown in the figure below:

4. Go back to the Alibaba vector icon library and select unicode in the project that just downloaded the icon and view the online code as shown below

5. Copy the generated online code to replace the top area in iconfont.wxss as shown below:

6. There is already an iconfont.css in the project. I did not consider changing the original one after adding it. I built another iconfont.css to distinguish it.

7. Remember to import into the project, import public style files into app.wxss, and import font styles into public style files respectively

8. After importing, it can be used in the page. Refer to the figure in wxss for the writing method. The writing method is <text class="iconfont-icontuichu"></text>

下图为<text class="iconfont-icon-haoping"></text>

Information reviewed ( https://www.jianshu.com/p/8e910db5d920 )

Guess you like

Origin blog.csdn.net/EasyTure/article/details/107539350