今天，我們提交了第一版，剛剛通過微信稽核的小程式外掛 ——「爸媽搜通訊錄」。

只要有通訊錄的地方，就會需要對通訊錄姓名進行分組排序和介面設計，主流做法基本是按照人名的拼音首字母排序，效果圖如下：

現在讓我開始說一說怎麼使用我們剛新鮮出爐的小程式外掛。

一句話介紹

簡便、快速的生成通訊錄的小外掛。

使用方法

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 的屬性

<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{
  /* 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; */
}
 
複製程式碼

事件

 
<BmsDirectory userList='{{userList}}' bindgetcall='getcall'/>
     
複製程式碼

效果

總結

這是我們團隊做的第「五」個微信小外掛，每個外掛製作的標準就是，把複雜的邏輯交給我們來做。

使用者只要簡單的引入，用最便捷的輸入引數，以達到最好的效果。

歡迎微信小程式開發者使用我們的其它外掛：

• 爸媽搜日曆

提供簡約不簡單的日曆基本功能，自定義樣式，考勤狀態等功能。

外掛地址：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…

最後，放出我們團隊外掛開發者的聯絡方式，有什麼問題都可以聯絡她哦~