微信小程序实现点击复制功能和手机拨打电话功能

2025-07-02前端开发
78

做小程序项目的时候,客户提了一个功能需求优化,就是长按文字需要复制全部内容,因为有的手机支持全选复制,有的手机不支持全选复制。

通过设置系统剪贴板的内容和获取系统剪贴板的内容实现复制功能

html相关代码:

        <van-field
            value="{{form.contactPhone}}"
            label="联系电话 :"
            readonly
            border="{{ false }}"
            catchtap="phoneClick"
        />
        <van-field
            value="{{form.realAddress}}"
            label="地址 :"
            type="textarea"
            readonly
            border="{{ false }}"
            bindtap="copyText"
            data-key="{{form.realAddress}}"
        />
js相关代码:
    copyText(e) {
        let key = e.currentTarget.dataset.key
        //设置系统剪贴板的内容
        wx.setClipboardData({
          data: key,
          success(res) {
            //获取系统剪贴板的内容
            wx.getClipboardData({
              success: (res) => {
                  //提示
                  wx.showToast({
                    title: '复制成功',
                  })
              },
            })
          }
        })
    },
html代码:
    phoneClick() {
        wx.makePhoneCall({
          phoneNumber: this.data.form.contactPhone,
        })
    },
The End
微信小程序

相关推荐

微信小程序实现点击复制功能和手机拨打电话功能
做小程序项目的时候,客户提了一个功能需求优化,就是长按文字需要复制全部内容,因为有的手机支持全选复制,有的手机不支持全选复制。 通过设置系统剪贴板的内容和获取系统剪贴板的内容实现复制功能 html相关代码: van-field value="{{form.contactPhone}}"...
2025-07-02 前端开发
78

微信小程序实现animation动画
以下是“微信小程序实现animation动画”的完整攻略:...
2023-12-08 前端开发
341

详解微信小程序中var、let、const用法与区别
在微信小程序的开发中,我们常常会使用到JS语言中的变量。而在ES6中,我们可以通过var、let、const来声明变量。这三个关键字有什么区别呢?下面就来详细讲解一下。...
2023-12-08 前端开发
288

微信小程序 扭蛋抽奖机css3动画实现详解
下面是针对“微信小程序 扭蛋抽奖机css3动画实现详解”的完整攻略:...
2023-12-08 前端开发
410

微信小程序动画(Animation)的实现及执行步骤
下面是“微信小程序动画(Animation)的实现及执行步骤”的完整攻略。...
2023-12-08 前端开发
1690