推薦一款快速製作通訊錄的微信小外掛
摘要：
今天，我們提交了第一版，剛剛通過微信稽核的小程式外掛 ——「爸媽搜通訊錄」。
只要有通訊錄的地方，就會需要對通訊錄姓名進行分組排序和介面設計，主流做法基本是按照人名的拼音首字母排序，效果圖如下：
現在讓我開始說一說怎麼使用我們剛新鮮出爐的小程式外掛。
一句話介紹...
今天，我們提交了第一版，剛剛通過微信稽核的小程式外掛 ——「爸媽搜通訊錄」。
只要有通訊錄的地方，就會需要對通訊錄姓名進行分組排序和介面設計，主流做法基本是按照人名的拼音首字母排序，效果圖如下：
現在讓我開始說一說怎麼使用我們剛新鮮出爐的小程式外掛。
一句話介紹
簡便、快速的生成通訊錄的小外掛。
使用方法
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'/>
複製程式碼
效果
總結
這是我們團隊做的第「五」個微信小外掛，每個外掛製作的標準就是，把複雜的邏輯交給我們來做。
使用者只要簡單的引入，用最便捷的輸入引數，以達到最好的效果。
歡迎微信小程式開發者使用我們的其它外掛：
- 爸媽搜日曆
提供簡約不簡單的日曆基本功能，自定義樣式，考勤狀態等功能。
外掛地址： ofollow,noindex">mp.weixin.qq.com/wxopen/plug…
- 爸媽搜富文字
小程式富文字處理 rich-text， 將無法識別的標籤改為可識別的， 適配移動裝置。
外掛地址： mp.weixin.qq.com/wxopen/plug…
- 爸媽搜海報 Maker
外掛地址： mp.weixin.qq.com/wxopen/plug…
- 爸媽搜表單圈
外掛地址： mp.weixin.qq.com/wxopen/plug…
最後，放出我們團隊外掛開發者的聯絡方式，有什麼問題都可以聯絡她哦~
