yh-rwm云函数生成二维码支持鸿蒙、ios、小程序、安卓、appx专用

更新记录

1.0.1（2025-10-05）

修正可以

1.0.0（2025-10-05）

使用云函数生成二维码支持鸿蒙、ios、小程序、安卓、H5，支持图片保存下载，支持uni-appx 。

平台兼容性

云端兼容性

阿里云	腾讯云	支付宝云
√	√	√

uni-app

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
×	×	×	×	×	×	×	×	×

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	快应用-华为	快应用-联盟
×	×	×	×	×	×	×	×	×	×	×

uni-app x(4.36)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
√	√	√	√	√	√

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

带 Logo 二维码组件插件使用说明一、插件介绍该插件提供了一个可复用的二维码组件，支持生成带自定义 Logo 的二维码，并兼容H5 端下载、移动端保存到相册功能。具备以下特性：生成带圆角 Logo 的二维码（由云函数处理）； H5 环境下触发浏览器下载，用户可自定义保存路径；移动端（App / 小程序）支持保存到系统相册，自动处理权限申请；支持通过 Slot 自定义生成、保存按钮样式；基于 UniApp 生态开发，多端兼容。二、安装与引入

组件安装将组件文件 yh-rwm.uvue 复制到项目的 components 目录下（示例路径：components/yh-rwm/yh-rwm.uvue）。
页面引入在需要使用的页面中引入并注册组件：

<template>
<yh-rwm :text="qrText" :fixedLogoUrl="logoUrl" @generate="handleGenerate" @save="handleSave" />
</template>
<script>
    // 引入组件

    export default {

        data() {
            return {
                qrText: 'https://example.com', // 二维码内容（动态传入）
                logoUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F05%2F20200305132425_arfec.thumb.400_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=***&t=b15ce3710ddfee09d00795119420ed79' // logo地址（动态传入）
            };
        },
        methods: {
            // 监听二维码生成结果
            handleGenerate(res : UTSJSONObject) {
                if (res.loading != null && res.loading as boolean) {
                    console.log('正在生成二维码...');
                } else if (res.success != null && res.success as boolean) {

                } else {
                    console.error('生成失败', res.msg);
                }
            },
            // 监听保存结果
            handleSave(res : UTSJSONObject) {
                if (res.success != null && res.success as boolean) {
                    console.log('保存成功');
                } else {
                    console.error('保存失败', res.msg);
                }
            }
        }
    };
</script>

三、组件属性（Props）属性名类型是否必填默认值说明 text String 是 - 二维码内容（如网址、文本等，必填） fixedLogoUrl String 否 '' Logo 图片的网络地址（可选，无则生成无 Logo 二维码） cloudFunctionName String 否 yh-rwm 生成二维码的云函数名称（需与 UniCloud 部署的云函数名一致） downloadFileName String 否 qrcode-with-logo H5 端下载时的文件名前缀（自动添加时间戳避免重复）四、事件说明

generate 事件生成二维码的回调事件，参数为包含生成状态的对象：参数名类型说明 loading Boolean 是否正在生成二维码 success Boolean 生成是否成功 qrCodeUrl String 生成的二维码 Base64 地址（成功时返回） msg String 失败时的错误提示信息
save 事件保存 / 下载二维码的回调事件，参数为包含保存状态的对象：参数名类型说明 success Boolean 保存 / 下载是否成功 msg String 操作结果提示信息五、云函数配置（UniCloud）该组件依赖 UniCloud 云函数生成带 Logo 的二维码，需按以下步骤配置：
云函数代码在 UniCloud 云函数目录下创建 yh-rwm 云函数，将以下代码复制到 index.js 中： javascript
依赖安装在云函数目录下执行以下命令安装依赖： npm install qrcode@1.5.4 jimp@0.16.1 --save
部署云函数将云函数部署到 UniCloud 环境，确保组件的 cloudFunctionName 属性与云函数名一致（默认 yh-rwm）。六、自定义样式（Slot）组件支持通过 Slot 自定义生成按钮和保存按钮的样式：

七、注意事项 H5 环境限制：H5 端依赖浏览器下载功能，部分浏览器（如 Safari）对 Blob 下载兼容性有限。若出现下载异常，可提示用户 “右键二维码图片→另存为”。移动端权限：移动端保存到相册需申请相册权限，组件会自动引导用户开启权限。 Logo 图片要求：Logo 图片需为网络可访问的地址（支持 http/https），建议使用正方形图片以保证显示效果。云函数依赖：确保云函数已正确部署且依赖安装完整，否则无法生成二维码。