There is a very large wechat mini app in the company. Is it feasible to use UNI-App to develop new functions? What are the pros and cons?

First look at the official solution

uniapp.dcloud.io/hybrid

Option 1: Convert native applets to uni-app source code. There are a variety of conversion tools, see

Option 2: Create a Uni-App project and convert the native applets into applets that are integrated into the Uni-App project. Uni-app supports the use of applets WXML components, see

Method 3: The native development of small programs will still be retained, and some new functions will be developed using UNI-app.

We chose the third solution, preserving the native applets and developing new functions using UNI-app.

Let’s start with a new native applet demo

The directory is as follows

Make a note of that and go create the Uni-app project, which we did with vue-CLI

For uni-app creation, select the default template vue create -p dcloudio/uni-preset-vue uniapp-projectCopy the code

The directory is as follows

Now let’s package a child application

NPM run build:mp-weixin -- --subpackage=sub_uniapp // or YARN build:mp-weixin --subpackage=sub_uniappCopy the code

Note that we copied the sub_uniapp folder under dist/build/mp-weixin/ into the root of the native applet.

Then add the corresponding page path to the app.json file

Next we go to this page

The image is not displayed

We need to go to the Uni-app project and change the image path on the page from absolute path to relative path.

Then, repackage, copy into a small program, and revisit the page

At this point, the basic functionality has been implemented.

There are some issues to be aware of:

  1. The app.vue onLanuch life cycle in uni-app is not triggered. In subcontracting, it is triggered once when entering subcontracting for the first time

  2. If you need to rely on methods in native applets in UNI-App, it is not easy to do.

  3. Increased project complexity in project management.