|
產品歷經(jīng)多次迭代，一直沒有提供二維碼組件。在日常小程序中，二維碼出示還是一個很常用的功能。官方不提供，我們也只能曲線實現(xiàn)了。 尋找一個開源的在線二維碼網(wǎng)站 將生成的二維碼上傳到云存儲中
1 二維碼在線生成網(wǎng)站 https://api./v1/create-qr-code/?size=150x150&data=你的內容
這個網(wǎng)站可以幫我們生成二維碼 2 頁面搭建 我們提供用戶輸入一個內容，點擊生成二維碼按鈕來顯示二維碼，點擊上傳二維碼將圖片上傳到云存儲中 
先定義一個變量data用來存放單行輸入的內容，另外創(chuàng)建一個變量url來存放拼接的二維碼的地址 
給單行輸入組件綁定值改變事件，方法選擇變量賦值，將文本框的內容賦值給我們的data變量 
圖片組件的地址綁定我們的url 
將第一個按鈕的內容改為生成二維碼，并且綁定點擊事件，方法選擇變量賦值，使用表達式進行綁定 
"https://api./v1/create-qr-code/?size=150x150&data="+$page.dataset.state.data
表達式使用字符串連接，來進行組裝地址 第二個按鈕的內容改為下載二維碼，綁定點擊事件，方法選擇javascript代碼，需要自己創(chuàng)建一個自定義方法，方法的內容為 
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
輸入如下內容
{ "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, }) ) } }); })};
代碼的意思是通過request模塊訪問二維碼的地址，將訪問的結果上傳到云存儲中 設置好之后點擊保存按鈕讓云函數(shù)部署并生效，回到我們的API中，選擇我們剛剛創(chuàng)建的云函數(shù)
增加一個入?yún)?，參?shù)寫data，點擊方法測試
點擊運行測試，然后點擊出參映射就可以看到我們的返回結果，上傳成功后會給返回一個fileid 進入到云開發(fā)cloudbase里，找到我們的云存儲，可以看到上傳的二維碼
我們可以調用數(shù)據(jù)源的方法將圖片的fileid存入數(shù)據(jù)源中，這樣如果下次希望顯示或者下載直接從數(shù)據(jù)源獲取就可以 總結 本篇我們講解了如何借助第三方的二維碼服務來實現(xiàn)我們的二維碼顯示及上傳功能，有時候采取一個折中方案也可以幫助你的應用快速上線，最重要的就是實現(xiàn)功能。
|
