推薦一款快速製做通信錄的微信小插件

今天，咱們提交了初版，剛剛經過微信審覈的小程序插件 ——「爸媽搜通信錄」。

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

如今讓我開始說一說怎麼使用咱們剛新鮮出爐的小程序插件。

一句話介紹

簡便、快速的生成通信錄的小插件。

使用方法

一、 在微信小程序管理後臺——設置——第三方服務，按 AppID（wxea14f39af1d4d74a）搜索到該插件並申請受權（ps：通常不會出現拒絕的狀況。若是申請被拒絕了，請從新申請，有時候管理員手抽點錯了，請見諒! 有任何好的建議能夠經過微信、郵箱、手機號聯繫！）。

二、在要使用該插件的小程序 app.json 文件中引入插件聲明。

"plugins": {
    "BmsDirectory": {
        "version": "1.0.0", 
        "provider": "wxea14f39af1d4d74a"
    }
}

三、在須要使用到該插件的小程序頁面的 JSON 配置文件中，作如下配置：

{
  "usingComponents": {
    "BmsDirectory": "plugin://BmsDirectory/BmsDirectory"
  }
}

四、在相應的 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'/>

效果

總結

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

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

歡迎微信小程序開發者使用咱們的其它插件：

• 爸媽搜日曆

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

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

• 爸媽搜富文本

小程序富文本處理 rich-text， 將沒法識別的標籤改成可識別的， 適配移動設備。

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

• 爸媽搜海報 Maker

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

• 爸媽搜表單圈

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

最後，放出咱們團隊插件開發者的聯繫方式，有什麼問題均可以聯繫她哦~