uniapp公共组件如何分包详细步骤
时间: 2023-09-07 20:13:19 浏览: 495
Uniapp 公共组件的分包可以通过以下步骤实现:
1.在项目根目录下创建一个名为 subpackages 的文件夹,并在该文件夹下创建一个名为 components 的文件夹,用于存放公共组件。
2.在 subpackages 文件夹下创建一个名为 components.json 的文件,用于配置公共组件分包信息。配置如下:
```
{
"root": "components",
"pages": [
{
"path": "index",
"style": {
"navigationBarTitleText": "公共组件"
}
}
],
"subPackages": [
{
"root": "components",
"name": "common",
"pages": [
{
"path": "common/index",
"style": {
"navigationBarTitleText": "公共组件"
}
}
]
}
]
}
```
其中,“root”表示分包根目录,“pages”表示分包页面,“subPackages”表示分包信息。在这个示例中,“name”表示分包名称,“pages”表示分包页面信息。
3.在公共组件的代码中,需要在组件的注册方法中添加以下代码:
```
export default {
name: 'MyComponent',
created() {
uni.addSubpackage({
name: 'common'
});
}
}
```
这样,在使用公共组件的页面中,公共组件会被自动打包到对应的子包中。
4.在需要使用公共组件的页面中,需要先引入子包。可以在页面的 onLoad 方法中添加以下代码:
```
onLoad() {
uni.loadSubPackage({
name: 'common'
});
}
```
这样,就可以在页面中使用公共组件了。
以上就是 Uniapp 公共组件分包的详细步骤。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)