UniApp 分包异步化配置及组件引用解决方案

具体参考微信小程序文档基础能力 / 分包加载 / 分包异步化

一、分包页面组件配置

在 UniApp 的pages.json中,为分包页面(或主包如 tabbar 页面)配置异步组件时,需同时设置usingComponentscomponentPlaceholder

javascript 复制代码
{
  "path": "pages/smart/index",
  "style": {
    "navigationBarTitleText": "智能家居",
    "disableScroll": true,
    "backgroundColor": "#F9FAFB",
    "backgroundColorContent": "#F9FAFB",
    "backgroundColorTop": "#F9FAFB",
    "backgroundColorBottom": "#F9FAFB",
    // 声明需要引入的异步组件
    "usingComponents": {
      "smart-device-detail": "/pages/smart/sub/components/smartDeviceDetail",
      "normal-device-detail": "/pages/smart/sub/components/normalDeviceDetail"
    },
    // 组件未加载完成时的占位组件
    "componentPlaceholder": {
      "smart-device-detail": "view",
      "normal-device-detail": "view"
    }
  }
}

解决组件找不到的问题

直接上述配置可能导致 "组件找不到" 报错,原因是 UniApp 的摇树优化会过滤未在页面中显式引入的组件。

解决方案:在对应的分包页面内手动引入组件

二、跨分包 JS 代码引用

跨分包引用 JS 可直接使用微信小程序的语法,支持两种方式:

javascript 复制代码
// subPackageA/index.js
// 使用回调函数风格的调用
require('../subPackageB/utils.js', utils => {
  console.log(utils.whoami) // Wechat MiniProgram
}, ({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})
// 或者使用 Promise 风格的调用
require.async('../commonPackage/index.js').then(pkg => {
  pkg.getPackageName() // 'common'
}).catch(({mod, errMsg}) => {
  console.error(`path: ${mod}, ${errMsg}`)
})
相关推荐
奶糖 肥晨4 小时前
微信小程序隐藏滚动条多种方法教程
微信小程序·小程序·notepad++
计算机学姐4 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
sen_shan4 小时前
《微信小程序》第三章:Request封装
微信小程序·小程序
sen_shan4 小时前
《微信小程序》第一章:开发前准备与配置
微信小程序·小程序
游戏开发爱好者85 小时前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
stark张宇9 小时前
超越 Hello World:深入小程序 Hybrid 初衷、安全配置与上线全链路
nginx·微信小程序·php
菜鸟una11 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
shykevin13 小时前
uni-app x导航区域跳转
windows·uni-app
2501_9151063214 小时前
iOS 混淆与 IPA 加固全流程,多工具组合实现无源码混淆、源码防护与可审计流水线(iOS 混淆|IPA 加固|无源码加固|App 防反编译)
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者814 小时前
用多工具组合把 iOS 混淆做成可复用的工程能力(iOS混淆 IPA加固 无源码混淆 Ipa Guard)
android·ios·小程序·https·uni-app·iphone·webview