preface

Due to the company’s business needs, the development of wechat small program will be carried out in the near future. The main purpose of this research is to confirm the development framework of small programs. After a random search on the Internet, two mainstream frameworks Taro and Uni-app are finally selected. The emergence of these two frameworks enables developers to use React/Vue to develop multi-end applications (small programs, H5, mobile terminal). However, due to the participation of IOS and front-end colleagues, this paper will compare Taro, UniAPP and wechat small program native development.

Are there cross-end requirements?

The current business needs is to develop an intelligent management system for co-working, supporting small programs with functions such as qr code scanning for access control, conference room reservation, personal account management, etc. It is not yet certain whether to make it into an App. If we want to make it into an App, using Taro or UniApp may save a lot of development costs. However, we still need to investigate the selection of cross-end framework. After all, the mature solution is React Native/Flutter. This paper will not consider the cross-end problem for the time being.

Scheme comparison

Both Taro and Uni-App are open cross-end cross-framework solutions that support front-end frameworks to develop applet, H5 and mobile app applications. Here’s how they compare to native development

Small program development: Native or optional Framework (wepy/mpvue/ Taro /uni-app)

Taro vs Uni-app vs Native development

| | | framework technology stack WSX | | support platform document & demo support | | community development iterations | | WeChat applet native development | WeChat native development syntax support | | WeChat applet | documentation is rich, accurate search API, The official has a sample demo | | | rich active

What is WXS?

WXS (WeiXin Script) is a set of small program scripting language, combined with WXML, you can build the structure of the page. WXS is an important tool to improve performance and experience. In addition to WXS of wechat small program, there are also SJS of Alipay and Filter of Baidu. These advanced technologies are fully supported by Uni-app. Reference: Enigmatic WXS, how can Uni-app use it to dramatically improve performance

performance

Take a long list as an example: wechat native,uni-app > Taro. Look here. Taro long list performance will be poor, but there are official solutions.

Function implementation

• Native development: Develop directly using the native components and apis provided by wechat – guidelines for small program development.
• Taro: Supports all native components and apis of wechat, unlimited. The framework also encapsulates its own cross-end API, which is used in a similar wayTaro.request()To supportTaro code is mixed with small program code, which can be used to invoke new apis for applets not yet wrapped by the framework, but note that if you reference pages, components, and plug-ins native to the applets, then the project willNo longer has the ability to multiterminal conversion.
• Uni-app: Support all native components and apis of wechat, unlimited. In terms of cross-end, even if you still use the native components and API of wechat, you can also directly cross-end compilation to App, H5, as well as alipay, Baidu toutiao and other small programs. However, for clarity of management, it is recommended to use the UNI encapsulated API, similaruni.request(). At the same time supportConditional compilation, the conditionally compiled code block, you can call the new API and components of each platform

Learning costs

• Native development: need to learn small program native syntax.
• Taro: Basically supports most React/Nerv/Vue grammars. Learn React/Nerv/Vue development can be directly used, otherwise need to learn the framework.
• Uni-app: Basically support the majority of vUE syntax, learn vUE development can be directly used, otherwise you need to learn the framework.

Taro /uni-app does not rewrite the native components and apis of wechat. On the contrary, except for some framework extension components/apis, most of them directly follow the components/apis of small programs, so the biggest difference in learning is the learning of DSL syntax. Of course, people with front-end development experience are more friendly to use the framework. However, it may increase the cost for people who have not learned React/Vue (if there is no plan to move forward in the future).

Of course, basic JS, CSS or to learn, it is worth mentioning that small program native development is ** support Typescript**!

Development experience & Efficiency

• IDE:

  Framework development has a mature compilers (such as vscode) provides a variety of improve the use of plug-ins, WeChat official also provides a small program dedicated IDE WeChat developer tools, the Internet has been criticized are grammar tips incomplete (but under preliminary tried grammar tips are also good, may need to be further developed to truly understand their advantages and disadvantages). Of course, you can also combine wechat developer tools and VScode together to develop small programs.

• Grammar:

  Wechat defines its own exclusive grammar, while the framework uses mature front-end grammars (Vue, React). In terms of learning benefits, learning vue/ React is universal, not just for small programs. Note that unlike the framework, which automatically diff the data before calling setData, passing only the changed data each time, the native framework does not optimize the setData separately, and needs to manually write the optimization code to control setData.

• Engineering:

1. Framework development provides a streamlined code organization, wechat native development, a Page composed of 4 files, a little tedious.
2. Framework development and wechat native support component development, there is also a corresponding component library.
3. Framework development and wechat native support modular development, but wechat native currently does not support the direct introduction of node_modules, developers need to use node_modules recommended to copy the relevant code to the small program directory, or use small program support NPM function.
4. Both the framework development and wechat native support the introduction of some useful state management libraries (such as Vuex/Redux/Mobx, etc.), and wechat native globalData can also be used for basic data management.
5. To use Sass, you need to create a. SCSS file under each page, and use the Gulp build tool to convert the. SCSS file into.
6. Framework development and wechat native support Typescript, with tsconfig.json also has good syntax checking.
7. Framework development has good support for Node, precompiler and Webpack, which is beneficial to development efficiency and engineering construction process. On the contrary, the native engineering ability of wechat is relatively weak. Of course, small program engineering is also in the continuous exploration stage – small program engineering exploration.

conclusion

Whether using Taro, UNI-app or native development, you can achieve all the functions of small programs. The main differences are in the cost of learning and the development experience.

Due to the development mainly to the IOS mobile colleagues, framework some of the advantages of the React/Vue ecological, front-end development engineering, etc.) can’t have a lot of reflected, and small application development for several years, also gradually mature technical support (modular, modular), using the native development a relatively complicated, there is no big problem small applications, Finally, it is recommended to use wechat native development small programs. About micro channel small program native development details can be next article: micro channel small program native development engineering solution.