The paper

Using uni-App or other cross-end frameworks such as Taro for small program development can often greatly improve development efficiency. But this efficient definition tends to be for new projects built from scratch, and for existing and published applets native projects that want to be developed with such cross-end frameworks, the results are often not satisfactory. After many practices within the team, we have the following combined development solutions for some actual scenarios (not all of them).

uni-app

Uni-app is a framework for developing all front-end applications using vue.js. Developers write a set of code that can be published to iOS, Android, Web (responsive), various mini programs (wechat/Alipay/Baidu/Toutiao/Feishu /QQ/ Kuaishou/Dingding/Taobao), Kuaiapp and many other platforms.

Project background

We needed to quickly develop a new applets project and the cross-end framework was specified to be developed using the UNI-APP framework. At the same time, we also received 5 independent native small program projects. The requirement is that all the current small programs should be integrated in the development of this new project.

Then the general scheme is as follows:

1. The new project adopts uni-App cross-end framework development, while the old project remains unchanged (independent small program release is maintained). Add entry to the new project, which can jump to various existing old projects.

2. The new project adopts uni-App cross-end framework for development, and all the content of the old project is rewritten through uni-App framework to achieve the overall project with unified technical specifications.

3. The new project is developed with uni-App cross-end framework, and the content of the old project is merged into the new project through automated scripts to achieve a unified overall project release.

Decision making

Plan 1 must be the one with the lowest cost and risk, the lowest technical difficulty and the highest efficiency. But the final superior demand is that the need to integrate multiple small programs into a small program, reduce the annual fee, running cost.

Plan 2 is technically passed. You say what? Rewrite all of other people’s old projects. Do you have requirements documentation? Do you have time? Not happy to write, who love to do who take to do.

So plan 3, mixed development, no choice, but also reasonable.

architecture

Based on sufficient research and practice, the current uni-App framework and native applets can not be well combined. Therefore, it is necessary to compile uni-App and merge it with native applets. Specific details need to be paid attention to as follows:

1. Subcontracting structure: New projects developed by UNI-App need to be used as the main package, while all existing native applets are connected in the form of subcontracting (of course, the internal content of uni-App project can still be subcontracted, and the content of native applets can also be subcontracted).

2. Extract global logic: All the original applet logic, application level methods originally registered in app.js need to be merged into the main package logic developed by uni-App framework. For no other reason, subcontracting projects no longer have applets app level profile. Applets app level profile can only be set in the main package. Therefore, the function content at the application level of the original applet app needs to be extracted and injected into the main package (UNI-App project) app.js for processing.

3. Subcontracting restrictions: For each subcontracting restriction, please pay attention to the official wechat document. The size limit of each subcontracting is 2M, and the logic between subcontracting cannot be referenced to each other.

4, resource path: because after the automatic merge operation, the directory structure of the native applet will be adjusted, we need to pay attention to the reference path of the resources in the applet, should be changed to a relative path or online resources (of course, through the automatic command, you can do path matching and replacement, but also can do a lot of special operations).

Overview of the Merger Process

The main operation steps are as follows:

1. Small program compilation of uni-app project and output to dist directory.

2. Execute automated scripts.

  • Step 1: Copy the contents of the applets output by UNI-app to the pre-upload directory XXX.
  • Step 2: Copy the specified contents of the native applet project into the pre-upload directory XXX as a subcontracted structure directory.
  • Step 3: Verify and merge the app.json configuration file output by uni-app project with the route configuration in the native applets project app.json file.
  • Step 4: Preview the pre-upload directory through wechat developer tools, verify whether the function of the small program is complete, and finally release to the official platform.

The last

Technical solutions are based on the actual application scenarios as the technical background, according to the existing technical architecture, and then formulated and implemented according to local conditions. The final solution described above is not suitable for all business scenarios, and the overall package size of the combined project, the later business expansion, and the stability and ease of use of automation tools also determine the efficiency of the solution in practical application.

The resources

  • Micro channel small program subcontracted loading
  • Uni – the app’s official website