preface

From the beginning of contact with small programs, until now, large and small to do almost five or six small program projects, small projects only a few pages, large projects have dozens of pages. This article is a summary of the previous project, the scaffolding, development framework and later optimization of the project is a gradual process of evolution, if you are planning to develop small programs or already developing small programs, I believe that these experiences will be helpful to you.

The scaffold

Small program developer tools can be directly written small program, but development tools like the sword in the hands of warriors, years of training, has reached the unity of the sword, suddenly change the weapon, it is bound to affect the efficiency of the enemy, so it is necessary to use their familiar development tools.

My company is basically small and medium-sized companies, the project development cycle is very short, the preparatory work is only a few days at most, so it is difficult to lift a set of scaffolding and then used for project development, looking for high-quality resources on the Internet is the best choice.

Justjavac’s open source project wechat applets development resources summary, covering a large number of high quality applets development resources, recommended in this wave.

Of course, the choice of scaffolding also depends on the project, if only a few pages of the project, a heavy set of tools may be a bit gild the lily. Our approach is small projects, direct masturbation, large projects to choose high-quality resources on the network + rewrite their own.

  1. 17 years of e-commerce project, few modules, simple scaffolding, gulP to monitor file changes, real-time compilation, support ES6+ syntax.
  • Scaffold address
  1. WePY was used for the development of the e-commerce project in the middle of 2018 in the new company. The features are briefly introduced as follows:
  • Class Vue development style
  • Componentized development (When WePY came out, applets didn’t support components)
  • Support for loading external NPM packages (applet native also supported)
  • Compiled using Babel, supports ES6/7 syntax
  • Optimized for native apis

See the WePY documentation for more details, and it will be mentioned in the framework selection later on.

  1. A recent real estate program that is also intended to be used in the next program, appellate P-start, has the following features:
  • NPM package import is supported
  • Support promise, async/await and other latest syntax
  • Support for multiple compilers, such as PUg /less/stylus
  • Support ESlint
  • Support for local mock data
  • Support one – click generation project, component templates
  • Supports pre-release resource compression
  • Support custom plug-ins
  • A variety of tools to speed up development

Address for weapp – the start of the project, including weapp plugin – the require (analysis rely on import third-party NPM), there is a problem, the Windows operating system path will appear mistake, I has been fixed, and gives the author raise the PR, but the author did not fix the problem, If any students want to use this scaffold, please download my modified file to replace, download the address.

I also recommend the directory structure of the environment I build based on appellate P-start:

├─ ├─ dist // Json ├─ Package. json ├─ project.config.json // Project Configuration File ├─ SRC │ ├─ ├─ app.wxss │ ├─ app.json │ ├─ app.wxss │ ├─ app.json │ ├─ app.wxss │ ├─ app.wxss │ ├─ app.js │ ├─ app.js │ ├─ app.js │ ├─ app.json │ ├─ app.wxss Equivalent to small program under the root directory of the app. WXSS │ ├ ─ ─ assets / / projects to use static resource │ │ └ ─ ─ images │ │ ├ ─ ─ example │ │ └ ─ ─ TAB │ ├ ─ ─ │ components / / common components ├ ─ ─ page/store/small program each page file │ │ ├ ─ ─ example / / example page │ │ │ ├ ─ ─ the components / / the components in the example page │ │ │ ├ ─ ─ index. The js │ │ │ │ ├── ├.json │ │ ├── WXML │ │ ├── WXSS │ │ ├── ├─ template │ // Example the page template │ │ │ └ ─ ─ WXS / / in the example page WXS file │ │ ├ ─ ─ globalStore. Js / / global Shared data │ │ └ ─ ─test│ │ ├ ─ ─ index. Js │ │ ├ ─ ─ index. The json │ │ ├ ─ ─ but WXML │ │ └ ─ ─ but WXSS │ ├ ─ ─ the template / / public template │ └ ─ ─ utils / / Public methods/tools │ ├─ Config.js // Some configuration information │ ├─ create.js // State management │ ├─ mitt Util. Js / / public methods │ ├ ─ ─ wxRequest. Js / / encapsulated small program request data method │ └ ─ ─ wxapi. Js / / Promise on small application API encapsulation └ ─ ─ weapp. Config. Js / / profile of scaffoldingCopy the code

The project address is click to view, if you feel useful, please Star or fork.

Of course, there are also a lot of excellent scaffolding online, you can choose according to their own needs yo.

Applets development framework

In 17 years, I didn’t use open source framework and directly used native small program to write the project. I don’t have many problems in the development process. I only remember that I used a rich text plug-in, wxParse, and now it has more than 5000 stars. However, I still used this plug-in in the recent project, because the backend brothers said that they could not convert HTML into the data format required by rich-text. The backend is Java, please leave a message below if you use this component, I will go to despise the backend.

As mentioned above, I have used WePY framework in my project development process, so I will briefly list the three popular application frameworks WePY, MPvue and Taro, and then focus on WePY:

  1. Mpvue (Meituan)
  • 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
  1. Taro (JD)
  • React Syntax style
  • NPM/YARN can be used to install and manage third-party dependencies.
  • With ES7/ES8 or even newer ES specifications, everything is self-configurable.
  • Use CSS precompilers such as Sass.
  • Use Redux for state management.
  • Use Mobx for state management.
  • Program API optimization, asynchronous API Promise and so on.
  1. WePY

It has been listed above and will not be repeated here

The three frameworks are the front-end team products of the three big players in China. In my impression, MPVue and Taro came out in the second half of 2018, while WePY came out the earliest, almost at the same time with small programs.

Mpvue embraced Vue, Taro embraced React, WePY held Vue’s hand, mpvue and Taro did not use, we just develop a small program, do not have to do H5 and RN to share a set of code, so 18 years of development of an e-commerce small program to choose WePY, after all, Tencent’s product, son.

Later learned, is the son of tencent, yes, but is adopted, WePY is originally a tencent internal staff’s personal project, tencent team later to see this project is good, by the authorities to maintain, thus brings some problems, in Denver for an exclusive interview with WePY author seen (like interview, the article I can’t find it), the author’s own admission, WePY has some core code flaws that will be difficult to fix in the future, such as the dirty check mechanism, which is said to be greatly changed in 2.0.

Post one of the issues of WePY, we were in the same mood as him at that time, but we didn’t need to refactor, the project died, hahaha (sad smile)

I have also written a post about “wePY + appellate development failures” and “solutions”. I do not want to mention some of the problems encountered during the development process and “solutions”.

If you want to ask me which framework is suitable for developing small programs? I can only give a suggestion, to be decided according to the demand, if just want to be a small program, don’t use framework, the smaller the grammar of the program is already very perfect, why go to study two sets of grammar, out of the question, and change their framework, sum up a word is, under the small program native they must have some problem, original no problem, They might build it for you.

Of course, if you have to write a set of code for H5 and RN, then you can consider MPvue and Taro, the author updates frequently, there is a team maintenance, as to whether it can improve efficiency, also depends on the demand, we will not choose any framework now, the small program has already played very familiar, there is no need to do another thing.

Applets development suggestions

Along the way, we’ve rounded up some of the best development practices we’ve ever seen. Here are some of the best practices we’ve ever seen.

  1. The directory structure

Posted on the scaffold in the third paragraph of the directory structure, is a form at the moment we feel better (see umi project proposal), according to the code page organization, will need the contents of a page in the same folder, convenient maintenance and future development has a similar page copy, there is public components, on the outside of the folder, When a project gets big, this directory structure really comes in handy.

  1. Component hierarchy

The level of components really should not be too deep, 2 layers is the best, not more than 3 layers, some of the previous project packaging components too deep, late maintenance, according to the data transfer layer by layer to find the code, it is not too cool (irony).

  1. State management

There are also a number of state management frameworks available for appellate programs. Redux, Mobx, and “appellate PX” based on Redux are all very good. I would like to recommend two “appellate PX”, “OMi-MP-create”, that I have used and intend to use. I’d better use it for big projects, because it’s not easy to maintain.

  1. Frequent setData functionality into components

E-commerce projects, not similar to the countdown function, such as the need for frequent setData operation function, should be placed in a separate component, why? When you do “setData”, a appellate program will perform a “loop” process that monitors data methods. For example, when you do “setData”, a appellate program will execute functions in WXS.

  1. The use of WXS

Applet support for JS expressions is not very good, of course, even if it can, I have seen such code

              <block wx:if="{{drawgift.giftDetail.virtualGoods.length>1||((drawgift.giftDetail.realGoods.length>0||drawgift.giftDetail.couponGoods. length>0)&&drawgift.giftDetail.virtualGoods.length>0)}}">

Copy the code

Wouldn’t it be nice to put the logic of these judgments into WXS for unified maintenance? Also, officials say that WXS in applets can be anywhere from 2 to 20 times faster than javascript code on iOS devices, so use it.

  1. Control package size, subcontract loading, etc

Do not use the package, don’t be lazy, all delete, as for subcontracting loading, etc., recommend to see this article, I will not be wordy micro channel small program: some operation details and targeted optimization strategy

conclusion

The specific technical points involved in the article are not many, more is a review of the way through, feel helpful children’s shoes, point 👍 yo!

The resources

  • WePY document
  • Mpvue document
  • Taro document