今天,咱们提交了初版,刚刚经过微信审核的小程序插件 ——「爸妈搜通信录」。css
只要有通信录的地方,就会须要对通信录姓名进行分组排序和界面设计,主流作法基本是按照人名的拼音首字母排序,效果图以下:html
如今让我开始说一说怎么使用咱们刚新鲜出炉的小程序插件。json
简便、快速的生成通信录的小插件。小程序
一、 在微信小程序管理后台——设置——第三方服务,按 AppID(wxea14f39af1d4d74a)搜索到该插件并申请受权(ps:通常不会出现拒绝的状况。若是申请被拒绝了,请从新申请,有时候管理员手抽点错了,请见谅! 有任何好的建议能够经过微信、邮箱、手机号联系!)。微信小程序
二、在要使用该插件的小程序 app.json 文件中引入插件声明。微信
"plugins": {
"BmsDirectory": {
"version": "1.0.0",
"provider": "wxea14f39af1d4d74a"
}
}
复制代码
三、在须要使用到该插件的小程序页面的 JSON 配置文件中,作如下配置:app
{
"usingComponents": {
"BmsDirectory": "plugin://BmsDirectory/BmsDirectory"
}
}
复制代码
四、在相应的 HTML 页面中添加如下语句便可完成插件的嵌入。ide
<BmsDirectory />
复制代码
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
userList |
Array |
"[]" |
通信录数据 |
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
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'/>
复制代码
这是咱们团队作的第「五」个微信小插件,每一个插件制做的标准就是,把复杂的逻辑交给咱们来作。url
使用者只要简单的引入,用最便捷的输入参数,以达到最好的效果。spa
欢迎微信小程序开发者使用咱们的其它插件:
提供简约不简单的日历基本功能,自定义样式,考勤状态等功能。
插件地址:mp.weixin.qq.com/wxopen/plug…
小程序富文本处理 rich-text, 将没法识别的标签改成可识别的, 适配移动设备。
插件地址:mp.weixin.qq.com/wxopen/plug…
插件地址:mp.weixin.qq.com/wxopen/plug…
插件地址:mp.weixin.qq.com/wxopen/plug…
最后,放出咱们团队插件开发者的联系方式,有什么问题均可以联系她哦~