uniapp 之 复制、粘贴、以及拨打电话

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第16天，点击查看活动详情

前言

因项目的需求，需要我完成，当用户点击复制时，能成功把手机号复制下来,以及还让它在剪切板版显示，以及点击咨询的时候，能唤起拨打电话提示以及拨打手机号功能实现,或许我说的有些迷糊，大家可以看下面的效果图

​

点击咨询后的效果

​

 点击复制后出现的效果

​

 复制 代码

这里主要是用到了

官网地址

 <view style="display: flex;align-items: center;justify-content: space-between;">
              <view>
                <uni-icons type="weixin"></uni-icons> <text style="margin: 0 20rpx;">要复制的手机号</text>
              </view>

              <text class="item-btn" @click="copy('要复制的手机号')">复制</text>
            </view>



 // 复制文本到粘贴板
      copy(value) {
        //提示模板
        uni.showModal({
          content: value, //模板中提示的内容
          confirmText: '复制内容',
          success: (res) => { //点击复制内容的后调函数
            if (res.confirm) {
              uni.setClipboardData({
                data: value, //要被复制的内容
                success: () => { //复制成功的回调函数
                  uni.$showMsg('复制成功')
                }
              });
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },

拨打电话 代码 

 拨打手机号要分 安卓系统 以及 iOS系统

<view style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 20px;"> 
    <view> 
        <uni-icons type="phone-filled"></uni-icons> 
        <text>要咨询的手机号</text> 
    </view> 
    <view size="mini" @click="call('要咨询的手机号')">咨询</view> 
</view>


  // 拨打电话
      call(phone) {
        console.log('传入的电话', phone);
        const res = uni.getSystemInfoSync();
        if (res.platform == 'ios') { // ios系统默认有个模态框
          uni.makePhoneCall({
            phoneNumber: phone,
            success() {
              console.log('拨打成功了');
            },
            fail() {
              console.log('拨打失败了');
            }
          })
        } else { //安卓手机手动设置一个showActionSheet
          uni.showActionSheet({
            itemList: [phone, '呼叫'],
            success: function(res) {
              console.log(res);
              if (res.tapIndex == 1) {
                uni.makePhoneCall({
                  phoneNumber: phone,
                })
              }
            }
          })
        }
      },

​