微信小程序-使用扩展组件和第三方组件

最新推荐文章于 2024-10-18 11:57:52 发布

原创最新推荐文章于 2024-10-18 11:57:52 发布 · 1.7k 阅读

本内容遵循CC 4.0 BY-SA版权协议

标签

#微信小程序 #weui #扩展组件

19 篇文章

订阅专栏

文章介绍了如何在微信小程序中使用扩展组件，包括执行npm初始化，安装和引入组件如sticky，并详细说明了组件属性。此外，还讲解了如何使用WeUI组件库，这是一个与微信原生视觉体验一致的UI组件库，支持在小程序中引入并使用。

扩展组件是对小程序内置组件能力的补充，包括一些常见的功能组件。

一、执行npm init命令。

二、安装组件，这里使用粘性布局组件，因此执行npm install @miniprogram-component-plus/sticky。

三、点击工具 -> 构建 npm。

四、引入组件，如：

{
  "usingComponents": {
    "mp-sticky": "@miniprogram-component-plus/sticky"
  }
}

五、使用：

<mp-sticky offset-top="0">
  <button size="mini" type="primary" style="margin-left: 115px; background-color: #1989fa">吸顶距离</button>
</mp-sticky>

sticky组件属性

属性	类型	默认值	必填	说明
offset-top	Number	0	否	吸顶时与顶部的距离，单位px
z-index	Number	99	否	吸顶时的 z-index
container	function	null	否	一个函数，返回容器对应的 NodesRef 节点
disabled	Boolean	false	否	是否禁用
bindscroll	eventhandle		否	滚动时触发，{scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

这是一套基于样式库weui-wxss开发的小程序扩展组件库，同微信原生视觉体验一致的 UI 组件库，由微信官方设计团队和小程序团队为微信小程序量身设计，令用户的使用感知更加统一。

支持扩展库引入，不占用小程序包体积。

一、添加扩展组件

"useExtendedLib": {
    "weui": true
}

二、引入组件

 "usingComponents": {
    "mp-searchbar": "weui-miniprogram/searchbar/searchbar"
  },

三、使用组件

<mp-searchbar></mp-searchbar>