几招让你轻松解决 Uni-app、原生 App 混合开发问题

在面对多平台开发需求的时候，Uni-app 框架已经成为越来越多公司的选择。同时不少的 APP 开发项目也在发布以后想要引入 Uni-app的功能，而 Uni-app 和 原生 APP 混合开发的时候其实也会遇到不少的问题。今天智密科技就来分析一下，如何一步步解决混合开发问题。

其实想要在原生 APP 或者 Uni-app 基础上进行混合开发，首先要确认原生代码与 Uni-app的关系，它们之间主从问题必须弄清。

Uni-app与原生App混合开发问题：

• 假如你原来就是使用 Uni-app来开发的，原生能力需要扩展，那么先在插件市场寻找有无插件给你现成使用，如果没有，就自己开发，文档开发可参考原生插件开发教程。
• 假如App是你原生开发的，想通过uni-app来实现部分功能栏目开发，有2种方法
  • 参考(opens new window)如果你原来的旧项目是基于原生的 App，而现在想要引入基于 Sdk的小程序，可以参考链接
  • 如果你原来的旧项目不想集成原生的sdk小程序，那可以将 Uni-app的代码发布成 H5的方式，在原来的 App里通过 Webview的方式来打开。

（tip：如果你开发的应用是以 Uni-app为主，想离线的方式来打包，那么不使用 Uni的小程序 Sdk来开发，而是使用离线 App来为 Sdk打包，参考。 另外离线打包时要注意插件市场无法享受的原生付费插件，有相关的需求需自己进行原生插件开发。）

 Uni-app与原生小程序混合开发问题：

• 方案1：把基于原生的小程序切换为 Uni-app的源码。转换工具请参考详见
• 方案2：建立一个新的 Uni-app项目，将小程序的代码变成小程序组件，然后把小程序组件整合到 Uni-app项目中。Uni-app支持使用小程序 Wxml组件参考
• 方案3：仍保留开发原生的小程序，新功能的一部分使用Uni-app来开发。

 使用发行为混合分包的功能

• 在 HBuilderX 3.1.0+ 中点击发行小程序的菜单，选择发行混合分包，然后填写用于分包目录的名称，全部打包后，将对应目录文件复制到已有小程序之中，需要自己补充原小程序app.json中的页面或分包配置

• 在 Cli 中，执行命令：npm run build:mp-weixin -- --subpackage=sub1 或 yarn build:mp-weixin --subpackage=sub1

注意：

• 发行混合分包后，App.vue中的 OnLaunch在首次进入分包时会触发(HBuilderX 3.1.1+)。
• 开发时需要将资源(Eg:图片，Css，Js)页面的绝对路径调整为相对路径，否则打包到原生小程序中时，会出现找不到路径的错误。
• 需把页面或分包配置添至原有小程序的 App.json之中。
• 目前支持微信小程序、支付宝小程序、QQ小程序、字节跳动小程序、飞书小程序。

三方开发者插件，参考

假如你想充分发挥 Uni-app的跨端特性，编译到各种其他小程序中，推荐使用方案1。

假如不需要其他小程序，仅需要使用H5和App，那推荐其他两种方案。

假如只需开发微信小程序，但想使用 Vue来开发、或想利用 Uni-app的插件生态、或者部分页面想跨多端复用，那使用方案3。

智密科技，专业开发各类Uniapp原生插件、目前交付给客户的插件已经超过100个各类插件，正在陆续整理上架并分享一切关于Uni-app的教程、资讯。