Interview questions (2020) common interview questions of wechat applet

Time:2021-5-11

Interview questions (2020) common interview questions of wechat applet

Blog description

The information involved in this article comes from Internet collation and personal summary, which means personal learning and experience summary. If there is any infringement, please contact me to delete it. Thank you!

1. Main files of wechat’s applet

  • Wxml — template file
  • JSON — configuration / setup files such as title, tabbar, page registration
  • Wxss — style file. Styles can be imported directly by import
  • JS — script logic file, logic processing, network request
  • App.json — configuration file entry, global configuration of the whole applet, network timeout, bottom tab, page path, window field is the top background color and text color of all pages of the applet
  • App.js — no content, you can listen to life cycle functions and declare global variables in it
  • App.wxss — global configuration style file

2. How to encapsulate data request

  • Put all interfaces in a unified JS file and export them (or define the request address, header and method in a JS file as a constant and export them)
  • Creating a method of encapsulating request data in app.js
  • Invoke encapsulated method for request data in sub page

3. Parameter transfer

  • Add the data – * attribute to the HTML element to pass the required value, and then get it through the param parameter of e.currenttarget.dataset or onload. Note that there should be no capital letters and objects should not be stored
  • When you jump to a page, pass the required parameter values through navigator
  • Set the method id, get the set ID value through e.currenttarget.id, and then pass the value through the method of setting global variables

4. Life cycle function

  • Onload — the page is loaded and adjusted once
  • Onshow — page display, called every time the page is opened
  • Onready — the first rendering is completed and adjusted once
  • Onhide — page hidden, called when navigator to or bottom tab switches
  • Onunload — page unload, called when redirectto or navigateback

5. What’s the difference between bidirectional binding and Vue

  • This. SetData ({}) must be called by the applet because the properties of this. Data cannot be synchronized to the view directly

6、1px = 2rpx

7. How to customize components(pop up)

  • First, create a components folder to store all custom components. The directory structure is still JS, wxml, JSON, wxss

Basic configuration:

  • . JSON — make custom component declaration
{
  "component": true
}

Using components:

  • If you use this custom component in index. Wxml, first declare it in index. JSON
{  
  "usingComponents": {  
      "toastdemo": "/components/toastdemo/toastdemo"  
  }  
}
  • Then, it is referenced in index. Wxml
  • Then configure it in index. JS
  • When using it, you can directly execute this.toastdemo.showtoast (‘the spring box component is called successfully ‘, 2000)

8. Page Jump in small program

  • Wx. Navigator to — keep the current page and jump to a page in the application. But you can’t jump to the tabbar page (the parameter must be a string)
  • Wx. Redirectto — close the current page and jump to a page in the application. But you are not allowed to jump to the tabbar page
  • Wx. Switchtab — jump to the tabbar page and close all other non tabbar pages. No parameters are allowed after the path
  • Wx. Navigator back — close the current page and return to the previous page or multi-level page. You can get the current page stack through getcurrentpages() and decide how many layers to return
  • Wx. Relaunch — close all pages and open to a page in the application

9. The difference between small program and Vue

  • Loop traversal: the applet is Wx: for = “list”, Vue is V-for = “inforin list”
  • Call data model: the applet is this.data.unifo, and Vue is this.unifo
  • Assign value to the model: the applet is this. SetData ({ unifo:1 }), Vue is the direct this. Unifo = 1

10. What’s the difference between bidirectional binding and Vue

  • This. SetData ({}) must be called by the applet because the properties of this. Data cannot be synchronized to the view directly

11. Advantages and disadvantages of small program

Advantages of applets
  • No need to download
  • Open fast
  • Low development cost
  • To provide users with good security. There is a set of strict review process for the release, and the program that cannot pass the review cannot be released online
  • Fast service request
Disadvantages of applets
  • Relying on wechat, we can’t develop background management function
  • The size limit should not exceed 2m, and pages with more than 5 levels should not be opened

12. Brief introduction to the principle of small program

  • The small program is divided into two parts: WebView and appservice. WebView is used to show UI, and appservice is used to process business logic, data and interface calls. They run in two processes, and communicate through jsbridge at system layer to complete UI rendering and event processing.

13. How to improve the application speed of small program

  • Reduce the size of the default data
  • Component, public, such as shells, etc., to write a custom component, then call it.

14. Brief introduction to the principle of small program

  • The small program is divided into two parts: WebView and appservice. WebView is used to show UI, and appservice is used to process business logic, data and interface calls. They run in two processes. They communicate through jsbridge in system layer to complete UI rendering and event processing

15. Callback function of SetData

The SetData implementation of wechat applet is similar to the SetData implementation of react, so it is also an asynchronous function and has parameters of callback function. Of course, we may not feel the asynchrony of small amount of data at ordinary times, but in order to ensure the correct execution of logic, please write the data steps in SetData after using SetData into the callback function of SetData, Here is an example:

this.setData({
  a: this.data.a++
  },()=>{
})

16. How to realize pull down refresh

  • First configure enable pulldownr in app.json or page.json efresh:true
  • The onpulldownrefresh function is used in the page, which is executed during the pull-down refresh
  • When the pull-down function is executed, a data request is initiated. After the request returns, wx.stoppulldownrefresh is called to stop the pull-down refresh

17. What is the difference between bindtap and catchtap

  • Bindtap does not prevent bubbling, catchtap does

18. What is the difference between wechat applet and H5?

① The running environment is different (the applet runs on wechat, H5 runs on browser);

② Different development costs (H5 needs to be compatible with different browsers);

③ Access to system permissions is different (system level permissions can be seamlessly linked with applets);

④ The fluency of the application in the production environment (H5 needs to continuously optimize the project to improve the user experience);

19, how to identify the uniqueness of WeChat users by linking small programs with the official account?

When wx.getuserinfo method withcredentials is true, encrypteddata can be obtained, which contains Union_ ID. the back end needs symmetric decryption.

20. How does the page in WebView jump back to the applet

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

21. How can a WebView page Jump to a small program navigation page?

The page navigated by the applet can be accessed through switchtab, but the data will not be reloaded by default. To load new data, add the following code to the success attribute:

success: function (e) {
  var page = getCurrentPages().pop();
  if (page == undefined || page == null) return;
  page.onLoad();
}
//On the WebView page, click
wx.miniProgram.switchTab({
  url: '/pages/index/index'  
})

22. Jump between applets

  • 2 small programs appid are linked to the same official account number.
  • usenavigatorAnd set some properties correspondingly
  • Target: miniprogram — other small programs
  • Target: self — current applet

thank

Omnipotent network

And industrious self,Personal blogGitHub

微信公众号

Recommended Today

Kafka source learning: Kafka APIs leader_ AND_ ISR

Link to the original text:https://fxbing.github.io/2021…This source code is based on Kafka 0.10.2 Whenever the controller changes state, it will call thesendRequestsToBrokersMethod sendleaderAndIsrRequestThis paper mainly introduces the logic and process of Kafka server processing the request. LEADER_AND_ISR Overall logical process case ApiKeys.LEADER_AND_ISR => handleLeaderAndIsrRequest(request) Receive leader on server side_ AND_ After ISR request, thehandleLeaderAndIsrRequestThe processing flow […]