The product has gone through many iterations, but has not provided a QR code component. In daily applets, QR code display is still a very common function. The official does not provide it, and we can only realize it in a curve.
- Looking for an open source online QR code website
- Upload the generated QR code to cloud storage
1 Two-dimensional code online generation website
https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=your content
This website can help us generate QR codes
2 page construction
We provide users to input a content, click the Generate QR Code button to display the QR code, and click Upload QR Code to upload the picture to the cloud storage
First define a variable data to store the content of a single line of input, and create a variable url to store the address of the spliced QR code
Bind the value change event to the single-line input component, select the variable assignment method, assign the content of the text box to our data variable,
bind the address of the picture component to our url,
change the content of the first button to generate a QR code, and Bind click event, method selection variable assignment, use expression to bind
"https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="+$page.dataset.state.data
Expressions use string concatenation to assemble addresses
The content of the second button is changed to download the QR code, bind the click event, select javascript code as the method, and need to create a custom method by yourself. The content of the method is
export default function({
event, data}) {
app.cloud.callConnector({
name:'download_k5hg33q',
methodName:'dowloadpic',
params:{
data:$page.dataset.state.data
}
})
}
We call an API to upload pictures
3 Create APIs
In the console, click New APIs
and select Cloud Development Cloud Function
Enter the name and logo, click Manage Cloud Function Click
New Cloud Function and
enter the function name
Switch to function code, click File, click New and enter package.json and
enter the following content
{
"name": "app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
},
"author": "",
"license": "ISC",
"dependencies": {
"@cloudbase/node-sdk": "latest"
}
}
Then click Save and install dependencies and
enter the following code in 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,
})
)
}
});
})
};
The meaning of the code is to access the address of the QR code through the request module, and upload the access result to the cloud storage
After setting, click the save button to let the cloud function deploy and take effect, go back to our API, and select the cloud function we just created
Add an input parameter, write data for the parameter, and click the method to test
Click to run the test, and then click to export the parameter mapping to see our return result. After the upload is successful, a fileid will be returned
Enter the cloud development cloudbase, find our cloud storage, and you can see the uploaded QR code
We can call the method of the data source to store the fileid of the picture in the data source, so that if we want to display or download it next time, we can get it directly from the data source
Summarize
In this article, we explained how to use the third-party QR code service to realize our QR code display and upload functions. Sometimes a compromise solution can also help your application go online quickly. The most important thing is to realize the function.