# 小程序如何使用全局组件

微信小程序支持自定义组件的方式,可能更多使用的是引用components下的组件。这里提供一种类似Vue.use(WeUI)这种方式定义后可以在项目各个页面随意引用全局组件的方式。

Components

# 小程序内置WeUI组件库

小程序内置提供了WeUI组件库,文档在此 (opens new window)。一个更优的点是如果使用下面的引用方法,不会占用小程序的包空间。可以理解是微信原生提供的UI库,方便项目节省空间体积,如同jQuery时代,PC侧基本都有缓存CDN jQuery的库一样。

项目下app.json声明

{
	"useExtendedLib": {
		"weui": true,
		"kbone": true, // 如果需要的话
	},
	"usingComponents": {
		"mp-dialog": "/miniprogram_npm/weui-miniprogram/dialog/dialog",
		"mp-dialog": "weui-miniprogram/dialog/dialog" // 这种写法可以运行,而且更加简洁
	}
}
1
2
3
4
5
6
7
8
9
10

默认可以内置weui或kbone组件库,其他的等微信慢慢开发吧。app.json声明的自定义组件,在页面随意位置可以应用。如上面注册了mp-dialog组件,则随意页面应用如下有弹窗出现

<mp-dialog title="test" show="{{true}}" bindbuttontap="tapDialogButton" buttons="{{[{text: '取消'}, {text: '确认'}]}}">
	<view>test content</view>
</mp-dialog>
1
2
3

# 其他全局组件

如果是自己开发的组件想作为全局组件,则引用方式修改下就可以,如下面截图就是封装好的自定义组件

截图

# 代码片段示例

https://developers.weixin.qq.com/s/VIHvygmY78la (opens new window)

上次更新: 2/28/2021, 1:44:20 PM