当前位置：首页 > article >正文

微搭低代码实现二维码显示及上传功能

article 2025/1/31 10:21:36

产品历经多次迭代，一直没有提供二维码组件。在日常小程序中，二维码出示还是一个很常用的功能。官方不提供，我们也只能曲线实现了。

寻找一个开源的在线二维码网站
将生成的二维码上传到云存储中

1 二维码在线生成网站

https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=你的内容

这个网站可以帮我们生成二维码

2 页面搭建

我们提供用户输入一个内容，点击生成二维码按钮来显示二维码，点击上传二维码将图片上传到云存储中

在这里插入图片描述
先定义一个变量data用来存放单行输入的内容，另外创建一个变量url来存放拼接的二维码的地址

在这里插入图片描述
给单行输入组件绑定值改变事件，方法选择变量赋值，将文本框的内容赋值给我们的data变量

图片组件的地址绑定我们的url

将第一个按钮的内容改为生成二维码，并且绑定点击事件，方法选择变量赋值，使用表达式进行绑定
在这里插入图片描述

"https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="+$page.dataset.state.data

表达式使用字符串连接，来进行组装地址

第二个按钮的内容改为下载二维码，绑定点击事件，方法选择javascript代码，需要自己创建一个自定义方法，方法的内容为
在这里插入图片描述

export default function({event, data}) {
    app.cloud.callConnector({
      name:'download_k5hg33q',
      methodName:'dowloadpic',
      params:{
        data:$page.dataset.state.data
      }
    })
}

我们调用了一个API来实现图片的上传

3 创建API

在控制台，点击新建APIs
在这里插入图片描述
选择云开发云函数

输入名称和标识，点击管理云函数

点击新建云函数

输入函数名称

切换到函数代码，点击文件，点击新建输入package.json

输入如下内容

{
  "name": "app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {},
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@cloudbase/node-sdk": "latest"
  }
}

然后点击保存并安装依赖
在这里插入图片描述
在index.js里输入如下代码

'use strict';
const request = require('request');
const tcb = require('@cloudbase/node-sdk')
const app = tcb.init({
})
exports.main = async (event, context) => {
    var options = {
        url: 'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data='+event.data,
        encoding: null,
        headers: {
            "content-type": "application/octet-stream",
        },
    };
    return new Promise(function (resolve, reject) {
        request(options, function (error, response, body) {
            if (!error && response.statusCode == 200) {
                resolve(
                    app.uploadFile({
                        cloudPath: event.data+".png",
                        fileContent: body,
                    })
                )
            }
        });
    })
};