Mini Program Interview Questions

Preface

First of all, let’s talk about why we summarize the interview questions related to the mini program.

We can open a recruitment website at will, where you will find that the market demand for small programs is still quite high, and some companies may only need front-end personnel who write small programs

Although a large part of the development of small programs is very simple, but some commonly used things still need to be understood. Therefore, there is a summary of such a small program interview question. Of course, interested or in need of a small partner can also click here to see the full version of the front face questions

If there are any omissions or errors in the article, please leave a message to correct me if you see it, thank you in advance

Below ↓

1. Briefly describe the relevant file types of the WeChat applet

There are four main file types in the WeChat Mini Program project structure

• WXML(WeiXin Markup Language) is a set of label language designed by the framework, combined with basic components and event system, the structure of the page can be constructed. The interior is mainly a set of components defined by WeChat itself
• WXSS(WeiXin Style Sheets) is a style language used to describe WXMLthe components style
• js Logic processing, network request
• json Mini program settings, such as page registration, page title andtabBar

Main file

• app.jsonThis file is necessary. Without this file, the project cannot run because the WeChat framework uses this as the configuration file entry, the global configuration of the entire applet. Including the registration page, network settings, and applet windowbackground color, style navigation bar configuration, configure the default title
• app.jsThis file must be present, and an error will be reported if there is not! But this file is just created. No need to write anything. In the future, we can monitor and process the life cycle functions of the applet and declare global variables in this file.
• app.wxss Optional

2. Briefly describe the principle of WeChat applet

Micro-channel program uses small JavaScript , WXML , WXSS three techniques were developed, essentially a one-page application, all page rendering and event handling, it is carried out within a page, but you can call a variety of native interface through micro-channel client

Micro-channel architecture, data driven architecture model, it UIand the data are separate, all page updates, you need to be achieved through changes to the data

Applet divided into two parts webviewand appService. Which webviewis mainly used to show UI , appServicewe have to deal with business logic, data and interface calls. They run two processes by the system layer JSBridgefor communication, to achieve UIrendering, event handling

3. What is the difference between two-way binding of applets and vue

Direct applet this.dataattributes are not synchronized to the view, you must call:

this.setData({
    // 这里设置
})

4. What are the differences between wxss and css for applets

WXSS And CSS similar, but in CSS doing some additions and modifications on the basis of

• measurement unit rpx

rpxIt is a responsive pixel that can be adapted to the screen width. Specifies that the screen width is 750rpx. As iPhone6, the width of the screen 375px, a total of 750physical pixels, the 750rpx = 375px = 750physical pixels

• Using the @importidentifier to import external inline style. @importFollowed by the relative path of the external style sheet that needs to be imported, with; to indicate the end of the statement

/** index.wxss **/
@import './base.wxss';

.container{
color: red;
}

5. What are the ways to transfer data between applet pages

• Use global variables to achieve data transfer

In the app.jsdefinition of global variables file globalData, the information needs to be stored stored inside

// app.js

App({ // global variable globalData: { userInfo : null } })

When in use, direct use of getApp()information get stored

• Use wx.navigateToand wx.redirectTowhen part of the data can be placed urlinside, and the new page onLoadinitialization time

//pageA.js

// Navigate
wx.navigateTo({
url: ‘…/pageD/pageD?name=raymond&gender=male’,
})

// Redirect
wx.redirectTo({
url: ‘…/pageD/pageD?name=raymond&gender=male’,
})

// pageB.js
…
Page({
onLoad: function(option){
console.log(option.name + ‘is’ + option.gender)
this.setData({
option: option
})
}
})

Issues that need attention:

wx.navigateToAnd wx.redirectToallowed to jump to the tabpage included

onLoad Only execute once

• Use the local cache Storagerelated

6. Life Cycle Function of Mini Program

• onLoadFires when the page loads. A page is only called once, in onLoadthe parameter acquisition parameters to open the current page in the path
• onShow() Triggered when the page is displayed/cut to the foreground
• onReady()Fires when the first rendering of the page is complete. A page will only be called once, which means that the page is ready and can interact with the view layer
• onHide()Triggered when the page is hidden/cut into the background. As navigateToor the bottom of the tabswitch to a different page, applets cut backstage
• onUnload()Triggered when the page is unloaded. As redirectToor navigateBackwhen to other pages

See lifecycle callbacks

7. How to encapsulate the data request of WeChat Mini Program

Reference here

8. What methods can be used to improve the application speed of WeChat Mini Programs

1. Improve page loading speed

2. User behavior prediction

3, to reduce the default datasize

4. Componentized solution

9. The advantages and disadvantages of WeChat Mini Programs

Advantage

• Ready to use, no need to install, save traffic, save installation time, and do not occupy the desktop
• Relying on WeChat traffic, natural promotion and communication advantages
• Development costs than Applow

Disadvantage

• User retention, use and go is an advantage, but there are also some problems
• Compared with the traditional entrance Appto a lot of deep
• There are many restrictions, and the page size cannot exceed 2M. Cannot open pages with more than 10 levels

10. How to solve the asynchronous request problem of the applet

Applet supports most of the ES6 syntax

• Handle logic in the callback that returns success
• Promise asynchronous

11. How to determine the uniqueness of the user when associated with the WeChat official account of the Mini Program

If developers have multiple mobile applications, web applications, and the public accounts (including applets), by unionid uniqueness to distinguish users, as long as the mobile applications in the same WeChat open platform accounts, web applications and public accounts ( including applets), the user unionid is unique. In other words, the same user unionid is the same for different applications under the same WeChat open platform

12. How to implement pull-down refresh

• First of all global configin windowconfigurationenablePullDownRefresh
• In Pagethe definition of onPullDownRefreshthe hook function, reaches the drop-down refresh condition, the hooking function executes, initiation request method
• After the request returns, calling wx.stopPullDownRefreshto stop the pull-down refresh

Reference here

13. What is the difference between bindtap and catchtap

The same point: First of all, they are all used as click event functions, which are triggered when clicked. They are the same in this function, so there is no need to distinguish

Differences: The main difference between them is that bindtap does not prevent bubbling events, and catchtap prevents bubbling.

14. Description of the wx.navigateTo(), wx.redirectTo(), wx.switchTab(), wx.navigateBack(), wx.reLaunch()distinction </ h5>

• wx.navigateTo(): ​​Keep the current page and jump to a page in the application. But you can not jump to tabbarpage
• wx.redirectTo(): ​​Close the current page and jump to a page in the application. But does not allow Jump to tabbarpage
• wx.switchTab (): Jump to abBarthe page, and close all other non- tabBarpages
• wx.navigateBack() closes the current page and returns to the previous page or multi-level pages. Can getCurrentPages()get the current stack of pages, the decision needs to return several layers
• wx.reLaunch(): Close all pages and open to a page in the application

Transfer from: https://segmentfault.com/a/1190000018689948
https://zhuanlan.zhihu.com/p/64261276