Recently I saw an article about the small program open source framework, involving the framework I have contact with, understand, a good article, so I bring to share, the following is the original:
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 exploring how to better, more efficient… 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:
(I) 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:
Complete Vuex development experience convenient Vuex data management solution: easy to build complex applications fast WebPack construction mechanism: Custom build strategy, development phase hotReload support using NPM external dependencies using vue.js command line tool vue-CLI quickly initialize project H5 code conversion compiled into applets object code Github: Github.com/Meituan-Dia… Liverpoolfc.tv: 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: 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.
Official website: tarona.aotu. IO/GitHub: 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 for custom component development support for introduction of NPM package support Promise support for ES2015 + features such as Async Functions support for multiple compilers, Less/Sass/Styus, Babel/Typescript, Pug support a variety of plug-in processing, file compression, image compression, content replacement, etc. Github.com/Tencent/wep… Liverpoolfc.tv: tencent. Making. 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：github.com/wdfe/weweb
(2) 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.
It introduces 5 open source frameworks and 2 component libraries. I am not saying the above are not good, they are absolutely good, no matter the above several open source frameworks or component libraries are dachang products, they are very 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:github.com/uileader/to… Website: www.wetouch.net/wx.html
(3) References
Original article by Rolan, link to original article:Click the jump