preface

Open a recruitment website, you will find that the market demand for small procedures is quite high, although part of the development of small procedures is quite simple OK, but some common things still need to know about, so summed up a small procedures interview questions, I hope to help you.

Directory:

Front-end HTML+CSS pen test interview question front-end JS pen test interview question front-end small program pen test interview question front-end interview essential dictionary — knowledge in-depth integration

1. Wechat mini program has several files

  • WXML (WeiXin Markup Language)Is a set of tag language framework design, combined with basic components, event system, can build the structure of the page. The interior is mainly a set of components defined by wechat itself
  • WXSS (WeiXin Style Sheets)Is a style language for describingWXMLComponent style of
  • jsLogical processing, network requests
  • jsonSmall program Settings, such as page registration, page title andtabBar

2. How does wechat applets transfer values with events

Add a data-* attribute to the HTML element to pass in the value we want, which is then retrieved by the param parameter to e.currenttarget. dataset or onload. But data – names cannot have uppercase letters and cannot store objects

3. What are the differences between WXSS and CSS for small programs?

  • wxssThe image import needs to use the external link address
  • There is no Body; Styles can be used directlyimportThe import

4, how to determine the uniqueness of the small program associated wechat public number

With the wx.getUserInfo method withCredentials set to true, you can get

5. Differences between wechat applets and Vue

  • The life cycle is different. The life cycle of wechat small program is relatively simple
  • Data binding is also different, wechat applets data binding needs to be used{{}}, vueDirect: shows and hides elements,vueIn the usev-ifandv-show
  • Control the show and hide of elements, small program, usedwx-ifandhiddenControls the display and hiding of elements
  • Event handling is different, small program, all usebindtap(bind+event)Or,catchtap(catch+event)Bind events,vue: usedv-on:eventBind events, or use@eventThe binding event
  • Two-way data binding is also not the same invueYou just add it to the form elementv-modelAnd then binddataWhen the content of a form element changes,dataThe corresponding value of theta will change accordinglyvueveryniceA little bit. The wechat applet must get the form element, change the value, and then assign the value to onedataA variable declared in.

6. How is bidirectional binding of applets different from VUE

The this.data attribute cannot be synchronized to the view directly from the applet. It must be called:

This.setdata ({// set here})Copy the code

7. Briefly describe the principle of wechat small program

  • Wechat applet is adoptedJavaScript, WXML, WXSSThe development of the three technologies is essentially a single page application. All page rendering and event processing are carried out in one page, but various native interfaces can be called through wechat client
  • Wechat’s architecture is data-driven architecture mode, and itsUIIt is separate from the data, and all page updates need to be made through changes to the data
  • The applets are divided into two partswebviewandappService. Among themwebviewMainly used to showUI ，appServiceTo handle business logic, data, and interface calls. They run in two processes, through the system layerJSBridgeCommunication, UI rendering, event processing

Small program life cycle function

  • onLoadTriggered 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()Triggered 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, indicating that the page is ready to interact with the view layer
  • onHide()Triggered when the page is hidden/in the background. Such asnavigateToOr the bottomtabSwitch to other pages, small programs into the background
  • onUnload()Triggered when the page is uninstalled. Such asRedirectTo or navigateBackTo other pages

9, what methods can be used to improve the application speed of micro channel small program

1. Improve page loading speed

2. User behavior prediction

Reduce the size of the default data

4. Componentization scheme

10. Advantages and disadvantages of wechat applets

advantage

Use to go, do not install, save traffic, save installation time, do not occupy the desktop rely on wechat traffic, born to promote the spread of advantages of the development cost is lower than App

disadvantages

User retention is the advantage of ready-to-go, but there are also some problems. Compared with traditional apps, the entrance is much deeper and the page size cannot exceed 2M. Pages with more than 10 levels cannot be opened

11, how to solve the small program asynchronous request problem

  • Applets support mostES6grammar
  • The logic is handled inside the callback that returns successPromiseasynchronous

12, how to implement the drop-down refresh

EnablePullDownRefresh is set to window in global Config and the onPullDownRefresh hook function is defined in Page. After the pull-down refresh condition is reached, the hook function is executed and the request method is returned. Call wx.stopPullDownRefresh to stop the pull-down refresh

What is the difference between bindtap and catchtap

Similarities: First of all, they are used as click event functions, which are triggered when clicked. In this function they are the same, you can make no distinction

Difference: The main difference is that Bindtap does not prevent bubbling, catchtap does prevent bubbling

14, small program pages between what methods to transfer data

1, use global variables to achieve data transfer. Define the global variable globalData in the app.js file to store the information that needs to be stored

With wx.redirectTo and wx.navigateTo, you can put some of the data in the URL and initialize it on the new page onLoad

3, use local cache Storage related

What are the similarities and differences between applets WXML and standard HTML?

The same:

  • Both describe the structure of the page;
  • Are made up of tags, attributes, etc.

Different:

  • Tag names are different, and there are fewer small program tags and more single tags;
  • A few morewx:ifSuch a property as well{{}}An expression like this
  • WXML can only be previewed in wechat applets developer tools, whileHTMLPreview in the browser;
  • Component packages vary,WXMLThe component has been repackaged,
  • Applets run onJS CoreInside, there is noThe DOM treeandwindowObject that cannot be used in appletswindowThe objects anddocumentObject.

16, small program to briefly introduce the following three types of event object property list?

Base Events

  • type:The event type
  • TimeStamp:The timestamp when the event was generated
  • Target:A collection of property values for the component that fires the event
  • CurrentTarget:A collection of properties for the current component

Custom Events

  • detail

Touch Events

  • touches
  • changedTouches

Understanding of the use of Wx :if and Hidden by small programs?

  • wx:ifThere are higher switching costs.
  • hiddenThere is a higher initial render cost.
  • Therefore, if the situation requires frequent switching, usehiddenBetter, if conditions are unlikely to change at run timewx:ifIs better.

18, wechat small program and H5 difference?

  • Operating environment differences

The operating conditions of a traditional HTML 5 is the browser, including the webview, and WeChat applet running environment is not a complete browser, is based on the browser kernel WeChat development team completely refactoring a built-in parser, specially optimized for small program, with their own definition of development language standard, improve the performance of the small program.

  • Differences in development costs

It only runs in wechat, so you don’t have to worry about browser compatibility, and you don’t have to worry about unexpected bugs in the production environment

  • Differences in obtaining system-level permissions

19, app.json is the global configuration of the current small program, about the meaning of each item of the three configuration?

  • The pages field describes all the page paths of the current applet. This is to let the wechat client know which directory your applet page is currently defined in.
  • The window field– Applet all page top background color, text color defined here
  • TAB field– Global top or bottom of appletstab

20, small program onPageScroll method use note what?

Because this method is called frequently, it can be removed when it is not needed, and do not keep empty methods. In addition, when using onPageScroll, try to avoid using setData() and minimize the frequency of using setData().

Applet view render end callback?

Use setData(data, callback) to add subsequent action code to the callback callback method

22. What should be paid attention to when using the small program synchronous API and asynchronous API?

Wx. setStorageSync uses the SYNc-terminated API as the synchronization API, and uses try-catch to check exceptions. If the API is judged to be asynchronous, the next operation can be performed in its callback methods success, fail, and Complete.

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

  • Wx. NavigateTo () :Keep the current page and go to a page in the application. But you can’t jumptabbarpage
  • Wx. RedirectTo () :Close the current page and switch to a page in the application. But not allowed to jump totabbarpage
  • Wx. SwitchTab () :Jump toabBarPage and close all other nontabBarpage
  • Wx. NavigateBack () :Close the current page and return to the previous page or multi-level page. throughgetCurrentPages()Get the current page stack and decide how many layers to return to
  • Wx. ReLaunch () :Close all pages and open to a page within the app

How to encapsulate the data request of wechat applets?

1, put all interfaces in a unified JS file and export.

Create a method in app.js that encapsulates the request data.

3. Call encapsulated methods in child pages to request data.

25, small program or native App which good?

In addition to the advantages of low development cost, low customer cost and no need to download, small programs have been greatly improved in service request delay and user experience, making it able to carry complex service functions and users to get better user experience.

26,webviewHow do I jump back to the applet?

First, introduce the latest version of jweixin-x.x.x.js, and then

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

How to determine the uniqueness of the user of the small program associated wechat public number?

With the wx.getUserInfo method withCredentials set to true, you can get the encryptedData, which contains the union_id. Symmetric decryption is required on the back end.

28. What problems do applets encounter when calling background interfaces?

1. The size of data is limited. If the size exceeds the limit, the entire applet will crash unless the applet is restarted.

2. The small program can not directly apply colours to a drawing the article content page this type of HTML text content, if need to show to lend a plug-in, but the plugin rendering can lead to a slow page load, so it’s best to HTML filtering of content in the background, the background directly with batch replacement p tags div tags for the view TAB, and then other tags make plug-in to do, Reduce front-end time.

29, WebView page how to jump to the small program navigation page?

A: Pages navigated by applets can be switchTab, but data is not reloaded by default. To load new data, add the following code to the SUCCESS property:

success: function (e) {
           var page = getCurrentPages().pop();
           if (page == undefined || page == null) return;
           page.onLoad();
          }
Copy the code

The webView page is passed

 wx.miniProgram.switchTab({
         url: '/pages/index/index'
       })
Copy the code

30. Advantages and disadvantages of wechat applets?

Advantage:

1, no need to download, search and scan can be opened. 2, good user experience: fast opening speed. 3, the development cost is lower than App. 4. It can be added to the desktop on Android, almost the same as the original App. 5, to provide good security for users. The release of small programs, wechat has a strict review process, can not pass the review of small programs can not be published online.Copy the code

Disadvantage:

1, more restrictions. The page size cannot exceed 1 MB. Pages with more than 5 levels cannot be opened. 2. Single style. Parts of the applets are already formed and cannot be styled. For example: slides, navigation. 3, the promotion scope is narrow, can not share the circle of friends, can only share to friends, nearby small program promotion. Nearby small programs are also limited by wechat. 4. Relying on wechat, it is impossible to develop background management functions.Copy the code