TODO: Updates continue…

Principles and Ideas

Small program is based on WEB specifications, using HTML,CSS and JS to build a set of framework.

  • Implementation principle: the bottom is based on Webview to achieve, and did not invent new technology, the whole framework system, relatively clear and simple, based on Web specifications, to ensure the maximum value of existing skills, only need to understand the framework specification can use the existing Web technology for development. Easy to understand and develop.

  • Data Transfer (setData) : The view layer of the applet currently uses WebView as the rendering carrier, while the logic layer uses a separate JavascriptCore as the runtime environment. In terms of architecture, WebView and JavascriptCore are independent modules and do not have channels for direct data sharing. Currently, data transfer between the view layer and the logical layer is actually implemented through evaluateJavascript provided on both sides. That is, the data transmitted by the user needs to be converted into a string for transmission. At the same time, the converted data content is spliced into a JS script, and then transmitted to the independent environment on both sides by executing the JS script. The evaluateJavascript execution is affected in many ways, and the arrival of data to the view layer is not real-time.

  • Component mechanism: Component mechanism is introduced, but not entirely based on component development. Like VUE, most OF the UI is still template-based rendering. The introduction of component mechanism can better standardize the development mode, and it is easier to upgrade and maintain.

Life cycle (function)

The life cycle of a small program instructions
onLaunch Applet initialization When applet initialization is complete, onLaunch is triggered (globally only once)
onShow Applet display onShow is triggered when the applet is started, or from the background to the foreground display
onHide Applet Hiding When an applet enters the background from the foreground, onHide is triggered
onError Error listener Function onError is raised with an error message when a script error occurs in a applet or an API call fails
onPageNotFound Page does not exist Listener Function When the applet appears that the page to be opened does not exist, it calls this function with the page information, as described below
Page life cycle instructions
onLoad Page loading: A page is called only once, and you can get the query parameter called to open the current page in onLoad
onReady Page rendering complete: a page is called only once, indicating that the page is ready to interact with the view layer; Settings such as wx.setNavigationBarTitle should be set after onReady
onShow Page display: called every time a page is opened
onHide To hide a page
onUnload Page offload: called when redirectTo or navigateBack is available
onPullDownRefresh Pull-down Refresh: Enable enablePullDownRefresh in the window option of app.json or in the page configuration. Wx. stopPullDownRefresh stops the pull-down refresh of the current page after the data refresh is processed.
onReachBottom Pull bottom: You can set the trigger distance onReachBottomDistance in app.json’s Window option or in the page configuration; This event will only be triggered once during a slide within trigger range
onShareAppMessage User forward: Only if this event handler function is defined, the “forward” button will be displayed in the menu in the upper right corner. Called when the user clicks the forward button; This event requires a return Object, which is used to customize the forwarding content
onPageScroll Slide the page
onTabItemTap Triggered when you click TAB when the current TAB page is displayed

Component systems and templates

Componentization is the foundation to realize engineering, and now all the outstanding front-end frameworks have realized componentization development. However, in terms of file form and data transmission mechanism, the components have a set of life-cycle functions that completely copy the old VUE, and the behaviors seem to be the obsolete method of polymer framework, and the templates are criticized for nothing. In short, the small programs are not perfect. However, compared to simply writing static pages, it is very convenient to combine component with template and slot, which can achieve the component effect of VUE/React. We look forward to and trust the Tencent team for updates and maintenance.

  • Experience of using:
    • Template support for deconstructing assignments is fun to use;
    • Component’s event-passing data mechanism penetrates well across components, even if the idea and practice looks very polymer.

The data transfer

Method:

  • Simple and crude non-response:
    • Global variables: Data that changes frequently and is shared across the app
    • Local storage: mainly for the relatively stable data shared by the whole app. For the nested complex data structure, the data stored locally may not be expected in the responsive update
  • Props delivery: Conform to the mainstream idea and be friendly at the front end
  • Route parameter transmission: flexible and convenient
  • Event objects (mainly for Component)

Guidelines on pit

  • 1 Mobile adaptation:
    • Font/border units: also use RPX for fonts (1rpx=.5pt for iphone6 750px screen) and RPX for borders
    • Other units (RPX /px/pt) : Take iphone6 750px screen as reference (1rpx=1pt)
    • File path: all applet files except js can be imported from the root directory. There may be other restrictions on the image path.
    • Music player:
      • A number of audio custom components, the use of background music manager pause and playback will exist on the analog machine real machine running normally;
      • There are also unexpected bugs in multiple audio component lifecycle callbacks;
      • The compatibility of audio player and background music player andrioD is not good;
    • Wechat mini app will not support iOS “virtual payment” from May 8

Project experience and lessons

  • Division of labor and cooperation:
    • On the front end itself:
      • When it comes to cooperation, we should adhere to code review, specifically opening branches, raising PR, CR and finally merging.
      • Separate UI logic and business logic, ensure high cohesion and low coupling between each module, clear responsibilities, no repetition and no omission;
      • Develop good practise to ensure code maintainability, extensibility, reusability, testability, etc. (this is very important for individuals and teams);
      • Give yourself a deadline for a feature or bug. If you can’t solve it, change your mind or ask others for help in time.
    • To the back-end:
      • First, discuss business scenarios with them, agree on data Skeleton structure (Schama), agree on uniform and detailed error codes;
      • Specify the type and number of interface outbound and inbound parameters
      • Test and use their interfaces, encounter problems or errors, first look at the front end itself, then look at them; Be sure to provide timely feedback
    • The product:
      • Get familiar with their PRD documents and understand their design ideas and original intention;
      • According to their own understanding, do not understand do not understand or disagree with them, timely discussion;
      • After understanding PRD, the front-end overall planning, the division of business logic and UI logic;
    • Interactive feedback to the UI
  • Responsibility differentiation:
    • According to the business characteristics and industry experience, and the rationalization suggestions of CTO, first of all, be sure to make clear which things to do at the front end and which things to do at the back end;
    • Don’t refuse to do it for any reason (pressed for time) or do it on your own initiative (plenty of time), focus on the front end, define the front and back end responsibilities and always keep the front and back end separate;
    • In order to better cooperate, we can understand the logic and characteristics of back-end work, not do things that do not belong to the front end;

Reference documentation

  • Official documentation – (rough and messy 🔍 features weak and common bugs even no hint)
  • Small program implementation principle analysis
  • Web Components

Excellent Video Tutorials

  • Micro channel small program entry and practice commonly used components API development skills Project practice (Collection)