一键拨打电话（html,小程序，uniapp）

﹏ヽ暗。殇╰゛Y 2023-03-02 13:19 27阅读 0赞

最近看到一个好玩的东西，打算记录一下  
通过一行代码，一键播打电话，打算总结一下

对于js的一键拨打电话：

1.  一键拨打电话`<a href="tel:13764567708">一键拨打电话</a>`  
    这是最常用的拨打电话方式，显示电话号码，提示并且一键拨打
2.  一键拨打电话

对于小程序的一键拨打电话：

1.  联系商家：15377870982 [微信小程序关于拨打电话文档][Link 1]

// bindtap 相当于click事件
    	<view bindtap="Callphone" data-item='{ {phone}}'>联系商家：{ { phone}}</view>
    /*下面是js代码*/
    	Page({ 
      data: { 
       phone:"15377870982",
      },
    
      Callphone: function (e) { 
      			/*获取电话号码*/
            let item = e.currentTarget.dataset.item;
            /*这里是微信的电话api*/
              wx.makePhoneCall({ 
            phoneNumber: item
           })
        },
    })

该API的参数解释：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center]

对于uniapp的一键拨打电话：

1.  联系商家：15377870982

<van-cell value="18954100827"  is-link class="van-cell" @click="gocall">
    				<view slot="title">
    					<image src="https://yangguangchefu.soxunsoft.com/static/image/kefu.png" mode="" ></image>
    					<view class="title">客服电话</view>
    					
    				</view>
    			</van-cell>
    
    /*下面是js代码*/
    	methods: { 
    			gocall(){ 
    				uni.makePhoneCall({ 
    				 	
    				 	// 手机号
    				    phoneNumber: '15377870982', 
    				
    					// 成功回调
    					success: (res) => { 
    						console.log('调用成功!')	
    					},
    				
    					// 失败回调
    					fail: (res) => { 
    						console.log('调用失败!')
    					}
    					
    				  });
    			},
    			}

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 1]  
对应的参数说明：  
![对应的参数说明][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 2]

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/api/device/phone/wx.makePhoneCall.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/94c9f74550d44cfaa157617bc0e5d643.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230208/bd7eef011a8a4f68a7200dd6567624f7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ0OTg0NDA3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230208/8fa383e9a529461e9425c2fe2da3735a.png