【原】微搭低代碼實現(xiàn)二維碼顯示及上傳功能

低代碼布道師 2023-10-12 發(fā)布于內(nèi)蒙古

展開全文

產(chǎn)品歷經(jīng)多次迭代，一直沒有提供二維碼組件,。在日常小程序中,，二維碼出示還是一個很常用的功能。官方不提供,，我們也只能曲線實現(xiàn)了,。

尋找一個開源的在線二維碼網(wǎng)站
將生成的二維碼上傳到云存儲中

1 二維碼在線生成網(wǎng)站

https://api./v1/create-qr-code/?size=150x150&data=你的內(nèi)容

這個網(wǎng)站可以幫我們生成二維碼

2 頁面搭建

我們提供用戶輸入一個內(nèi)容，點擊生成二維碼按鈕來顯示二維碼,，點擊上傳二維碼將圖片上傳到云存儲中

先定義一個變量data用來存放單行輸入的內(nèi)容,，另外創(chuàng)建一個變量url來存放拼接的二維碼的地址

給單行輸入組件綁定值改變事件，方法選擇變量賦值,，將文本框的內(nèi)容賦值給我們的data變量

圖片組件的地址綁定我們的url

將第一個按鈕的內(nèi)容改為生成二維碼,，并且綁定點擊事件，方法選擇變量賦值,，使用表達式進行綁定

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

表達式使用字符串連接,，來進行組裝地址

第二個按鈕的內(nèi)容改為下載二維碼，綁定點擊事件,，方法選擇javascript代碼,，需要自己創(chuàng)建一個自定義方法，方法的內(nèi)容為

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

我們調用了一個API來實現(xiàn)圖片的上傳

3 創(chuàng)建API

在控制臺,，點擊新建APIs

選擇云開發(fā)云函數(shù)

輸入名稱和標識,，點擊管理云函數(shù)

點擊新建云函數(shù)

輸入函數(shù)名稱

切換到函數(shù)代碼，點擊文件,，點擊新建輸入package.json

輸入如下內(nèi)容

{  "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./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,                    })                )            }        });    })};