This page is translated by Google Cloud Translation API

Switch to Chinese

Mixed development issues of uni-app and native App:

First of all, please be sure to confirm the question of who is the master and who is the slave between uni-app and native code.

• If your application is developed by uni-app and needs to expand some native capabilities, then first search for ready-made plugins in the plugin market. If not, just develop it yourself. For development documents, please refer to Native Plug-in Development Tutorial.
• If your App is native developed, there are two ways to realize some function columns through uni-app
  • Integrate the uni applet SDK in the native App, Refer to
  • If you do not want to integrate the native sdk, publish the uni-app code in H5 mode and open it in the native app via webview.

If the application is developed mainly by uni-app and you just want to package it offline, then you should not use the uni applet SDK but the App offline packaging SDK, refer to. Also note that offline packaging cannot enjoy paid native plug-ins in the plug-in market. If you have relevant requirements, you need to develop your own native plug-ins. Also note that offline packaging cannot enjoy paid native plugins in the plugin market. If you have relevant needs, you need to develop native plugins yourself.

The problem of mixed development of uni-app and native applet:

• Method 1: Convert native MiniApp to uni-app source code. There are various conversion tools, see
• Method 2: Create a new uni-app project, convert the code of the native MiniApp into a MiniApp component, and then integrate it into the uni-app project. uni-app supports the use of MiniApp wxml components, [reference](/tutorial/miniprogram-subject.md#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E8%87%AA%E5% AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E6%94%AF%E6%8C%81)
• Method 3: The natively developed applet is still retained, and some new functions are developed using uni-app.

  • Use the feature that releases as a mixed subpackage

    • In cli, execute the command: npm run build:mp-weixin -- --subpackage=sub1 or yarn build:mp-weixin --subpackage=sub1

    Notice:

    • After the mixed sub-package is released, the onLaunch in App.vue will be triggered when the sub-package is entered for the first time (HBuilderX 3.1.1+).
    • During development, it is necessary to adjust the absolute path of resources (images, css, js, etc.) and pages to relative paths, otherwise, when packaged into the native applet, path search errors may occur.
    • 需要自己把页面或分包配置添加到已有小程序的app.json中。
    • 目前支持微信小程序、百度小程序、支付宝小程序、抖音小程序、飞书小程序、QQ小程序。

  • Third-party developer plugin, Reference

If you want to give full play to the cross-end features of uni-app and compile it to various other small program platforms, it is recommended to use scheme 1.

If you don't need other small program platforms, only need h5 and app, then plan 1 and plan 2 can be used.

If you only need to develop WeChat mini-programs, but want to use Vue to develop, or want to use the plug-in ecology of uni-app, or want to reuse some pages across multiple terminals, then use option 3.