この製品は何度も繰り返されてきましたが、QR コード コンポーネントは提供されていません。日常のアプレットでは、QR コードの表示は依然として非常に一般的な機能です。公式は提供しておらず、カーブでしか実現できません。
- オープンソースのオンライン QR コード Web サイトを探している
- 生成したQRコードをクラウドストレージにアップロード
1 二次元コードオンライン生成サイト
https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=あなたのコンテンツ
このウェブサイトは、QR コードの生成に役立ちます
2ページ構成
ユーザーはコンテンツを入力し、[QR コードを生成] ボタンをクリックして QR コードを表示し、[QR コードをアップロード] をクリックして写真をクラウド ストレージにアップロードすることができます。
最初に、1 行の入力内容を格納する変数 data を定義し、つなぎ合わせた QR コードのアドレスを格納する変数 url を作成します。
値変更イベントを単一行入力コンポーネントにバインドし、メソッドは変数の割り当てを選択し、テキスト ボックスのコンテンツをデータ変数に割り当て、画像コンポーネントのアドレスを URL にバインドし、最初のボタンのコンテンツを変更し
ます
。 QRコードを生成し、クリックイベントをバインド、メソッド選択変数の割り当て、式を使用してバインド
"https://api.qrserver.com/v1/create-qr-code/?size=150x150&data="+$page.dataset.state.data
式は文字列連結を使用してアドレスを組み立てます
2番目のボタンの内容は、QRコードをダウンロードし、クリックイベントをバインドし、メソッドとしてjavascriptコードを選択するように変更されています.カスタムメソッドを自分で作成する必要があります.メソッドの内容は
export default function({
event, data}) {
app.cloud.callConnector({
name:'download_k5hg33q',
methodName:'dowloadpic',
params:{
data:$page.dataset.state.data
}
})
}
API を呼び出して写真をアップロードします
3 API の作成
コンソールで New API をクリックし、
Cloud Development Cloud Function を選択します
名前とロゴを入力し、Manage Cloud Function をクリックします
New Cloud Function をクリックし、
関数名を入力します
関数コードに切り替え、File をクリックし、New をクリックして、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,
})
)
}
});
})
};
コードの意味は、リクエストモジュールを介してQRコードのアドレスにアクセスし、アクセス結果をクラウドストレージにアップロードすることです
設定後、保存ボタンをクリックしてクラウド関数をデプロイして有効にし、API に戻って、作成したばかりのクラウド関数を選択します。
入力パラメーターを追加し、パラメーターのデータを書き込み、メソッドをクリックしてテストします
Click to run the test, and then click to export the parameter mapping to see our return results. アップロードが成功すると、ファイル ID が返されます。
クラウド開発クラウドベースに入り、クラウド ストレージを見つけると、アップロードされた QR コードが表示されます
データ ソースのメソッドを呼び出して、画像のファイル ID をデータ ソースに保存することができます。これにより、次に画像を表示またはダウンロードする場合に、データ ソースから直接取得できます。
要約する
この記事では、サードパーティの QR コード サービスを使用して、QR コードの表示とアップロード機能を実現する方法を説明しました. 時には、妥協案がアプリケーションをすばやくオンラインにするのにも役立ちます. 最も重要なことは、機能を実現することです.