最近把项目中使用到的部分组件和一些平时写的组件整理了一下，放在一个小程序中，仅供参考！文章底部有github链接。

如果有同学暂时不知道如何使用自定义组件，可以查看微信小程序官方文档 自定义组件 或者下载源码查看

组件一、Music

这个组件是音乐播放动画组件，类似网易云右上角的线条动画。
用这个组件的时候需要在外面包一层view
具体样式可参考源码pages/music
下面是简单的示例代码

<view class='music_bg">
    <wxzx-music live-state="true"></wxzx-music>
</view>

<style>
.music_bg {
  width: 80rpx;
  height: 40rpx;  // 组件线条默认高度为40，背景view的高度要与组件高度一致
  overflow: hidden;
  position: relative;
}
</style>

屏幕录制 2018-11-20 下午9.11.52.gif

参数释义如下：

组件二、navbar

微信在前不久开放了自定义导航栏的功能，安卓端和微信端终于可以显示一样的导航栏了！希望可以尽早开放自定义tabbar的功能。
导航栏的使用没有什么限制，值得一提的是我没有区分安卓跟ios导航栏的高度，都设置成了44，如果介意的朋友可以自己改一下源码。
要使用这个组件，首先要配置app.json，如下

"window": {
  "navigationStyle": "custom"
},

下面是简单的代码示例

<wxzx-navbar nav-title="导航栏"></wxzx-navbar>

屏幕录制 2018-11-20 下午9.12.27.gif

参数释义如下：

组件三、popup

弹出层，用于显示消息，广告等等。内置了部分平移动画和缩放动画
下面是简单的代码示例

 <wxzx-popup popup-show="true" popup-style="center" content-alignment="scale" z-index='9999'>
     <view class="popup_content">center center</view> 
 </wxzx-popup>

屏幕录制 2018-11-20 下午9.13.11.gif

参数释义如下：

popup-style和content-alignment的具体搭配可参考源码pages/popup

组件四、progress

进度条组件主要是为下面的slider组件做铺垫。
下面是简单的代码示例

<wxzx-progress></wxzx-progress>

屏幕录制 2018-11-20 下午9.13.57.gif

参数释义如下：

组件五、slider

由于系统自带的slider功能有限，所以自定义了一个slider
可以参考之前的文章小程序 自定义slider组件音频播放实例

屏幕录制 2018-11-20 下午9.14.24.gif

组件六、elip

文字截断，平时在项目中遇到文字截断的地方比较多，每次都写样式也很烦，干脆封装成组件。
下面简单的代码示例

<wxzx-elip line="2">这是一个需要截断的文本这是一个需要截断的文本这是一个需要截断的文本这是一个需要截断的文本这是一个需要截断的文本</wxzx-elip>

屏幕录制 2018-11-20 下午9.15.35.gif

参数释义如下：

组件七、notice

通告栏组件，在顶部提醒用户一些注意事项
需要在外层包一个view
下面是简单的代码示例

<wxzx-notice text="这是一个通告栏，这是一个通告栏，这是一个通告栏，这是一个通告栏"></wxzx-notice>

屏幕录制 2018-11-20 下午9.15.52.gif

参数释义如下：

以上就是目前分享的七个组件，以后若有感觉好用的组件也会在这里分享出来，供大家参考！

github

微信小程序搜索：

MPUI

喜鹊有声