Wechat mini program interview questions

1. How many files does the applet have?

  • WXML: a set of components defined by wechat itself
  • WXSS: Used to describeWXMLComponent style of
  • js: Logical processing
  • json: Applet page configuration

2. How do applets follow events to pass values

The page on the label by binding data – key = value, then click through the e.c. with our fabrication: binding urrentTarget. Dataset. The key to obtain the value of the binding on the label.

<button bindtap="get"  data-name="Test">Get the value</button>

get(e){
    console.log(e.currentTarget.dataset.name)
  },
Copy the code

3. Small programs WXSS 与 CSSThe difference between

WXSS

  • WXSS background images can only be imported into external links, not local images

  • The applet style uses @import to introduce an external style file with a relative path address.

  • The dimensions are in RPX, which are responsive pixels that can be adapted to the width of the screen.

4. The bidirectional binding of applets is different from Vue.

Applets that use this.data.key = value directly cannot be updated to a view.

You must use this.setData({key: value}) to update the value.

5. Life cycle function of applets

  • onLoad: Triggered when the page loads. A page will only be called once and can be called inonLoadGets the parameters in the path to open the current page
  • onShow: Invokes when the page is displayed/cut to the foreground.
  • onReady: triggered when the first rendering of the page is complete. A page is called only once.
  • onHide: triggered when the page is hidden/in the background, such as navigateToOr the bottom tabSwitch to other pages, small programs into the background
  • onUnload: Triggered when the page is uninstalled. Such asredirectToor navigateBackTo other pages.

6. How do small programs achieve pull down refresh

Two kinds of schemes

Solution a:
  • Through the app.json, "enablePullDownRefresh": true,Enable global drop-down refresh.
  • Or throughComponents. The jsonThat will be "enablePullDownRefresh": true,Single component drop-down refresh.
Scheme 2:
  • scroll-view: Use the scroll component to customize the refresh, pass bindscrolltoupperProperty, which fires when scrolling to the top/leftscrolltoupperEvent, so we can use this property to implement a drop-down refresh.

7. bindtap 和 catchtapThe difference between

Similarities: both are click events

Difference: Bindtap does not stop bubbling, Catchtap does.

8. What methods does the applets use to pass data

1. Use global variables

  • in app.jsIn the this.globalData = { }To store the data.
  • inComponents. JsIn, the header is introduced const app = getApp();Get the global variable
  • Direct use of app.globalData.keyTo assign and get values.

2. Use routes

  • wx.navigateTo 和 wx.redirectToCan be accessed through the urlAfter concatenating + variables, then inThe target pageThrough theonLoadIn the cycle, the parameter is used to get the value passed.

3. Use local cache

9. A brief introductionwx.navigateTo().wx.redirectTo().wx.switchTab().wx.navigateBack().wx.reLaunch()The difference between

  • wx.navigateTo(): Saves the current page and switches to a page in the application. But you can’t jumptabbarpage
  • wx.redirectTo(): Closes the current page and switches to a page in the application. But not allowed to jump totabbarpage
  • wx.switchTab(): jump toTabBarPage and close all other nontabBarpage
  • wx.navigateBack(): Closes the current page and returns to the previous page or multi-level page. throughgetCurrentPages()Get the current page stack and decide how many layers to return to
  • wx.reLaunch(): Closes all pages to open a page in the application.

10. Small programswx:if 和 hiddenThe difference between

  • wx:if: Has higher switching costs.
  • hidden: has higher initial render cost.

use

  • Frequent switching hidden, run time conditions change to use wx: if

11. app.jsonDescription of the global configuration file

  • pages: Is used to store all page paths of the current applet
  • window: applet all page top background color, text color configuration.
  • tabBar: bottom of the applet Tab, 5 at most, 2 at least.

12. How to encapsulate applets requests

    1. encapsulation wx.requestRequest to pass the required parameters ( url , data , method , Success Indicates a successful callback ， Fail Failed callback), encapsulating common methods POST , GET , DELETE , PUT. Finally, these methods are derived
    1. And create a new one api.jsFile, import encapsulated method, and then call the corresponding method, transfer data.

Wx. Request packaging

var app = getApp(); // Get the applet globally unique app instance
var host = '* * * * * * * * * * * * * * * * * *'; // Interface address
 

 
/ / POST request
function post(url, data, success,fail) {
  request(url, postData, "POST", doSuccess, doFail);
}
 
/ / GET request
function get(url, data, success, fail) {
  request(url, postData, "GET", doSuccess, doFail);
}
 
function request(url, data, method, success, fail) {
  wx.showLoading({
    title: "Loading...",
  })
  wx.request({
    url: host + url, // Request an address
    method: method, // Request method
    header: { / / request header
      "Content-Type": "application/json; charset=UTF-8"
    },
    data: data, // Request parameters
    dataType: 'json'.// Return the data format
    responseType: 'text'.// Data type of the response
    success: function(res) {
      wx.hideLoading();
      // Successfully execute the method with the parameter res.data and pass the returned data directly
      success(res.data);
    },
    fail: function() {
      // Failed to execute the methodfail(); }})}module.exports = {
  postRequest: post,
  getRequest: get,
}
Copy the code

Components use wrapped requests

var http = require('.. /.. /utils/request.js'); // Relative path


var params = {// Request parameters
  id:this.data.userId
}
http.postRequest("user/delUser", params, function(res) {
  console.log("Modification successful!");
  
}, function(res) {
  console.log("Modification failed!!")})Copy the code

13. Small program operation mechanism

  • Warm start: If the user has opened a small program, in a certain period of time to open the small program again, this time we no longer need to restart, this need to put our background open small program switch to the front to use.
  • Cold start: The situation that the user opens the mini program for the first time or opens it again after being destroyed by wechat. In this case, the mini program needs to be reloaded and started.

14. When will applets voluntarily be destroyed?

After entering the background, the client will help us maintain a state for a certain period of time. After more than five minutes, it will be actively destroyed by wechat.

There is no official indication of when it will be destroyed, and it varies from model to model,

In development in 2019: The time is not specified in the official documentation, but generally refers to within 5 minutes after inquiry

In development in 2020: The time is not specified in the official documentation. There is no fixed time for android. If the memory is sufficient, sometimes it will still be there for a day, and sometimes it will be gone for a few minutes.

15. Wechat authorization process