微信小程序实现添加手机联系人功能教程全解析

why 146 2024-10-11 09:39:31

本文主要介绍了微信小程序实现添加手机联系人功能,结合实例形式分析了微信小程序添加联系人的具体步骤,包括布局与逻辑实现技巧,需要的朋友可以参考下，希望能帮助到大家。

1、效果展示

image.png 

image.png

image.png

2、关键代码

1）WXML文件


1

<view bindlongtap="phoneNumTap">{{phoneNum}}</view>


2）JS文件


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

Page({

 data:{

 phoneNum:&#39;12345678901&#39;//测试用的号码，并非真实号码

 },

 // 长按号码响应函数

 phoneNumTap:function(){

 var that=this;

 // 提示呼叫号码还是将号码添加到手机通讯录

 wx.showActionSheet({

  itemList: [&#39;呼叫&#39;,&#39;添加联系人&#39;],

  success:function(res){

  if(res.tapIndex===0){

   // 呼叫号码

   wx.makePhoneCall({

   phoneNumber: that.data.phoneNum,

   })

  }else if(res.tapIndex==1){

   // 添加到手机通讯录

   wx.addPhoneContact({

   firstName: &#39;test&#39;,//联系人姓名

   mobilePhoneNumber: that.data.phoneNum,//联系人手机号

   })

  }

  }

 })

 }

})


3）WXSS文件


1

2

3

4

5

view{

 color: blue;

 padding: 15px;

 border-bottom: 1px solid gainsboro;

}



版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：解析 程序 微信小程序 小程序 js
上一篇:微信小程序使用 progress 组件实现显示进度功能教程
下一篇:微信小程序图片选择区域实现裁剪功能教程详解
相关文章