This is the 7th day of my participation in the August Text Challenge.More challenges in August

Micro channel small program vs Alipay small program vs Baidu small program

There are many similarities between applets, such as similar development environments and similar runtime rendering of content.

Document indexing

WeChat document: developers.weixin.qq.com/miniprogram…

Baidu document: smartprogram.baidu.com/docs/develo…

Pay treasure to document: opendocs.alipay.com/mini/api

Similar content:

• Both have native components and components rendered in a WebView

• Most of the configuration and project structure (app.json/app.js) are the same, even alipay applets directly copied wechat applets before.

• They both support third-party platforms to run user-authorized applets.

Differences:

• Some API contents are different (WX/Swan /my)

• Different platforms focus on different capabilities. Alipay focuses on merchants, Baidu applet focuses on traffic related acquisition, and wechat applet focuses on basic capabilities.

• Only wechat mini program can be used by individuals, while Baidu/Alipay only supports enterprises.

• Baidu API documents, there are a lot of AI-related API to call the small program.

The differences between small programs are embodied in the differences in API. At present, the differences between small programs in running time are very small, and the underlying functions are very stable. When writing small program code, you only need to pay attention to the use of the corresponding API.

Wepy, mpVue, Remax, taro

They are all essentially about making small program development more user-friendly, or demonstrating corresponding capabilities in small program isomorphism.

wepy

Wepy is a development framework focused on small program development, through which we can better organize our small program code.

Features:

Class Vue development style

• Support custom component development

• Supports importing NPM packages

• Supporting Promise

• Supports ES2015+ features, such as Async Functions

• Support a variety of compilers, Less/Sass/Stylus/PostCSS, Babel/Typescript, Pug

• Support a variety of plug-in processing, file compression, image compression, content replacement and so on

• Support Sourcemap, ESLint, etc

• Optimize small program details, such as request queuing, event optimization, etc

<style lang="less"> @color: #4D926F;
.num {
  color: @color;
}
</style>
<template>
  <div class="container">
    <div class="num" @tap="num++">
      {{num}}
    </div>
    <div>{{text}}</div>
    <input v-model="text"></input>
  </div>
</template>
<config>
{
  usingComponents: { customCompoent:'@/components/customComponent'},
  vendorComponent: 'module:vendorComponent'
}
</config>
Copy the code

Conclusion:

• Use internal constraints to develop applets that are eventually statically compiled into a applets directory structure

• Vue style, only support wechat small program, later if you want to change the framework will be difficult to migrate

• After V2, the development experience is significantly improved compared to v1

Source:

Bin /wepy-build.js is used to execute compilation, and different compilation methods are identified by file names. The callback functions registered by different compilation methods are core/plugins/parser/ registered.

mpvue

Mpvue is a framework developed through VUE that supports multiple functions at the same time. Currently support wechat, Baidu, Toutiao and Alipay mini program. It is developed as vue with Wepy, but there are some differences between it and wepy, mainly in that it relies on some of the vue. Runtime.js code at runtime.

The characteristics of

• The vue. Runtime core method is retained, seamlessly inheriting the base capabilities

• Provides the ability to convert vUE’s template syntax to the WXML syntax of applets

• Modified the construction configuration of VUE to build code formats that conform to the structure of applets: JSON/WXML/WXSS/JS files

The source code

Mpvue source code, the author of vue also wrote a lot, mainly because this project also used a lot of vue runtime things, so different from wepy compile type, MPVue in addition to the basic static compilation, runtime or add some vue.runtime.js elements, It will be a little easier in project migration.

For example, in Platforms /mp/ Compiler/wX, methods are added to compile and parse sections of wechat applets.

In the side runtime, a series of diff/events/ lifecycle functions are implemented.

conclusion

Note: Currently mpvue is not recommended due to too many legacy issues and long-term non-maintenance, and the open source community has basically abandoned the framework.

remax

Remax is a mini program making framework launched by Alibaba, which can run in wechat mini program/Alipay mini program/Bytedance mini program at the same time.

Features:

• Use react style and approach for small application development
• Remax converts code to multiple applets.
• Full TypeScript support.

export default class IndexPage extends React.Component {
  // The didMount time for the page component is onLoad
  componentDidMount() {
    console.log('IndexPage load')}onShow() {
    console.log('IndexPage show')}render() {
    return <View>Hello world!</View>}}Copy the code

The source code

Compared to other frameworks, Remax uses less static compilation and deals mainly with runtime work.

If you use a framework of other statically compiled types, you can’t handle the following situations:

render() {
    const child = <View>Hello remax!</View>;
    return <View>Hello world! {child} </View>;
}

render() {
    return <View>Hello world! <View>Hello remax!</View> </View>;
}
Copy the code

Because the internal child is controlled by JS, static compilation mostly doesn’t analyze the relationship between specific components and UI variables. Most frameworks just use a simple XML library for structure analysis, so this variable determines the UI at runtime.

Remax doesn’t have this problem. It implements a setup similar to the React-DOM at runtime. The only difference is that the react-DOM document and window contents are replaced by the existing contents of the applet. This resulted in a set of React-Reconciler.

import ReactReconciler from 'react-reconciler'
let reconciler = ReactReconciler({
  createInstance(type) {
    return document.createElement(type)
    // Create instance instead of applet internal method
  },
  appendChild(parent, child) {
    parent.appendChild(child)
  },
  removeChild(parent, child) {
    parent.removeChild(child)
  },
  insertBefore(parent, child, before) {
    parent.insertBefore(child, before)
  },
})
Copy the code

taro

Taro is a well-known small program development framework, currently supports wechat/Baidu/Alipay/Baidu small program and H5, currently supports the most platforms, is also a framework platform under continuous maintenance. It is also a multi-terminal development solution that follows the React syntax specification. Using Taro’s compilation tool, compile the source code to run on different terminals (wechat, Baidu, Alipay, Bytedance, QQ, JINGdong miniprogram, Kuaiapp, H5, React-Native, etc.).

features

• NPM/YARN can be used to install and manage third-party dependencies

• Support using ES7/ES8 or even the newer ES specification, everything is self-configurable

• Supports the use of CSS precompilers, such as Sass

• Support for state management using Redux

• Support for state management using MobX

• Small program API optimization, asynchronous API Promise and so on

The source code

It is a statically compiled framework, so that means our final code is already compiled to run directly on the platform, so the main work for Taro is at the compile stage.

For the translation of wechat applet, we only need to pay attention to taro-tarnsex-wx. In index.ts, the compiled results are analyzed through TS and Babel, and the AST structure analyzed is processed, and different operations are performed through different AST results.

After execution, JSX is converted to WXML through parseJSXChildren and other parsing methods.