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

官网链接

转载

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": [...],
}

注：分包（pages）使用其他分包（packageA）的自定义组件时，由于其他分包（packageA）还未下载或注入，其他分包（packageA）的组件处于不可用的状态。所以先设置占位组件渲染，在其他分包（packageA）下载结束后再替换。