推荐一款快速制做通信录的微信小插件

今天，咱们提交了初版，刚刚经过微信审核的小程序插件 ——「爸妈搜通信录」。

只要有通信录的地方，就会须要对通信录姓名进行分组排序和界面设计，主流作法基本是按照人名的拼音首字母排序，效果图以下：

如今让我开始说一说怎么使用咱们刚新鲜出炉的小程序插件。

一句话介绍

简便、快速的生成通信录的小插件。

使用方法

一、 在微信小程序管理后台——设置——第三方服务，按 AppID（wxea14f39af1d4d74a）搜索到该插件并申请受权（ps：通常不会出现拒绝的状况。若是申请被拒绝了，请从新申请，有时候管理员手抽点错了，请见谅! 有任何好的建议能够经过微信、邮箱、手机号联系！）。

二、在要使用该插件的小程序 app.json 文件中引入插件声明。

"plugins": {
    "BmsDirectory": {
        "version": "1.0.0", 
        "provider": "wxea14f39af1d4d74a"
    }
}

三、在须要使用到该插件的小程序页面的 JSON 配置文件中，作如下配置：

{
  "usingComponents": {
    "BmsDirectory": "plugin://BmsDirectory/BmsDirectory"
  }
}

四、在相应的 HTML 页面中添加如下语句便可完成插件的嵌入。

<BmsDirectory />

属性

属性名	类型	默认值	说明
userList	Array	"[]"	通信录数据

userList 的属性

属性名	类型	默认值	说明
name	String	''	名字信息
tel	String	''	电话信息
avatarurl	String	有默认头像	头像信息

<BmsDirectory userList="{{userList}}" headportrait='headportrait' />

data:{
    userList: [
      {
        name: '咖啡',
        tel: '12345678900',
        avatarurl:''
      },
      {
        name: '小咖啡',
        tel: '12345678900'
      },
      {
        name: '小小咖啡',
        tel: '12345678900'
      },
      {
        name: 'c小小咖啡',
        tel: '12345678900'
      },
      {
        name: '-小小咖啡',
        tel: '12345678900'
      },
      {
        name: '+小小咖啡',
        tel: '12345678900'
      },

    ]
}

样式

属性名	类型	说明
headportrait	String	头像的样式
phonestyle	String	电话号码信息的演示
namestyle	String	名字信息的样式
titlestyle	String	名字上方分类小标题的样式
msgstyle	String	每一条信息的总体样式

/* 头像 */
.headportrait{
  /* width: 100rpx !important;
  height: 100rpx !important;  */
}
/* 手机号 */
.phonestyle{
  font-size: 26rpx !important;
}

/* 名字 */
.namestyle{
  font-size: 28rpx !important;
}

/* 首字母标题 */
.titlestyle{
  font-size: 28rpx !important;
  /* color: red !important; */
}

/* 每一个信息的样式 */
.msgstyle{
  /* padding: 50rpx 20rpx !important; */
}

事件

属性名	类型	说明
bindgetcall	String	点击每条信息时触发的事件

<BmsDirectory userList='{{userList}}' bindgetcall='getcall'/>

效果

总结

这是咱们团队作的第「五」个微信小插件，每一个插件制做的标准就是，把复杂的逻辑交给咱们来作。

使用者只要简单的引入，用最便捷的输入参数，以达到最好的效果。

欢迎微信小程序开发者使用咱们的其它插件：

• 爸妈搜日历

提供简约不简单的日历基本功能，自定义样式，考勤状态等功能。

插件地址：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx23a9cef3522e4f7c

• 爸妈搜富文本

小程序富文本处理 rich-text， 将没法识别的标签改成可识别的， 适配移动设备。

插件地址：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx54e7e5b0ebeda242

• 爸妈搜海报 Maker

插件地址：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wxbf07f0f22c6c200d

• 爸妈搜表单圈

插件地址：https://mp.weixin.qq.com/wxopen/pluginbasicprofile?action=intro&appid=wx6aaef9edf974a564

最后，放出咱们团队插件开发者的联系方式，有什么问题均可以联系她哦~