当前位置：首页 > uni-app

uniapp分销二维码

2026-03-26 14:42:07uni-app

生成分销二维码的方法

在UniApp中实现分销二维码功能，通常需要结合用户ID生成专属二维码，并支持扫码后的分销关系绑定。以下是具体实现方案：

后端API准备 确保后端提供生成带参数的二维码接口，例如将用户ID作为参数嵌入二维码。常见格式为： https://example.com/distribution?invite_code=USER_ID

UniApp前端实现 使用uni.downloadFile和uni.saveImageToPhotosAlbum实现二维码下载功能：

// 生成二维码图片
generateQRCode() {
  const userId = this.userInfo.id;
  const qrUrl = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${encodeURIComponent(
    `https://yourdomain.com/invite?ref=${userId}`
  )}`;

  uni.downloadFile({
    url: qrUrl,
    success: (res) => {
      if (res.statusCode === 200) {
        uni.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: () => uni.showToast({ title: '保存成功' })
        });
      }
    }
  });
}

分销关系绑定逻辑

当新用户扫描二维码时，需要解析URL中的邀请参数并建立关联：

URL参数处理 在App的onLaunch或页面onLoad中解析邀请码：

onLoad(options) {
  if (options.ref) {
    // 将邀请码存储到全局或提交给后端
    uni.setStorageSync('inviter_id', options.ref);
  }
}

后端关联验证 提交用户注册信息时，附带邀请码到后端接口：

register() {
  uni.request({
    url: '/api/register',
    method: 'POST',
    data: {
      ...this.formData,
      inviter_id: uni.getStorageSync('inviter_id')
    }
  });
}

第三方SDK集成方案

如需更复杂的二维码功能，可考虑以下方案：

uQRCode插件

安装uni-app官方二维码插件：
```
npm install @dcloudio/uni-ui
```

页面中使用组件：

uniapp分销二维码


<template>
<uqrcode 
 ref="qrcode" 
 :text="qrText" 
 :size="200" 
 @complete="onComplete"
/>
</template>

export default { data() { return { qrText: `https://yourdomain.com/invite?ref=${userID}` } }, methods: { onComplete(path) { this.qrPath = path; } } } ```