更新记录

1.0.0（2026-01-26） 下载此版本

  • 首次发布
  • 支持 HarmonyOS 碰一碰分享
  • 支持图片分享功能

平台兼容性

uni-app(4.81)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙 鸿蒙插件版本
× × × × - × × × 20 1.0.0
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
× × × × × × × × × - × ×

jack-knock-share 鸿蒙碰一碰分享插件

简介

这是一个专为 HarmonyOS 开发的碰一碰分享插件，支持通过物理触碰的方式快速分享图片到其他设备。

功能特性

  • ✅ 支持 HarmonyOS 碰一碰分享
  • ✅ 自动触发分享，无需手动操作
  • ✅ 对方无需安装应用即可接收图片
  • ✅ 简单易用的 API
  • ✅ 完整的错误处理

平台支持

平台 支持情况
HarmonyOS ✅ 支持
Android ❌ 不支持
iOS ❌ 不支持

安装

将插件复制到项目的 uni_modules 目录下即可。

使用方法

方式一：挂载到 uni 全局对象

<template>
  <view>
    <button @click="handleShare">开启碰一碰分享</button>
  </view>
</template>

<script>
// 需要在任意页面中引入 1 次，不然会被摇掉
import "@/uni_modules/jack-knock-share"

export default {
  methods: {
    async handleShare() {
      // 1. 生成图片（使用 Canvas 或其他方式）
      const imagePath = await this.generateImage()

      // 2. 注册碰一碰分享
      uni.registerKnockShare({
        imagePath: imagePath,
        success: (res) => {
          console.log('注册成功:', res)
          uni.showToast({
            title: '请轻碰设备进行分享',
            icon: 'none'
          })
        },
        fail: (err) => {
          console.error('注册失败:', err)
          uni.showToast({
            title: '注册失败',
            icon: 'none'
          })
        }
      })
    },

    async generateImage() {
      // 这里实现图片生成逻辑
      return '/path/to/image.jpg'
    }
  },

  onHide() {
    // 页面隐藏时注销监听
    uni.unregisterKnockShare()
  }
}
</script>

方式二：使用 import 引入

<template>
  <view>
    <button @click="handleShare">开启碰一碰分享</button>
  </view>
</template>

<script>
import { registerKnockShare, unregisterKnockShare } from "@/uni_modules/jack-knock-share"

export default {
  methods: {
    async handleShare() {
      const imagePath = await this.generateImage()

      registerKnockShare({
        imagePath: imagePath,
        success: (res) => {
          console.log('注册成功:', res)
        },
        fail: (err) => {
          console.error('注册失败:', err)
        }
      })
    },

    async generateImage() {
      return '/path/to/image.jpg'
    }
  },

  onHide() {
    unregisterKnockShare()
  }
}
</script>

API 说明

uni.registerKnockShare(options)

注册碰一碰分享监听。

参数：

参数名 类型 必填 说明
imagePath String 是 要分享的图片路径（本地临时文件路径）
success Function 否 成功回调
fail Function 否 失败回调
complete Function 否 完成回调

success 返回参数：

参数名 类型 说明
errMsg String 成功信息

fail 返回参数：

参数名 类型 说明
errCode Number 错误码
errMsg String 错误信息

示例：

uni.registerKnockShare({
  imagePath: '/path/to/image.jpg',
  success: (res) => {
    console.log('注册成功:', res.errMsg)
  },
  fail: (err) => {
    console.error('注册失败:', err.errCode, err.errMsg)
  },
  complete: (res) => {
    console.log('完成:', res.errMsg)
  }
})

uni.unregisterKnockShare()

注销碰一碰分享监听。

参数： 无

示例：

uni.unregisterKnockShare()

完整示例

<template>
  <view class="page">
    <view class="preview">
      <image :src="previewImage" mode="aspectFit"></image>
    </view>

    <button @click="generateAndShare" class="btn-primary">
      生成并开启碰一碰分享
    </button>

    <button @click="stopShare" class="btn-secondary">
      关闭分享
    </button>

    <view class="tips">
      <text>提示：开启分享后，将设备轻碰另一台设备即可分享图片</text>
    </view>

    <!-- Canvas 用于生成图片 -->
    <canvas canvas-id="shareCanvas" class="hidden-canvas"></canvas>
  </view>
</template>

<script>
import "@/uni_modules/jack-knock-share"

export default {
  data() {
    return {
      previewImage: '',
      isSharing: false
    }
  },

  methods: {
    async generateAndShare() {
      uni.showLoading({ title: '生成中...' })

      try {
        // 1. 生成图片
        const imagePath = await this.generateImage()
        this.previewImage = imagePath

        uni.hideLoading()

        // 2. 注册碰一碰分享
        uni.registerKnockShare({
          imagePath: imagePath,
          success: (res) => {
            this.isSharing = true
            uni.showToast({
              title: '请轻碰设备进行分享',
              icon: 'none',
              duration: 3000
            })
          },
          fail: (err) => {
            uni.showToast({
              title: '注册失败: ' + err.errMsg,
              icon: 'none'
            })
          }
        })
      } catch (error) {
        uni.hideLoading()
        uni.showToast({
          title: '生成失败',
          icon: 'none'
        })
      }
    },

    async generateImage() {
      return new Promise((resolve, reject) => {
        const ctx = uni.createCanvasContext('shareCanvas', this)

        // 绘制内容
        ctx.setFillStyle('#667eea')
        ctx.fillRect(0, 0, 375, 500)

        ctx.setFillStyle('#ffffff')
        ctx.setFontSize(32)
        ctx.setTextAlign('center')
        ctx.fillText('宝宝名片', 187.5, 250)

        // 导出图片
        ctx.draw(false, () => {
          setTimeout(() => {
            uni.canvasToTempFilePath({
              canvasId: 'shareCanvas',
              success: (res) => {
                resolve(res.tempFilePath)
              },
              fail: reject
            }, this)
          }, 500)
        })
      })
    },

    stopShare() {
      uni.unregisterKnockShare()
      this.isSharing = false
      uni.showToast({
        title: '已关闭分享',
        icon: 'success'
      })
    }
  },

  onHide() {
    // 页面隐藏时自动关闭分享
    if (this.isSharing) {
      uni.unregisterKnockShare()
      this.isSharing = false
    }
  }
}
</script>

<style scoped>
.page {
  padding: 32rpx;
}

.preview {
  width: 100%;
  height: 800rpx;
  background-color: #f5f5f5;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 32rpx;
}

.preview image {
  width: 100%;
  height: 100%;
}

.btn-primary,
.btn-secondary {
  width: 100%;
  height: 88rpx;
  margin-bottom: 16rpx;
  border-radius: 44rpx;
  font-size: 32rpx;
}

.btn-primary {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
}

.btn-secondary {
  background-color: #fff;
  color: #667eea;
  border: 2rpx solid #667eea;
}

.tips {
  padding: 24rpx;
  background-color: #f5f5f5;
  border-radius: 12rpx;
  margin-top: 16rpx;
}

.tips text {
  font-size: 24rpx;
  color: #666;
  line-height: 36rpx;
}

.hidden-canvas {
  position: fixed;
  left: -9999rpx;
  top: -9999rpx;
  width: 750rpx;
  height: 1000rpx;
}
</style>

注意事项

  1. 设备要求：需要 HarmonyOS 6.0 及以上版本
  2. 图片路径：必须是本地临时文件路径，不支持网络图片
  3. 生命周期管理：记得在页面隐藏或销毁时调用 unregisterKnockShare()
  4. 分享时机：注册后，用户轻碰设备即可触发分享
  5. 对方设备：对方无需安装应用，直接接收图片文件

常见问题

Q1: 碰一碰没有触发？

可能原因：

  • 设备不支持碰一碰功能
  • 未正确注册监听
  • 图片路径不正确

解决方案：

  • 检查设备是否支持 HarmonyOS 碰一碰
  • 查看控制台日志确认注册状态
  • 确保图片路径是本地临时文件路径

Q2: 分享失败？

可能原因：

  • 图片文件不存在
  • 文件路径格式错误
  • 权限不足

解决方案：

  • 确认图片文件已生成
  • 检查文件路径格式（不要包含 file:// 前缀）
  • 查看错误信息进行排查

Q3: 对方需要安装应用吗？

答：不需要。 碰一碰分享的是图片文件，对方设备会直接接收图片，无需安装应用。

更新日志

1.0.0 (2025-01-19)

  • 首次发布
  • 支持 HarmonyOS 碰一碰分享
  • 支持图片分享功能

许可证

MIT License

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...