使用方法:
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'/>
效果
联系方式
如果使用过程中遇到问题,或者更好的建议,欢迎大家添加微信号,进行讨论交流!
太好了,楼主可不可以把完整代码发给我,我正在研究做个单位内部的通讯录。(我是小白),EMAil:28899605@QQ.com
继续努力