Record the uni-app development of WeChat applets, including iconfont not displayed, v-if slot not valid, pdf online preview, etc.

project instruction

The project adopts the uni-app + uView framework, a set of codes, and publishes both APP and WeChat applets.
Since it was developed in HBuilderX in the early stage, when the development was almost done, when the WeChat developer tool was running, I found that I stepped on a lot of pitfalls for no reason! I will record it here.

1. The iconfont icon is not displayed

Reference link: https://blog.csdn.net/qq812457115/article/details/126160834

Two, v-if does not work on slots

During development something v-ifhas been not working, no matter what the boolean is trueor falseis not rendered.

After inductive discovery,在插槽slot上使用的v-if都不会生效！！！

For example: the following code will not render all the time,

just change it to the following code:

3. The styles defined on the uView component do not take effect

I ran the code in the WeChat developer tool and found that the style is very different from the style on H5 and APP.

究其原因是在uView组件上定义的class和style都不生效！！！Because the WeChat applet has it “样式隔离”! ! !

There are 2 solutions:

1. Nest a layer of view outside the uView component, and add a class to the outer layer of view

   Change from the following code
   to this:
   

2. Add contact style isolation properties to uView components
   

   options: {
         
         
   	styleIsolation: 'shared' // 解除样式隔离
   },
   

   Although the class can take effect after the style isolation is lifted, its dom structure will still be different from the original one, so you should pay attention to whether the dom structure is correct when writing the class.

4. PDF online preview solution

The project involves online preview of PDF and uses pdf.jsa plug-in.

Official website download address: http://mozilla.github.io/pdf.js/getting_started/

The downloaded plug-in structure is as follows:

If you do not need to be compatible with WeChat applets, but only for APP/H5, you can put the hybrid directory at the root directory level of the project. When referencing, directly use the path web-viewto jump to the local /hybrid/html/web/viewer.html, like this:

If you want to be compatible with WeChat applets, using the web-view to jump to the local path will not work.

The applet can only jump to https+域名the path address using web-view, and the redirected domain name needs to be configured in the applet background development management -> development settings -> business domain name.

So the steps are as follows:

1. Deploy the entire pdf.js plugin under your own server, you can use nginx to deploy it, as long as https://域名/hybrid/html/web/viewer.htmlit can be accessed

2. Modify the web-view jump path to the address deployed by the server in the previous step:
   

3. Configure the business domain name in the applet background development management -> development settings -> business domain name. See the official description for the specific configuration.
   
   Then you can preview the pdf file on the WeChat applet, the effect is as follows: