微信小程序——复制组件的封装

原创已于 2022-07-10 10:18:27 修改 · 242 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #小程序

于 2021-06-06 16:16:44 首次发布

微信小程序专栏收录该内容

124 篇文章

订阅专栏

这篇博客介绍了如何在微信小程序中创建一个名为copyText的自定义组件，该组件用于实现用户点击后将特定文本复制到剪贴板的功能。在copyText.wxml和copyText.js中分别定义了组件结构和事件处理方法。通过bindtap事件和wx.setClipboardData接口，当用户触发组件时，可以成功复制预设的文本。在demo.wxml和demo.json中展示了如何引入并使用这个自定义组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

copyText组件

copyText.wxml

<text class="iconfont iconfuzhi" bindtap="handlCopyText"></text>

copyText.js

// components/copyText/copyText.js
Component({
  /**
   * 组件的属性列表
   */
    // apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面
  options: {
    styleIsolation:  'apply-shared'
  },
  properties: {
    copyText: String
  },

  /**
   * 组件的初始数据
   */
  data: {
  },

  /**
   * 组件的方法列表
   */
  methods: {
    handlCopyText () {
      wx.setClipboardData({
        // 需要拷贝的文字
        data: this.data.copyText, 
        success (res) {
          wx.showToast({
            title: '复制成功',
          })
        }
      })
    }
  }
})

引入

demo.wxml

  <copyText copyText="{{点击我复制}}"/>

demo.json

{
  "usingComponents": {
    "copyText": "../../components/copyText/copyText"
  }
}