WeChat mini program interview questions you must know and know

1 Please talk about the role of the main directories and files of the WeChat applet?

• project.config.json project configuration file, the most commonly used one is to configure whether to enable https verification;

• App.js sets some Global basic data, etc.;

• App.json bottom tab, title bar and routing settings;

• App.wxss public style, introduced iconfont, etc.;

• pages contains specific pages;

• index.json (configure the current page title and introduce components, etc.);

• index.wxml (page structure);

• index.wxss (page style sheet);

• index.js (page logic, request and data processing, etc.);

2 Please talk about the similarities and differences between wxml and standard html?

• are used to describe the structure of the page;
• are composed of tags, attributes, etc.;
• tag names are different, and there are fewer mini program tags. There are more single tags;
• There are some more attributes like wx:if and expressions like {{ }}
• WXML can only be previewed in the WeChat applet developer tools, while HTML Can be previewed in the browser
• The component encapsulation is different, WXML re-encapsulates the component,
• The applet runs in JS Core, there is no DOM tree and window object, and it cannot be used in the applet window object and document object.

3 Please talk about the similarities and differences between WXSS and CSS?

• are used to describe the appearance of the page;

• WXSS has most of the features of CSS, and has also made some expansions and modifications;

• WXSS has added a new size unit. WXSS supports the new size unit rpx at the bottom layer;

• WXSS only supports some CSS selectors;

• WXSS provides global styles and local styles

4 How do you encapsulate the data request of the WeChat applet?

• Create the utils directory, api.js file and apiConfig.js file in the root directory;

• Encapsulate the basic get in apiConfig.js , post, put, upload and other request methods, set the request body, bring token and exception handling, etc.;

• Introduce the request method encapsulated by apiConfig.js into the api, and based on the page data For the requested urls, set the corresponding method and export it;

• Import it in a specific page;

5 What are the transfers between mini program pages? Data method?

• Use global variables to implement data transfer

• When page jumps or redirects, use url with parameters to transfer data

• Use component template template to pass parameters

• Use cache to pass parameters

• Use database to pass data

6 Please talk about the similarities and differences between the two-way binding of mini programs and vue?

It’s roughly the same, but the direct this.data attribute of the applet cannot be synchronized to the view, and the this.setData() method must be called!

7 Please talk about the life cycle function of the mini program?

• onLoad() is triggered when the page is loaded. It will only be called once to obtain the parameters in the current page path.

• onShow() Triggered when the page is displayed/switched to the foreground, generally used to send data requests;

• onReady() when the initial rendering of the page is completed Triggered, it will only be called once, which means that the page can interact with the view layer.

• onHide() Triggered when the page is hidden/switched to the background, such as the bottom tab is switched to other pages or the applet is switched to the background, etc.

• onUnload() Triggered when the page is unloaded, such as when redirectTo or navigateBack to other pages.

8 Briefly describe the principle of WeChat mini program?

• A mini program is essentially a single-page application. All page rendering and event processing are performed within one page, but various native interfaces can be called through the WeChat client;

• Its architecture is a data-driven architecture model. Its UI and data are separated. All page updates need to be achieved through changes to the data;

• Technically speaking, it is similar to the existing front-end development, using three technologies: JavaScript, WXML, and WXSS for development;

• The functions can be divided into webview and appService;

• webview is used to display the UI, and appService is used to handle business logic, data and interface calls;

• Two parts Part of it runs in two processes, communicating through the system layer JSBridge to implement UI rendering, event processing, etc.

9 Please talk about the comparison between native development applets, wepy, and mpvue?

• Personally think that if it is a new project and there is no migration of the old h5 project, then consider using small programs for native development. The advantage is that compared to third-party frameworks, there are fewer pitfalls.

• If there are old h5 projects that are developed with vue or there are h5 projects that also require small program development, it is more suitable for wepy or mpvue to do migration or development. Recently, wepy has hardly been updated. , so I recommend Meituan’s mpvue.

• And if the front-end of the team is strong, it is no problem to build a framework by yourself.

10 Which one is better, mini program or native app?

In addition to having the advantages of official accounts such as low development costs, low customer acquisition costs, and no need to download, mini programs have greatly improved the service request delay and user experience, making them able to carry with complex service functions and provide users with a better user experience.

11 Briefly describe the principle of WeChat Mini Program

WeChat Mini Program is developed using three technologies: JavaScript, WXML, and WXSS. Technically speaking, it is similar to the existing front-end development, but if you dig deeper, it will be different. Something different again.

JavaScript: First of all, JavaScript code runs in the WeChat App, not in the browser. Therefore, some H5 technology applications require WeChat App to provide corresponding API support, which limits H5 The application of technology, and it cannot be called strictly H5, can be called pseudo-H5. Similarly, some unique APIs provided by WeChat are not supported by H5 or are not supported particularly well.

WXML: WXML was developed by WeChat itself based on XML syntax. Therefore, during development, only existing tags provided by WeChat can be used, and HTML tags cannot be used.

WXSS: WXSS has most of the features of CSS, but not all are supported, and there is no detailed documentation on which ones are supported and which ones are not supported.

WeChat’s architecture is a data-driven architecture model. Its UI and data are separated. All page updates need to be implemented through changes to the data.

The applet is divided into two parts: webview and appService. Among them, webview is mainly used to display the UI, and appService is used to handle business logic, data and interface calls. They run in two processes, communicate through the system layer JSBridge, and realize UI rendering and event processing

12 How is the two-way binding of WeChat applet different from vue

Mini program The properties of this.data cannot be synchronized directly to the view. You must call: this.setData({})

Recommended tutorial: "WeChat Applets"

The above is the detailed content of WeChat mini program interview questions you must know and know. For more information, please follow other related articles on the PHP Chinese website!