uni-app获取手机通讯录(基于HTML5+)

2024-05-21 02:08

本文主要是介绍uni-app获取手机通讯录(基于HTML5+),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 

官方API:https://www.html5plus.org/doc/zh_cn/contacts.html

 

话不多说,直接上代码

contacts.vue

<template><view><button type="primary" @tap="getContacts">获取联系人</button><block  v-for="(item,index) in list" :key="index"><view>{{item.displayName}}</view><block v-for="(subitem,idx) in item.phoneNumbers" :key="idx"><view>{{subitem.value}}</view></block></block></view>
</template><script>var Contactsexport default {data() {return {list: []}},onShow() {uni.setNavigationBarTitle({title: '通讯录'});},methods: {getContacts: function() {var that = this// 获取通讯录对象plus.contacts.getAddressBook( plus.contacts.ADDRESSBOOK_PHONE, function( addressbook ) {uni.showToast({title: '获取通讯录对象成功',duration: 2000})console.log('获取通讯录对象成功')console.log(addressbook)// 查找联系人addressbook.find(["displayName","phoneNumbers"],function(contacts){uni.showToast({title: '获取联系人成功',duration: 2000})console.log('获取联系人成功')console.log(JSON.stringify(contacts))that.list = contacts}, function () {uni.showToast({title: '获取联系人失败',duration: 2000})},{multiple:true});}, function ( e ) {uni.showToast({title: '获取通讯录对象失败:' + e.message,duration: 2000})});}}}
</script><style></style>
复制代码

 

 

注:由于hx调试输出console.log()不能直接输出对象,故用JSON.stringify()转一下,好作调试输出。示意:console.log(JSON.stringify(contacts))

这篇关于uni-app获取手机通讯录(基于HTML5+)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/995965

相关文章

vue dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND

本地正常。打包好的dist文件打开index.html报Failed to load resource: net::ERR_FILE_NOT_FOUND 解决办法: 在webpack.prod.conf.js 中output添加参数publicPath:’./’ 在webpack.base.conf.js里 publicPath: process.env.NODE_ENV === ‘pro

vue-cil项目中使用外部js的3种方法

vue-cil项目中 1. 导入属性的方法 新建 ./api/api.js import Vue from 'vue';Vue.prototype.test=function () {alert(111)} 在main.js 中导入; import * as API from './api/api.js' 在任何一个.vue文件中都可以使用此属性.例如 在a.vue中 this.t

vue-cil 项目常用npm 命令行;

``` bash# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build 删除目录;npm install -g rimraf(如果还没安装rimraf,全局安装ri

html标签转换成img图片

app 里的元素需要转换成图片 <script src="../assets/js/html2canvas.min.js"></script>$(function () {html2canvas(document.querySelector("#app"), {useCORS: true}).then(canvas => {layer.close(vm.layerIndex)var img =

按顺序加载外部资源js css

cmmon.js /*** 公共js文件* 内置参数说明:* locationUrl:硬盘路径(开发模式使用)* ytRootUrl:系统根目录,引入该js文件后可直接使用* initJq:自定义jq文件的目录,如果需要引用不同的jq文件,请修改目录。* initCssUrl:初始化css文件容器,如果需要新增或修改引入的c

前端微信网页授权+WebSocket

这篇教程只介绍前端需要做的工作; 注意: 1,开发者必须关注公众号,且是公众号下的开发者; 2,域名地址必须是公众号绑定的域名地址; 微信授权需要调试工具:微信web开发者工具; 参考微信文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842 微信授权,前端与服务端的交互只涉及appId,code,和re

基于uni-app和图鸟UI开发上门服务小程序

一、技术栈选择 uni-app:我们选择了uni-app作为开发框架,因为它基于Vue.js,允许我们编写一次代码,发布到多个平台,包括iOS、Android、Web以及各种小程序。uni-app的丰富组件库、高效的状态管理以及便捷的预览调试功能,极大提升了开发效率。 图鸟UI:图鸟UI是基于uni-app的UI框架,它提供了大量美观且实用的组件和页面模板,帮助我们快速构建出风格统一、用户体

C语言封装获取本机IP地址的程序

文章目录 0.概要1. 设计2. 完整的代码`ip_address.h``ip_address.c``main.c`编译命令执行结果 0.概要 本文介绍用C语言编写一个函数来获取本机的IP地址。 1. 设计 将获取IP地址的逻辑封装到一个独立的函数中,并定义一个结构体来存储IP地址和接口名称。 将获取IP地址的逻辑封装到一个函数中,该函数遍历本机的所有网络接口并获取其IP

WinCE的C#程序中获取当前应用程序的路径

WinCE中获取当前路径的两种方法: string appPath = System.IO.Path.GetDirectoryName(System.Reflection.Assembly.GetExecutingAssembly().GetName().CodeBase); string appPath = System.IO.Path.GetDirectoryName(System.R

利用AT命令获取所在位置的小区号LAC和基站号ID,基站ID转换成经纬度

最近在做一个基站ID转换成经纬度的功能。     1.先发AT指令:AT+CREG=2     2.再发AT指令:AT+CREG?     获得返回值:     +CREG:     2,1,"A530","0161F10F",6 A530为LAC,0161F10F为基站ID 然后将获取的LAC,和基站ID,通