微信小程序通讯录组件及demo，支持汉字转拼音，排序类型，常规通讯录，全选、多选、单选通讯录。

最新推荐文章于 2022-10-31 10:20:59 发布
最新推荐文章于 2022-10-31 10:20:59 发布
阅读量963 收藏 16
点赞数
分类专栏： 小程序 文章标签： 小程序 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012663281/article/details/108488697
版权

微信小程序通讯录组件及demo，支持汉字转拼音，排序类型，常规通讯录，全选、多选、单选通讯录。

提供支持

通讯录组件，来源博主Homilier（https://me.csdn.net/Honiler）
https://blog.csdn.net/Honiler/article/details/82929111

汉字拼音转换工具
https://github.com/hotoo/pinyin

微信原生代码片段

https://developers.weixin.qq.com/s/A3maQemS7qkc

gitHub地址

https://github.com/237005722/minicode-alphabet-order-list

效果图

最低0.47元/天 解锁文章
极致爆发
关注
  • 0
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序仿通讯录demoWxPhone_list-master.zip
09-25
微信小程序仿通讯录demoWxPhone_list-master.zip
小程序组件-仿微信通讯录
weixin_33849942的博客
09-12 532
运用了该组件的小程序开发完成，详情请看HMusic效果图因为是使用的手机录屏，视频格式为MP4，上传到文章时发现只支持图片，还好电脑自动录屏功能，所以简单的录制了一下，完后又提示只能4M，只能再去压缩图片，所以画质略渣，各位客官讲究的看看吧。特色功能介绍用户只需按照格式传入参数，组件能够自动将参数按首字母分组，简单方便；组件右侧首字母导航无需另外传值，并且根据参数具体有哪些首字母显示（没有的咱就不...
基于微信小程序的单词记忆系统（Java+SSM+MySQL）
毕业作品网站
10-31 2630
wordroid.db文件放在Eclipse 微信小程序工程中的res文件夹下的raw目录中，通过使用getResources().openRawResource方法获得raw目录中资源的InputStre am对象，然后将该InputStream对象中的数据写入手机内存或SD卡的目录中相应文件中。微信小程序应用是用java语言，虽然版本有好多，但一般会向下兼容，用Eclipse + ADT来创建应用程序，微信小程序提供开发的足够的接口API让开发者开发功能强大的应用程序。占用内存小，用户电池消耗小。
小程序自定义组件仿微信联系人可导航字母序排列数据列表
Honiler的博客
10-02 4874
alphabet-order-list 可导航字母序排列数据列表  基础库 1.6.0 开始支持，低版本需做兼容处理 属性 类型 默认值 说明 最低版本 source Array [] 必要属性，数据源   groupKey String   ...
微信通讯录按姓名拼音分组实现，并可搜索联系人(iOS源代码)
05-06
来源： github/WeChatContacts Licence： MIT 作者： Mr.unicorn 实现微信通讯录UI，联系人按拼音首字母分组排序A~Z，并且含联系人搜索功能。喜欢就star一个呗~ 谢谢。
关于微信小程序通讯录人名分组的实现
weixin_50877746的博客
01-30 1318
引言 最近实现的一个小程序需要制作一个通讯录，我参考的标准肯定是微信的界面啊，下面介绍一下我界面的实现和操作 页面实现 我发现vant里面的indexBar能够实现这个界面功能 文字转拼音实现分组 我在网上一搜基本都是用的npm上的pinyin库，但是出乎意料的是，我安装了pinyin库后构建一直失败，报错信息是“unvalid number”之类的，网上的解决方案是删除miniprogram_npm再重构一下，但是我删除了又重新安装，一直失败。所以折腾了一个下午索性直接放弃了这个方案，只能说微信小程序有
中文汉字注音，汉字转拼音，支持图片识别文字，支持结果转图下载，附上小程序核心源码
Mos的博客
04-25 1万+
“文字注音”小程序在微信、字节跳动、支付宝、QQ等小程序平台同步上线，微信、头条、抖音、支付宝、QQ中搜索“文字注音”即可获得。 一、功能 汉字转拼音，支持图片识别文字，支持结果转图下载。该款小程序能够轻松将文字注音后输出，无需授权，无需注册，即来即用。你还可以用它来识别图片中的文字后注音，或者随时拍照后识别文字再注音。同时支持注音完成后复制拼音，支持将结果保存成图片下载到手机本地。欢迎扫描下...
微信小程序 通讯录效果一：数据为前台定义
weixin_41583535的博客
05-16 3816
一、communication.xml <view class="wa-list"> <view class="wa-item wa-item-ava"> <image class="item-img-round" src="../images/user.jpg"></image> 张三
微信小程序——列表遍历排序方法
Mickeymouse
04-11 1万+
Page({ data: { arr: [ { id: '1', name: '一', age: '12' }, { id: '5', name: '五', age: '24' }, { id: '3', name: '三', age: '28' }, { id: '4', name: '四'...
微信小程序全选多选效果实现代码解析
12-28
这篇文章主要介绍了微信小程序全选多选效果实现代码解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图： wxml代码： 全选 <vi
通讯录
03-16
本程序是为自己写的通讯录 里面包涵了姓名,性别,类型,手机1,手机2，QQ，家用电话，电子邮件，家乡，工作地,相片。 经过一个月的原型开发方法，把这个小程序做成了。看来我真的很菜！！ 可以启动电子邮件软件发电子邮件。自动排序，过滤，查找。 原代码基本是BCB的组件，为加了DBGridEh组件。 本程序基于C++Builder 5 开发的。
微信小程序实现多选功能
10-17
在微信小程序中实现多选功能是一项常见的需求，尤其在创建互动性强、用户参与度高的应用时。本教程将深入探讨如何在微信小程序中实现在答题或问卷类应用中添加多选题的功能。 首先，我们需要了解微信小程序的基础...
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
12-30
实现的效果就是： ...2.在选中的同时获取需要的商品id，获取后是以字符串拼接的形式 拼成一个字符串 ... ... wxml关键代码 重要代码 value={{item.goods_id}} -->checkbox被选中的值就是这个goods_id checked={{item....
微信小程序实现多选框全选与取消全选功能示例
11-29
本文实例讲述了微信小程序实现多选框全选与取消全选功能。分享给大家供大家参考，具体如下： js部分： page({ data: { select_all:false, listData: [{code: "111",text: "text1",typ: "type1",}, {code: "021",...
小程序开发API之添加手机通讯录联系人wx.addPhoneContact
M.Siebel
03-06 9387
wx.addPhoneContact(Object object) 添加手机通讯录联系人。用户可以选择将该表单以「新增联系人」或「添加到已有联系人」的方式，写入手机系统通讯录。 ** 参数 ** ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190305144917462.png?x-oss-process=image/watermark,type_ZmFu...
微信小程序例子——添加手机联系人
热门推荐
FutrueJet的博客
06-08 1万+
微信小程序例子——添加手机联系人
小程序仿微信通讯录
tengxi_5290的博客
05-04 3281
var config = require('../../../config.js') var app = getApp(); Page({   data: {     alpha: [{ letter: 'A' }, { letter: 'B' }, { letter: 'C' }, { letter: 'D' }, { letter: 'E' }, { letter: 'F' }, { lett...
小程序类通讯录样式
weixin_42794596的博客
11-09 1940
先上代码 .js Page({ /** * 页面的初始数据 */ data: { isActive: null, listMain: [{ id: "1", region: "A", items: [ { id: "", name: "amour" }, { id: "", name: "amour&qu
仿微信通讯录右侧快速定位字母表控件的实现
JasonGaoH的专栏
08-22 1万+
仿微信通讯录右侧快速定位字母表控件 先看效果图： 界面比较单调，凑合看，主要看功能。这种控件在很多应用的通讯录的界面，MIUI里面的通讯录都有这个功能，其实这是一个自定义View， 相对来说，这个并不是一个多么复杂的自定义View。 下面介绍一下这种控件的实现方法： 首先，自定义View，一般是对View的增强，因为系统提供的控件不能满足需求， 一般情况下，都是继承View
微信小程序单选多选全选
最新发布
05-18
微信小程序中可以通过使用组件来实现单选、多选和全选功能。 单选： 可以使用radio组件来实现单选功能。radio组件需要与radio-group组件配合使用。当用户点击其中一个radio后，radio-group会自动将其它的radio选项取消选中。 多选： 可以使用checkbox组件来实现多选功能。checkbox组件需要与checkbox-group组件配合使用。当用户点击某个checkbox时，checkbox-group会自动将其它的checkbox选项保持原有状态。 全选： 可以使用checkbox组件来实现全选功能。需要在checkbox组件中加入一个value属性，并将其绑定到全选按钮的checked属性上。当用户点击全选按钮时，将全选按钮的状态传递给所有的checkbox选项即可。 示例代码： 单选： ``` <radio-group> <label wx:for="{{list}}" wx:key="{{index}}"> <radio value="{{item.value}}">{{item.name}}</radio> </label> </radio-group> ``` 多选： ``` <checkbox-group> <label wx:for="{{list}}" wx:key="{{index}}"> <checkbox value="{{item.value}}">{{item.name}}</checkbox> </label> </checkbox-group> ``` 全选： ``` <checkbox value="all" checked="{{allChecked}}" bindchange="onAllChange">全选</checkbox> <checkbox-group> <label wx:for="{{list}}" wx:key="{{index}}"> <checkbox value="{{item.value}}" checked="{{item.checked}}">{{item.name}}</checkbox> </label> </checkbox-group> ``` 其中，allChecked和item.checked为数据中的属性，需要在js文件中定义和更新。onAllChange为全选按钮的change事件处理函数，代码如下： ``` onAllChange: function (e) { const isChecked = e.detail.value.length > 0; const list = this.data.list.map(item => { item.checked = isChecked; return item; }); this.setData({ allChecked: isChecked, list }); } ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值