[Reply “1024”, send you a special push]

Special note: this is I have been in contact with and used, think is the best use of a small open source framework library.

Just look at the open source frameworks and component libraries that are out there to see how popular applets are. Due to the popularity of small program development, everyone is committed to explore how to better, more efficient development of small program, so that many companies have contributed to the small program open source framework and component library.

For example, let me list some:

Open source framework

1、 mpvue

Mpvue is an open source meituan-Dianping front-end framework that uses vue. js to develop small programs. The framework is based on vue. js core, and MPvue modifies the runtime and Compiler implementation of vue. js to enable it to run in the environment of small programs, thus introducing a whole set of vue. js development experience for small program development. Using MPVue to develop applets, you gain the following capabilities based on the applets technical architecture:

  • Radical componentized development capabilities: improved code reuse

  • Complete vue.js development experience

  • Convenient Vuex data management solution: Easy to build complex applications

  • Quick WebPack build mechanism: custom build strategy, hotReload during development

  • Support for using NPM external dependencies

  • Use vue-CLI command line tool vue.js to quickly initialize the project

  • H5 code conversion ability to compile into small program object code

Github：https://github.com/Meituan-Dianping/mpvue

Website: http://mpvue.com/

2, Tina. Js

Tina.js a lightweight and progressive micro channel small program framework.

Features: Light and compact. Easy to use and keep most OF the API design of MINA (official framework of wechat small programs); Regardless of whether you have small program development experience, can easily transition to start. Progressive enhancement, both state manager, routing enhancement, and you can write your own plug-in.

Tina. Js open source framework address: https://github.com/tinajs/tina

3, Taro

Taro is a multi-terminal unified development framework developed by JINGdong – Bump Lab that follows the React syntax specification. If I remember correctly, it was recently opened source.

Using Taro, we can only write one set of code, and then compile the source code separately into codes that can run on different ends (wechat applet, H5, App, etc.) through Taro’s compilation tool. Taro also provides syntax detection and automatic completion functions out of the box, effectively improving the development experience and development efficiency.

Website: http://taro.aotu.io/

GitHub: http://github.com/nervjs/taro

4, wepy

WePY is a framework that allows small programs to support component-based development. By means of precompilation, developers can choose their preferred development style to develop small programs. Framework details optimization, Promise, Async Functions are introduced to make developing small program projects easier and more efficient.

Features:

  • Class Vue development style

  • Support custom component development

  • Supports importing NPM packages

  • Supporting Promise

  • Supports ES2015 + features, such as Async Functions

  • Support multiple compilers, Less/Sass/Styus, Babel/Typescript, Pug

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

  • Support Sourcemap, ESLint, etc

  • Small program details optimization, such as request queuing, event optimization, etc

Making: https://github.com/Tencent/wepy

Website: https://tencent.github.io/wepy

5, weweb

Weweb is a front-end framework that is compatible with applets syntax, so you can write web applications using applets. If you already have an applet, you can use it to run your applet in your browser.

Features: cross-platform, a set of code multi-terminal operation (small program, H5, the future directly packaged into android, ios app is not a dream) own common components, perfect inheritance of small program built-in components compatible with small program RPX syntax, so that the page is easier to adapt to various models

GitHub：https://github.com/wdfe/weweb

Component library

There are also various open source component libraries, such as the following:

Two of the best known examples are Zanui-Syndrome and iView.

I have recommended these two component libraries in my public account before. I will not introduce the specific usage and functions, but I can find my previous tweets or search for them. It’s easy to use.

Dinner is coming

There are five open source frameworks and two component libraries. I’m not saying the ones above are bad. They are all good. But they are just open source frameworks are open source frameworks, and component libraries are component libraries. I have not met the pain point of wechat small program development alone.

Small program development is open source framework is good to use, another is rich component library, pure official launch and can not meet our needs, the above framework and component library are separate. So it doesn’t solve my pain points. The open source framework I recommend today can provide the framework and enrich the extension of many components, so that we do not have to worry about packaging components when developing.

In fact, the component libraries shared above have a major disadvantage. Their component libraries are rich enough, but they are rigid and inflexible for style customization, but this one is much more flexible.

The open source framework I recommend is TouchWx.

Touch WX is a completely free wechat applets development framework, containing rich UI controls to complement the official components. Features are as follows:

1. Component expansion:

More than 30 common components have been added to complement the official components.

2. Function Expansion:

Compatible with Ali iconFONT icon library, massive vector ICONS can be used at will; Add common style library, support less syntax, support global configuration theme color, etc

3. Development experience improvement:

Four file mode changed to single file mode, developed by VSCode editor + plug-in, have web development experience;

4, small program to H5 application:

It can be converted with H5 development framework Touch UI project and published as webApp. Develop one set of code and have two sets of applications.

The framework works as follows:

Compile the code written in Touch WX project and output it directly as the original code of wechat small program project. The expanded 30 + components are fully implemented based on the applets official custom component mechanism (except row&Col).

So it supports all the syntax of applets, and you can develop Touch WX the same way you develop applets.

However, because of the single-file development mode, the code structure of the file is slightly different. Please pay attention to this.

The benefits are:

1. Low developer migration costs.

You can easily port existing applets to the Touch WX project to take advantage of its extended capabilities.

2, easy to check errors.

When encountering problems, developers can also view the output of the original applet code at any time to locate the problem. Don’t get confused whether it’s the framework or your code;

3. Compile on demand

Due to the size limitation of applets, only the components used in framework development will be compiled and output as applets source. It doesn’t print anything that’s not used.

4. No dependencies on the framework.

Later do not want to use this framework, you can directly to the output of the small program engineering maintenance.

So far I think this open source framework is the most suitable and efficient for small program development alone.

GitHub：https://github.com/uileader/touchwx

Website: https://www.wetouch.net/wx.html

Finally, you can long press the qr code below to experience:

Today’s goods are actually quite dry, but the more dry goods, may see less people, or hope we support, and forward, so that more people know such a good development framework.

– Long press to identify concerns –

Technology, workplace, products, thinking

Industry to observe