小程序如何使用全局组件

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

Components

小程序内置WeUI组件库

小程序内置提供了WeUI组件库,文档在此open in 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" // 这种写法可以运行,而且更加简洁
	}
}

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

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

其他全局组件

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

截图

代码片段示例

https://developers.weixin.qq.com/s/VIHvygmY78laopen in new window

Last Updated:
<manfred>峯</hu>
欢迎关注微信公众号 【Big前端】无广告,无软文,就是这么傲娇。直推一线大厂高质量内容,不局限于前端·后台·运维相关,还包括房价🏠、信用卡💳等内容也可内推一线大厂腾讯阿里字节,对腾讯字节比较熟悉,简历可以发给我,我会给你介绍一线大厂的情况,让你更加了解一线大厂