What are the pain points of applets development?

  • Frequently call setData and the page jumps and flashes during setData

  • Too weak componentization support (almost none)

  • Do not use precompilers such as LESS and SCSS

  • Request concurrency limit

Why use third-party frameworks?

  • If you are familiar with Vue or React, you can learn quickly and cheaply
  • A set of code can be compiled and run in multiple terminals (wechat, Alipay, H5,RN) Alipay small program is not perfect
  • Componentized development, perfect solution to component isolation, component nesting, component communication and other problems
  • Third-party NPM resources are supported
  • Make the small program support Promise, solve the callback annoyance
  • Features such as Generator fu-NCtion/Class/Async Function can be used to improve development efficiency
  • Optimization of the small program itself, such as life cycle supplement, performance optimization and so on
  • Support style compiler: Scss/Less, template compiler, code compiler: Babel/Typescript.

Third party frameworks compare to Wepy MPvue Taro

Here I make a comprehensive comparison of three commonly used applets that have been open source. There is another applets translation framework named Nanchi based on React. Due to lack of research and research, I will not make a comparison.

  • WEPY Tencent. Making. IO/wepy/docume…

Tencent’s open source vUe-like syntax framework draws on vUE’s syntax style and features, and supports many features of VUE, such as parent-child components, communication between components, computed attribute calculation, wathcer listener, props value passing, slot distribution, and many advanced features: Mixins, interceptors, etc. The first version of WePY was released in December 2016, when the applets were first released. So far, there are 52 versions of WePY, with the latest version being 1.7.2.

  • MpVue Mpvue.com/mpvue/#-htm…

Meituan team open source a use vue. js development of wechat small program front-end framework. Using this framework, developers will get a complete vue.js development experience, while providing the ability to reuse code for H5 and applets. Mpvue got a 2.7K star just a few days after its release, and it’s skyrocketing to 13.7K star so far.

  • Taro taro.aotu.io/

Jingdong Concave Laboratory open source a use of React. Js development of micro channel small program front-end framework. It adopts the same componentization idea as React, and maintains the same component life cycle as React. Meanwhile, it supports the use of JSX syntax to make the code more expressive. Use Taro to develop the same development experience as React. In addition to h5, react can also be compiled as ReactNative.

The life cycle

Mpvue and WEPY, both vUE specifications, have different life cycles and different approaches

wepy

Wepy’s life cycle is basically the same as native applets, with some vUE features on top of it; Methods attribute in WePY can only declare bind and catch events of WXML tags on the page, but cannot declare custom methods, which is inconsistent with the usage in Vue. ` import wepy from ‘wepy’;

export default class MyPage extends wepy.page { // export default class MyComponent extends wepy.component { customData = {} // Customize data

customFunction ()  {} // custom method onLoad () {} // life cycle function onShow () {} // life cycle function only exists in Page config = {}; // Configuration data that exists only in the Page instance, corresponding to the native page.json file data = {}; // All data required for the page must be declared here, which can be used for template data binding components = {}; Mixins = []; mixins = []; mixins = []; mixins = []; // Declare that the page references a Mixin instance computed = {}; // Declare the calculated attribute (see later) watch = {}; // methods = {}; // Declare the event handler for the tag in the page WXML. Note that this is only used to declare the bind and catch events of the tags in the WXML page. // Declare event handlers between componentsCopy the code

} `

mpvue

Mpvue is compatible with the life cycle of applets in addition to the life cycle of Vue itself. This part of the life cycle hook comes from the Page of wechat applets. It is not recommended to use the life cycle hook of applets except in special cases.

A simple example

Taro and React have exactly the same lifecycle

The list of rendering

There are also different ways to apply all three to list rendering

Wepy When you need to render a WEpy component in a loop (similar to rendering native WXML tags through the WX :for loop), you must use the auxiliary tags defined by Wepy

Mpvue uses V-for in line with Vue, just note that nested list rendering must specify a different index!

Taro’s list loop is basically the same as react. In React, JSX is a regular JS implementation that compiles each JSX element. The React Element function creates a JavaScript object, so you can actually write code like this and React will render completely:

However, in Taro, JSX will compile into a wechat applet template string, so you cannot treat the template generated by the Map function as an array. When you need to do this, you should first process the array to loop over and then call the map function with the processed array. For example, the above example should be written as:

The event processing

Mpvue currently fully supports the event processor of applets, introducing the virtual DOM of VUe. js. Events bound in the preceding template will be hung on VNode. Meanwhile, Compiler binds applets’ events on WXML and makes corresponding mappings. So when you actually click, handleProxy sends the event type to vNode via the Runtime, just like Vue does on the WEB, so it can be lossless. Custom events and the $emit mechanism are also supported

Event mapping table, WEB events on the left and applet events on the right

**click** : 'tap',<br>
**touchstart**: 'touchstart',<br>
**touchmove**: 'touchmove',<br>
**touchcancel**: 'touchcancel',<br>
**touchend**: 'touchend',<br>
**tap**: 'tap',<br>
**longtap**: 'longtap',<br>
**input**: 'input',<br>
**change**: 'change',<br>
**submit**: 'submit',<br>
**blur**: 'blur',<br>
**focus**: 'focus',<br>
**reset**: 'reset',<br>
**confirm**: 'confirm',<br>
**columnchange**: 'columnchange',<br>
**linechange**: 'linechange',<br>
**error**: 'error',<br>
**scrolltoupper**: 'scrolltoupper',<br>
**scrolltolower**: 'scrolltolower',<br>
**scroll**: 'scroll'<br>
Copy the code

Note (official documentation) :

  • Native events that are not in the list can also be used, such as the bindregionChange event that changes bind to @@regionChange in the DOM. This event is also very special and has two event types: begin and end. So we can’t tell what the event is in handleProxy, < map@regionChange =”functionName” @end=”functionName” @begin=”functionName”>
  • When both bind and catch events are bound at the same time, only bind is triggered, and no catch is triggered.
  • The use of the event modifier.stop prevents bubbling, but binding a non-bubbling event at the same time invalidates the catchEventName on that element! Capture does not support 1.0.9. Self does not support identifies.once does not support prevent. Since the small program does not have removeEventListener, although it can be handled directly in handleProxy, it is very inelegant, which is against the original intention, so it is not considered for the moment
  • There’s no keyboard in the applet, so…

Wepy event binding differs from VUE in that it provides syntactic optimization based on native applet events

Bind event bindtap=”click” replace @tap=”click”, cancel bubble original catchtap=”click” replace @tap.stop=”click”

Capture -bind:tap=”click” replace @tap.capture. Stop =”click”

The event handling of the Taro element is similar to that of the DOM element. But there are a few grammatical differences:

The Taro event binding property is named in camel case instead of lowercase. If you use JSX syntax you need to pass in a function as an event handler instead of a string (written as a DOM element). For example, the traditional wechat applet template:

Taro is slightly different:

Another difference in Taro is that you cannot use a catchEvent to prevent events from bubbling up. You must explicitly use stopPropagation. For example, to prevent events from bubbling you can write:

Request the request

Wepy makes changes to the wx.request acceptance parameters and, notably, provides intercapter interceptors for global use

The interceptor

Taro encapsulates a request twice. You can use the taro. Request (OBJECT) to initiate network requests.


State management

  • Wepy can refer to Both Redux and Mbox. At present, Wepy scaffolding has been integrated with Redux, so you can choose it as needed.
  • Using vuex mpVue;
  • Taro use Redux;

How to choose the right project for yourself

  • If you only need to do a small wechat program, choose MPvue or taro according to their own good framework
  • Mpvue or WEpy is recommended for existing projects that want to migrate to applications and are developed using VUE
  • If you are developing an old project using React and need to partially migrate the applet, use Taro
  • If it is a new project and new project need to be at the same time support WeChat small program and pay treasure to small procedures, it is recommended to use native development, because the current framework of translation pay treasure to support small programs and is not very good, bad and wrong location changes, but if it is a small demo project that does not involve too much logic framework can be used as the early adopters; However, if it involves too much interaction logic, it is not recommended to use frame translation. Since Alipay applet is basically consistent with applet in view layer, it is recommended to manually change part of the replacement method and globally replace some attributes or file names. For example, WXML is replaced by AXML, and the manual conversion time ratio is about four to one. Of course it’s best if you have enough people on one side to develop one…

Time front-end fresh technology push, regular front-end boutique articles to share, welcome to pay attention to the public number front-end small garden.