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

今天,我们提交了第一版,刚刚通过微信审核的小程序插件 ——「爸妈搜通讯录」。

只要有通讯录的地方,就会需要对通讯录姓名进行分组排序和界面设计,主流做法基本是按照人名的拼音首字母排序,效果图如下:

directory_abli

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

一句话介绍

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

使用方法

1、 在微信小程序管理后台——设置——第三方服务,按 AppID(wxea14f39af1d4d74a)搜索到该插件并申请授权(ps:一般不会出现拒绝的情况。如果申请被拒绝了,请重新申请,有时候管理员手抽点错了,请见谅! 有任何好的建议可以通过微信、邮箱、手机号联系!)。

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

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

3、在需要使用到该插件的小程序页面的 JSON 配置文件中,做以下配置:

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

4、在相应的 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'/>
     

效果

directory_abli

总结

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

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

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

  • 爸妈搜日历

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

插件地址: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

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

erweima

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

Jerry的Fiori原创文章合集

我曾经于2014年10月到2016年5月工作于SAP CRM Fiori应用的开发团队, 我所在的团队负责下列这8个Fiori应用的维护和持续开发:

2265
来自专栏韩东吉的Unity杂货铺

零基础入门 4: 窗口介绍(完)

上一篇将Unity里几个比较重要的窗口先进行了讲解,以及如何自定义窗口布局,不知道大家都消化的怎么样,今天这篇窗口介绍,将把剩余window的窗口一一进行介绍。

1451
来自专栏cnblogs

D3、openlayers的一次尝试

近期尝试了一个webgl相关的内容,有些小激动,及时分享一下我的测试示例,效果如下: ? 此示例分从业务角度分为两部分,一个部分为d3展示的柱图,另一部分则为用...

2717
来自专栏Coding01

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

只要有通讯录的地方,就会需要对通讯录姓名进行分组排序和界面设计,主流做法基本是按照人名的拼音首字母排序,效果图如下:

1672
来自专栏java一日一条

高效Android开发者必须知道的4个工具

移动app开发是一个漫长而费力的过程。然而,现在的企业总是希望能够尽快发布app。幸运的是,我们有很多帮助移动开发人员加快工作步伐的工具。

1181
来自专栏ionic3+

【Appetite】ionic3实录(六)首页实现

观察之,发布者和内容的文本信息可以用ionic现有的组件实现,而视频播放和图片画廊(如果是轮播图可以用slides组件,它是阉割并封装过的swiper,好像现在...

964
来自专栏企鹅号快讯

再见!陪伴我多年的setuna

hi,又到了charming的时间,平日里用setuna截图小工具的人肯定大有人在,但是最近我发现了一个比它更好用的小工具——PureRef,借此机会推荐一下~...

27310
来自专栏xdecode

IE之页面加载慢.

场景 场景是大屏页面一张深色背景, 里面一些文本元素以及图表展示. 结果在IE下发现加载异常缓慢, 还有部分人员反馈页面卡死. ? 后台读写优化 默认处理图片逻...

2237
来自专栏菩提树下的杨过

silverlight3的"伪"3D续--图片横向轮换

上一篇里,已经知道了“伪3D”是怎么回事,今天结合以前的做的图片广告轮换,又弄了一个图片切换的小东东,不知道以后有什么用,先贴在这里备份: 效果图: ? 因为s...

2169
来自专栏魏艾斯博客www.vpsss.net

屏幕 GIF 动态图捕获软件及录制过程

作为站长有时候需要录制屏幕 GIF 动态图片,就得现学现卖。这不魏艾斯博客在使用遨游浏览器的过程中遇到一些 bug 需要提交给官方,遨游技术员希望老魏提供一段正...

2052

扫码关注云+社区

领取腾讯云代金券