微信小程序实现：打造微信风格的自定义联系人组件

"微信小程序开发教程 - 创建自定义联系人组件" 在微信小程序开发中，有时需要创建具有特定功能的自定义组件，如模仿微信联系人界面。本教程将指导你如何实现一个自定义的联系人弹窗组件，提供美观且易用的选择人员功能。 首先，自定义组件在微信小程序中包含四个核心文件：`js`、`wxss`、`json`和`wxml`。这些文件分别对应于组件的逻辑代码、样式表、配置信息和结构模板。在`json`文件中，必须设置`component`属性为`true`，以表明这是一个自定义组件，例如： ```json { "component": true } ``` 在`js`文件中，你需要使用`Component`构造器而非`Page`构造器来定义组件。`Component`允许你定义组件的属性（properties）和事件（events）。在这个示例中，有两个对外暴露的属性： 1. `show`: 一个布尔值，控制联系人组件是否显示。 2. `list`: 一个数组，存储着需要展示的联系人信息，每个对象包含`name`（联系人名称）和`photo`（头像URL）。 为了实现字母导航栏，可以使用`pinyin.js`库对联系人列表进行首字母排序和分组。当`list`属性改变时，可以通过`observers`监听并处理数据更新。 事件回调函数也是组件的重要部分： 1. `cancle`: 搜索栏取消按钮的回调，用于关闭组件或清除搜索状态。 2. `select`: 用户选中联系人后的回调，将选中人员对象传递给父组件。 3. `confirmInput`: 搜索框键盘确认后的回调，将搜索内容发送给父组件。 在父组件中，通过绑定事件处理函数，如`bindselect`、`bindconfirmInput`和`bindcancle`，可以接收来自自定义联系人组件的通知并作出响应。 例如，以下是在父组件中使用自定义联系人组件的方式： ```html <contact-picker show="{{show}}" list="{{contactList}}" bindselect="handleSelect" bindconfirmInput="handleSearch" bindcancle="handleCancel"></contact-picker> ``` 在对应的`js`文件中，你需要定义这些事件处理函数： ```javascript Component({ methods: { handleSelect(user) { // 处理选中联系人事件 }, handleSearch(query) { // 处理搜索事件 }, handleCancel() { // 处理取消事件 } } }) ``` 创建微信小程序的自定义联系人组件涉及组件化编程的基本概念，包括组件定义、属性传递、事件处理以及数据管理。理解并熟练运用这些技术，能让你在小程序开发中更加得心应手。