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

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

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

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

一句话介绍

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

使用方法

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'/>

效果

总结

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

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

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

  • 爸妈搜日历

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

地址:推荐简约漂亮的小程序日历插件

  • 爸妈搜富文本

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

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

  • 爸妈搜海报 Maker

地址:推荐一款快速生成海报的微信小插件

  • 爸妈搜表单圈

地址:推荐一款快速制作表单的微信小插件

原文发布于微信公众号 - coding01(coding01)

原文发表时间:2018-11-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

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

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

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

25120
来自专栏GA小站

Ad Hoc Analysis的启用

Ad Hoc Analysis是Adobe Analytics里面的一个应用程序,这是一个强大而灵活的平台,可用于构建自定义分析项目。将任意数量的数据表、可视化...

14810
来自专栏ionic3+

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

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

10540
来自专栏顶级程序员

12 款 JavaScript 代码测试必备工具

每天都会产生新的代码、用户测试工具和框架。下面的列表列出了可以完成各种测试需求的代码工具。你应该调查研究一下,看这些工具是否适用于你的技术栈和技术需求。 01...

391100
来自专栏小蠢驴iOS专题

使用Category+runtime简单解决高德地图定位问题

24750
来自专栏微信终端开发团队的专栏

微信iOS9适配总结

每年iOS升级,都会带来一些坑,这次iOS9也不例外。本文总结了微信在适配iOS9上遇到的问题和解决方案。 一、iOS9问题汇总 1. 编译问题(B...

28250
来自专栏更流畅、简洁的软件开发方式

我写项目的步骤。抛砖引玉。

相信各位高手都会有自己习惯或者独特的写项目的方式,不知道是否可以拿出来和大家分享一下。 我先说一下我的,就当作是一块大砖头吧。 1、需求调研、分析 2...

24480
来自专栏java一日一条

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

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

14610
来自专栏前端小记

用字蛛动态遍历JS生成中文字体

字蛛 font-spider 通过分析本地 CSS 与 HTML 文件获取 WebFont 中没有使用的字符,并将这些字符数据从字体中删除以实现压缩,同时生成跨...

735270
来自专栏Coding01

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

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

31220

扫码关注云+社区

领取腾讯云代金券