Since the micro channel released small program, the major companies have followed up all want to get a cup of soup from the flow pool of micro channel. Our company is no exception, our whole front end team is basically in the development of small programs for half a year. I’ve also developed four or five small programs. I always feel that I want to leave something, not only to record the pit we stepped on in those years, but also to hope that we don’t fall into the pit again.

The holes we’ve been in all those years

  • CSS styles cannot reference local image resources, but only online resources (background-image). Local image resources can only be referenced with tags.

  • {{}} cannot execute function methods. {{}} supports only basic simple operations and ES6 extended operators. Common processes such as price formatting can only be handled in JS code and then rendered in templates.

    this.setData({
 price: this.formatPrice(this.data.price)
})
Copy the code

  • The problem of not executing functions in {{}} can be solved through the WXS module. You can simulate the function of filters in vue.js.

    <! -- WXML template -->
<wxs src=".. /.. /modules/formatPrice.wxs" module="tools" />

<view>Price: {{view formatPrice (price)}}</view>
Copy the code
    / / WXS module
var formatPrice = function (price){
    price = price >> 0;
    return Number(price / 100).toFixed(2);
}

module.exports = {
    formatPrice
}
Copy the code

  • Applets do not support sharing links to moments. For now, the general practice is to generate images that save the page applets to a local album. The user sends friend circle to forward again by oneself. The front-end can be implemented using Canvas to reduce the pressure on the server. But there will be a picture of the jagged not clear problem. It is recommended to use different sizes for preview images and pictures saved to the real machine. The picture saved in the real machine is 750 width. It is larger than the preview image, so the image saved to the phone will be much clearer.

  • The applet layout uses RPX units, and the UI draft is drawn in 750 width. You can use the size of the UI draft directly. However, on some models 1RPX will not display. The 1px effect can be achieved using H5.

  • IphoneX bottom button adaptation, you can use media query, can also be determined by wx.getSystemInfo to get the model. reference

    @media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {}Copy the code

  • Page A -> Page B. The operation on page B triggers the data update on page A. There are usually two ways to return the data of updated page A (our company adopts Scheme 2) :

    1. Listen to onShow event on page A and update page data mindlessly when onShow event is triggered.
    2. Cross-page communication via EventBus.

  • The development of complex components, the development of provincial and urban three-level linkage selector, the address code of the wechat address library and the provincial and urban code used by the business do not match.

  • The page path has a maximum of 10 levels.

  • Small programs are loaded by subcontracting. Wechat has the following restrictions on the size of small programs package.

  • The subcontracting size of the whole small program does not exceed 8M
  • The size of a single subcontract/main package cannot exceed 2M

Wechat small program mainstream framework comparison

  • wepy
  • mpvue
  • Taro

wepy

Wepy is probably the first small program development framework to be released, providing vue.js style syntax and features, and is probably the most widely used framework at this stage. I developed several small programs are also using wePY this framework. Let me start by explaining why I chose this framework.

  1. The syntax style of class vue.js is suitable for our team’s original technology stack
  2. Support componentization (at that time, wechat official API did not support componentization)
  3. Support for loading external NPM packages
  4. ES6 is supported

In the early days of using Wepy, wepy had its own bugs. Fortunately, the developers were responsive and covered most of the scenarios.

But the biggest pitfall is the way wePY components are implemented. Components use statically compiled components, that is, components are compiled into the page at compile time, and each component is a unique instance. Multiple components share the same data. And compile the components statically. This causes component A, which is referenced on pages A and B, to copy both code inside pages A and B. This results in splitting components without any reduction in package size. Later, after the official API of wechat supported component programming, we gradually reconstructed some core and large components using the original API.

mpvue

Developed by the Meituan team, MPVue, like Wepy, provides a vue.js-like development experience on applets. As a latecomer, we have taken a lot of market share from Wepy (PS: Our team is also considering moving from Wepy to MPVue recently). The framework is a bit more complex than Wepy. Mpvue modifies the runtime and Compiler implementations of vue.js to provide a more similar development experience to vue.js.

Taro

Taro is an open-source multi-end development solution that follows the React syntax specification developed by jd team. I don’t know much about React and Taro, so I won’t have to explain. See the development team’s blog and code for more details – Taro

I read small programs

I would like to talk about my understanding of wechat mini program from the perspective of technology. I think mini program itself is an excellent technical solution of Hybrid App. There are many lessons worth learning, which can be applied to the technical scheme design of Hybrid App. Understanding and learning the principles of small program technology can also better optimize our code.

The rendering layer is separated from the logic layer

Applets use a two-threaded model: the rendering and logic layers of applets are separate

A separate JS runtime environment, compared to a WebView that handles both page rendering and JS execution, offers several advantages:

  1. Js cannot dynamically insert nodes in the page and intervene in the rendering of the page, which solves the problem of security and control, otherwise the online audit of small programs will become meaningless.
  2. The separation of rendering layer and logic layer, reduce the pressure of Webview, JS execution and page rendering can be parallel, there will not be JS execution card main page rendering.
  3. Multiple pages can share a JS running environment, data is very convenient to share, the whole small program life cycle sharing the same context, close to the experience of App.

The disadvantages are:

  1. A lot more webView and JSCore data transfer overhead, data needs to be serialized into a string format for transmission.

Offline package loading

Offline package loading. Common Hybrid App loads THE H5 page through WebView, and the front-end page is placed on the server. Although it guarantees flexibility. However, loading performance and network speed have great influence. The screen switching takes a long time. Small program offline package loading method. Load all front-end resources to the local directory and decompress them. Greatly improve the user experience. However, wechat officials also strictly limited the size of the mini package to prevent the downloading process of offline packages. (In the case of subpackage loading, the subpackage size should not exceed 2M, that is, the resources loaded for the first time should not exceed 2M)

More than a webview architecture

Multi WebView page structure, small program each new open a page, will use a new WebView to render. To prevent webView memory consumption. The applet limit cannot exceed 10 levels.

Preload webview

Preloading webView, wechat will preload an additional WKWebView (ios platform) in the background, users open small programs to save the initialization of wkWebView time.