微信小程序分包异步化，分包之间可以互相使用自定义组件

最新推荐文章于 2025-11-07 16:23:31 发布

转载最新推荐文章于 2025-11-07 16:23:31 发布 · 1.6k 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/m0_65894854/article/details/129990505

文章标签：

#微信小程序 #小程序

小程序专栏收录该内容

34 篇文章

订阅专栏

本文介绍了如何在uni构建的微信小程序中启用分包功能，包括在manifest.json和pages.json中配置，创建并使用子包中的自定义组件，以及处理子包未下载时的占位组件设置。

官网链接

转载

uni构建的微信小程序中使用

1.开启分包

在manifest.json文件中对应平台开启分包

{
    "mp-weixin": { /* 微信小程序特有相关 */
        "optimization": {
            // 开启分包
            "subPackages": true
        },
        "appid": "",
        "setting": {
            "urlCheck": false
        },
        "usingComponents": true
    },
}

pages同级创建文件夹packageA

├── App.vue
├── main.js
├── manifest.json
├── pages.json
├── uni.scss
├── packageA     
├── pages
    ├── index

在pages.json文件配置subPackages字段

{
    "pages": [...],
    "subPackages": [{
        "root": "packageA",
        "pages": [...]
    }],
    "globalStyle": [...],
}

2.分包创建自定义组件

在/packageA/components/下创建自定义组件package-com

├── App.vue
├── main.js
├── manifest.json
├── pages.json
├── uni.scss
├── packageA  // 分包
│   ├── pages
│   └── components
│       ├── package-com.vue
│       
├── pages  // 主包
    ├── index

package-com.vue

<template>
	<view class="content">packageCom</view>
</template>
 
<script>
 
export default {
	data() {
		return {
                
           }
    },
    mounted(){
           
           
    },
    methods:{
 
    }
}
</script>
 
<style lang="scss">
 
</style>

3.使用

导入组件 - 注册组件 - 使用组件 - 设置占位组件
/pages/index.vue

<template>
	<view class="content">
		<view class="title">{{title}}</view>
		<!-- 3.使用组件 -->
		<package-com />
	</view>
</template>
 
<script>
	// 1.导入组件
	import packageCom from '../packageA/components/package-com.vue'
	export default {
		components: { packageCom }, // 2.注册组件
		data() {
			return {
				title: 'pages/index',
			}
		},
		onLoad() {
 
		},
		methods: {
			
		}
	}
</script>
 
<style>
	
</style>

pages.json

{
    "pages": [{
        "path": "pages/index",
        "style": {
              "navigationBarTitleText": "uni-app",
               // 4.设置占位组件
               "componentPlaceholder": {
                    // "其他分包自定义组件": "占位组件"
                   "package-com": "view"
               }
         }
 
     }],
    "subPackages": [...],
    "globalStyle": [...],
}