Summarize and share some interview questions based on small programs to ensure you win the interview!

This article summarizes and shares with you some interview questions based on small programs (with analysis), so that you can win the interview with certainty. I hope it will be helpful to everyone!

Mini program login process

The first step: wx.login obtains the user’s temporary login credential code

Step 2: wx.getUserInfo obtains the encrypted data encryptedData and decryption parameter iv

Step 3: Pass the code, encryptedData, and iv in steps 1 and 2 to the developer himself Server Step 4: After the server obtains the code, encryptedData, and iv, use the get method to request the following WeChat interface personal project. There is no back-end interface and answers the login process in cloud development

小Program page declaration cycle

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

● onShow() is triggered when the page is displayed/cut into the foreground, and is generally used to send data requests;

● onReady() is triggered when the initial rendering of the page is completed, and will only be called once, indicating that the page has been Can interact with the view layer

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

● onUnload() When the page is unloaded Triggered, such as redirectTo or navigateBack to other pages

Framework commonly used in small programs

WeUI WeUI is a basic style library that is consistent with WeChat’s native visual experience. The WeChat official design team tailor-made the WeChat web pages and WeChat mini-programs to make users’ usage perception more unified. It is the most commonly used framework in mini program development and is popular among developers. Meituan mini program framework mpvue Official introduction: mpvue is a front-end framework that uses Vue.js to develop small programs. The framework is based on the core of Vue.js. mpvue has modified the runtime and compiler implementation of Vue.js so that it can run in a mini program environment, thus introducing a complete set of Vue.js development experience for mini program development.

Component development framework wepy Official introduction: Component-based development perfectly solves problems such as component isolation, component nesting, and component communication. It supports the use of third-party npm resources, automatically handles dependencies between npm resources, and is perfectly compatible with all npm resource packages without platform dependencies. Official framework MINA Official introduction: The framework provides its own view layer description languages ​​WXML and WXSS, as well as a JavaScript-based logic layer framework, and provides data transmission and event systems between the view layer and the logic layer, allowing developers to easily focus on data and logically.

Do you know WeChat Mini Program? Briefly describe the principles of mini programs.

WeChat applet is developed using three technologies: JavaScript, WXML, and WXSS. It is essentially a single-page application. All page rendering and event processing are done in It is carried out within a page, but various native interfaces can be called through the WeChat client;

WeChat’s architecture is a data-driven architecture model, and its UI and data are separated , all page updates need to be implemented through changes to 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

The main directory file function of the mini program project

project.config.json Project configuration file, make some personalized configurations, such as interface color, compilation configuration, etc.; app.json is the global configuration of the current mini program, including all page path configurations of the mini program, interface performance, network timeout, bottom tab, etc.; sitemap.json configures whether the mini program and its pages are allowed to be indexed by WeChat; pages contains specific pages; wxml (WeiXin Markup Language) is a set of tag languages ​​designed by the framework. Combined with basic components and event systems, it can build the structure of the page. wxss (WeiXin Style Sheets) is a style language used to describe WXML component styles app.wxss, as a global style, will apply to all pages of the current applet, and local page styles page.wxss only takes effect on the current page; app.js applet logic js logic processing, network requests json page configuration

What is the difference between the two-way binding of the mini program and vue

The direct this.data attribute of the mini program cannot be synchronized To the view, you must call: this.setData({ //Set here })

The life cycle function of the mini program page

onLoad is triggered when the page is loaded. A page will only be called once. You can get the parameters in the path to open the current page in the onLoad parameter (monitoring page loading)

onShow() is triggered when the page is displayed/cut into the foreground (monitoring page display)

onReady() Triggered when the initial rendering of the page is completed. A page will only be called once, which means that the page is ready and can interact with the view layer (monitoring the completion of the initial rendering of the page)

onHide() Triggered when the page is hidden/switched to the background. Such as navigateTo or the bottom tab to switch to other pages, the applet switches to the background, etc. (monitoring page hiding)

onUnload() is triggered when the page is unloaded. Such as redirectTo or navigateBack to other pages (monitoring page unloading)

Advantages and disadvantages of WeChat applet

Advantages: Ready to use, no installation required, saving traffic, saving installation time, and not occupying the desktop Relying on WeChat traffic, natural promotion and communication advantages Development costs are lower than apps shortcoming : User retention, instant use is an advantage, but there are also some problems The entrance is much deeper than traditional apps There are many restrictions, the page size cannot exceed 2M, and pages with more than 10 levels cannot be opened

What are the differences between wxss and css in the mini program

WXSS is similar to CSS, but some additions and modifications are made based on CSS

The size unit is rpx rpx is a responsive pixel that adapts to the width of the screen. The specified screen width is 750rpx. For example, on iPhone6, the screen width is 375px and there are 750 physical pixels in total, then 750rpx = 375px = 750 physical pixels

Use the @import identifier to import external styles. @import is followed by the relative path of the external style sheet that needs to be imported, and ; indicates the end of the statement

What are the methods of transferring data between mini program pages

(1) Use global variables to implement data transfer. Define the global variable globalData in the app.js file and store the information that needs to be stored in it. When using it, directly use getApp() to get the stored information

(2) When using wx.navigateTo and wx.redirectTo, you can put part of the data in the url and load it when the new page is onLoaded. initialization Issues to note: wx.navigateTo and wx.redirectTo do not allow jumping to the page contained in the tab onLoad is executed only once (3) Use local cache Storage related

How to determine the uniqueness of a user when the mini program is associated with the WeChat official account

If the developer has multiple Mobile applications, website applications, and public accounts (including mini programs) can use unionid to distinguish the uniqueness of users, because as long as they are mobile applications, website applications, and public accounts (including mini programs) under the same WeChat open platform account, The user's unionid is unique. In other words, for the same user, the unionid is the same for different applications under the same WeChat open platform

How to implement pull-down refresh

First configure enablePullDownRefresh in the window in the global config Define the onPullDownRefresh hook function in Page. After reaching the pull-down refresh condition, the hook function is executed and the request method is initiated. After the request returns, call wx.stopPullDownRefresh to stop the pull-down refresh

What is the difference between bindtap and catchtap

The same point: first of all, they are both The click event function is triggered when clicked. In this function, they are the same, and there is no need to distinguish them

The difference: their main difference is that bindtap does not prevent bubbling events, while catchtap prevents bubbling

The difference between 'wx.navigateTo()', 'wx.redirectTo()', 'wx.switchTab()', 'wx.navigateBack()', 'wx.reLaunch()'

wx.navigateTo(): ​​Keep the current page and jump to a page within the application. But you cannot jump to the tabbar page

wx.redirectTo(): ​​Close the current page and jump to a page within the application. But it is not allowed to jump to the tabbar page

wx.switchTab(): Jump to the tabBar page and close all other non-tabBar pages

wx.navigateBack(): Close the current page and return Previous page or multi-level page. You can get the current page stack through getCurrentPages() and decide how many layers you need to return

wx.reLaunch(): Close all pages and open a certain page in the application

The difference between typeof operator, instanceof operator and isPrototypeOf() method

typeof is an operator used to detect the type of data, such as basic data types null, undefined, string , number, boolean, As well as reference data types object and function, but for reference data types such as regular expressions, dates, and arrays, it will all be recognized as objects;

instanceof is also an operator, which can easily identify the specific data. Which reference type it is. The difference between it and isPrototypeOf is that It is used to detect whether the prototype of the constructor exists in the prototype chain of the specified object; The isPrototypeOf is used to detect whether the object calling this method exists in the prototype chain of the specified object, so essentially the detection targets are different.

The difference between call() and apply()

Actually, the functions of apply and call are the same, but the form of the passed parameter list is different. apply(this object, [parameter 1, parameter 2,...]) Even if there is only one parameter, it must be written into the array call(this object, parameter 1, parameter 2,...) It can accept multiple arbitrary parameters. The first parameter is the same as apply, followed by a list of parameters

微信小How does the program pass values ​​to events

Add the data-* attribute to the HTML element to pass the value we need, and then obtain it through the param parameter of e.currentTarget.dataset or onload. But the data-name cannot have capital letters and cannot store objects

The difference between WeChat applet and vue

•The life cycle is different, WeChat Mini program life cycle is relatively simple • Data binding is also different. WeChat applet data binding needs to use {{}}, vue directly: Just • Control the display and hiding of elements. In mini programs, use wx-if and hidden to control the display and hiding of elements; in vue, use v-if and v-show • Event processing is different. In the mini program, bindtap (bind event) or catchtap (catch event) are used to bind events. Vue: use v-on:event to bind events, or use @event to bind events. • The two-way binding of data is also different. In vue, you only need to add v-model to the form element, and then bind a corresponding value in the data. When the content of the form element changes, the corresponding value in the data also changes. It will change accordingly, which is a very nice thing about vue. The WeChat applet must obtain the changed value of the form element, and then assign the value to a variable declared in data.

What methods can be used to improve the application speed of WeChat mini programs

Improve page loading speed User behavior prediction Reduce default data size Component solution

How to solve the asynchronous request problem of the mini program

The mini program supports most ES6 syntax • Process logic in the callback that returns success Promise asynchronous

What are the similarities and differences between applet wxml and standard html?

same: • They are used to describe the structure of the page; • They are composed of tags, attributes, etc.; different: • The label names are different, and there are fewer mini program labels and more single labels; • There are more attributes such as wx:if and expressions such as {{ }}; • 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 components; • The mini program runs in JS Core and has no DOM tree and window object. The window object and document object cannot be used in the mini program.

The applet briefly introduces the attribute lists of the three event objects?

Base Event (BaseEvent) • type: event type • timeStamp: timestamp when the event was generated • target: a collection of property values ​​of the component that triggered the event • currentTarget: a collection of properties of the current component Custom event (CustomEvent) • detail TouchEvent • touches • changedTouches

How does the applet understand the use of wx:if and hidden?

• wx:if has higher switching cost. • hidden has higher initial rendering cost. • Therefore, if frequent switching is required, it is better to use hidden. If the conditions are unlikely to change during runtime, wx:if is better.

The difference between WeChat applet and H5

Difference in operating environment: The traditional HTML5 operating environment is a browser, including webview, while the operating environment of the WeChat applet is not a complete browser. It is based on the browser developed by the WeChat development team. A built-in parser that has been completely restructured in the kernel has been specially optimized for small programs and matches the self-defined development language standards to improve the performance of small programs. • Difference in development costs: It only runs on WeChat, so you don’t have to worry about browser compatibility and there is no need to worry about unpredictable bugs in the production environment. • The differences in obtaining system-level permissions

app.json is the global configuration of the current applet. What are the meanings of each of the three configuration items?

• pages field - used to describe the path of all pages of the current mini program. This is to let the WeChat client know in which directory your mini program page is currently defined. • window field - the top background color of all pages of the mini program, the text color is defined here • tab field - the global top or bottom of the applet tab

What should I pay attention to when using the onPageScroll method of the applet?

Since this method is called frequently, it can be removed when not needed. Do not keep the empty method. When using onPageScroll, try to avoid using setData() and minimize the frequency of use of setData().

Mini program view rendering end callback?

Use setData(data, callback) and add subsequent operation code in the callback callback method

What should I pay attention to when using the mini program's synchronous API and asynchronous API?

wx.setStorageSync is an API ending with Sync, which is a synchronization API. Use try-catch to view exceptions when using it. If the API is determined to be asynchronous, you can perform the next step in its callback methods success, fail, and complete.

How to encapsulate the data request of the WeChat applet?

1. Put all interfaces in a unified js file and export it.

2. Create a method to encapsulate the request data in app.js.

3. Call the encapsulated method in the sub-page to request data.

Which one is better, Mini Program or Native App?

In addition to having the advantages of low development costs, low customer acquisition costs, and no downloading required for public accounts, small programs have greatly improved service request latency and user experience. improvement, This enables it to carry complex service functions and provide users with a better user experience.

How to jump back to the mini program from a page in webview?

First of all, we need to introduce the latest version of jweixin-x.x.x.js, and then

wx.miniProgram.navigateTo({
url: '/pages/login/login'+'$params'
})

How to jump from the webview page to the mini program navigation page?

The page navigated by the mini program can be navigated through switchTab, but the data will not be reloaded by default. If you need to load new data, just add the following code to the success attribute:

What problems do the mini programs encounter when calling the background interface?

1. There is a limit to the size of the data. Exceeding the range will directly cause the entire mini program to crash unless the mini program is restarted;

2. The mini program cannot directly render articles. If you want to display this type of html text content on the content page, you need to use a plug-in, but plug-in rendering will cause the page to load slower, so it is best to filter the html of the article content in the background, and directly process the batch replacement of p tags and div tags in the background. view tag, and then let the plug-in do the other tags to reduce the front-end time

What are the advantages and disadvantages of WeChat mini programs?

Advantages:

1. No need to download, you can open it by searching and scanning.

2. Good user experience: fast opening speed.

3. The development cost is lower than that of App.

4. It can be added to the desktop on Android, which is similar to the native App.

5. Provide users with good security. WeChat has a strict review process for the release of mini programs. Mini programs that cannot pass the review cannot be published online.

Disadvantages:

1. There are many restrictions. Page size cannot exceed 1M. Pages with more than 5 levels cannot be opened.

2. Single style. Some components of the mini program are already formed, and the styles cannot be modified. For example: slideshow, navigation.

3. The promotion scope is narrow and cannot be shared in the circle of friends. It can only be promoted by sharing with friends and nearby mini programs. Among them, nearby mini programs are also restricted by WeChat.

4. Relying on WeChat, it is impossible to develop backend management functions.

[Related learning recommendations: 小program development tutorial]

The above is the detailed content of Summarize and share some interview questions based on small programs to ensure you win the interview!. For more information, please follow other related articles on the PHP Chinese website!