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

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

使用扩展组件

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

官方文档

一、执行npm init命令。

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

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

四、引入组件，如：

{
  "usingComponents": {
    "mp-sticky": "@miniprogram-component-plus/sticky"
  }
}
1
2
3
4
5

五、使用：

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

sticky组件属性

使用WeUI组件库

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

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

官方文档

一、添加扩展组件

"useExtendedLib": {
    "weui": true
}
1
2
3

二、引入组件

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

三、使用组件

<mp-searchbar></mp-searchbar>
1