ホームページ > 記事 > WeChat アプレット > ミニプログラムコードを動的に作成する方法の簡単な分析

ミニプログラムコードを動的に作成する方法の簡単な分析

青灯夜游転載: 2021-11-03 11:09:092944ブラウズ

この記事では、WeChatミニプログラムクラウド開発で小さなプログラムコードを動的に作成する方法を紹介しますので、お役に立てれば幸いです。

1. はじめに

私は学校や仕事でいろいろあって、長らく「農業」を諦めていました。この間、たくさんのことを学び、大小合わせて10件近くのプロジェクトに取り組みましたが、その過程で記録の大切さを痛感し、忙しい合間を縫ってブログを書こうと思い立ちました。開発プロセスにおけるいくつかの知識ポイントについて話しましょう。決まり文句ですが、次回振り返るためだけでなく、困っている人たちを助けることができればという願いも込められています。 [関連する学習の推奨事項: ミニプログラム開発チュートリアル ]

2. 要件分析

毎日の WeChat ミニプログラムプロジェクトでは、プロモーションポスターや招待ポスターを使用する必要があることがよくあります。友達を招待するポスターなどの機能は、生成後にユーザーが友達に投稿したり、友達の招待状を転送したりすることができますが、このとき、特典の発行などを簡単に行うために、どのユーザーを招待したかを把握する必要があります。これらは非常に一般的な要件です。では、同様のニーズをどのように満たすことができるのでしょうか?

3. アイデア分析

実際、これらのポスターの中で最も重要なものは、コードを長押ししてスキャンすることで認識されるパラメーター付きの QR コード (ミニプログラムコード) です。

WeChat アプレット開発ドキュメントを参照すると、一般に、この種のパラメータ付き QR コード (小さなプログラムコード) を生成するには 2 つの方法があることがわかります。ポスター上では、この QR コードのパラメータを使用して、ポスターを作成したユーザーを識別できます。他のユーザーがコードをスキャンしてミニプログラムにアクセスすると、識別された ID がデータベースに保存され、ポスターを招待したユーザーを特定できます。人々。

コードを書くのは久しぶりなので、言うのは少し面倒かもしれません。

要約: QR コードのパラメーターに基づいて投稿者を特定するには、このパラメーターでユーザーを特定できる必要があります。一般的に、ユーザーの openid を識別パラメーターとして使用できます。。

#簡単な例 (クラウド開発):

コレクションの定義:

user

ユーザーが 2 人います

# U1

フィールド名 ##_id 123456789クラウドデータベースによって自動的に生成された ID を使用できます。自分で生成する必要はありません。_openid112233これはデータの挿入時に含まれ、システムフィールドでもありますsuperiorId445566優れた openid フィールドU2

値	説明

フィールド名値説明_id987654321クラウドデータベースによって自動的に生成された ID を使用するだけです。必要はありません。自分で生成してください_openid556677データの挿入時に含まれ、システムフィールドでもありますsuperiorId112233Superior openid フィールド上記のデータテーブルでは、U2 が来たことは明らかです。 U1 の QR コード (ミニプログラムコード) をスキャンすることで、U2 の SuperiorId フィールドの値は U1 の openid

になります。その後、U1 が招待した人の数をカウントする必要がある場合、次のようになります。データ内で、superiorId 値が U1 の openid と等しいユーザーの数をクエリします。

4. 2 つの主な実装方法

前述したように、この要求を実現するには大きく 2 つの方法があるため、これら 2 つの実装方法の特徴を分析してみましょう。開発プロセス中に適切な方法を選択できると便利です。

パス 1: ミニプログラムコード

WeChat では、ミニプログラムコードを動的に生成する 3 つの方法が提供されます。ここではクラウドについてのみ説明します。呼び出し方法は従来のサーバーで開発されており、ドキュメントに従って操作することができ、原理はほぼ同じです。

1、

A インターフェイス: wxacode.createQRCode

2、

C インターフェイス: wxacode.get

B インターフェイス: wxacode.getUnlimited

これら 3 つのインターフェイスを分析するためのテーブルを作成します。詳細については、ここをクリックしてください。タイトル公式文書への直接アクセス。

インターフェース生成量制限適時性キャリーパラメータの長さインターフェイス AAC インターフェイスの合計は最大 10W長期128 バイトインターフェイス CAC インターフェイスの合計は最大 10W長期128 バイトインターフェイス B 無制限 #表示可能な文字数 32 文字

#長期

ご覧のとおり、AC インターフェイスは実際には同じであり、実際の使用方法も似ていますが、パラメーターが異なります。

AC インターフェイスと B インターフェイスの違いは、生成数の制限と伝送されるパラメータの長さです。したがって、選択する際には、生成されるパラメータの数と伝送されるパラメータの長さの 2 つの条件を考慮する必要があります。

方法 2: 通常の QR コード

ミニプログラムコードの 3 つのインターフェイスを簡単に比較した後、見てみましょう。もう一度、この普通のQRコードの特徴を見てください。上記の 3 つのインターフェイスではビジネスニーズを満たせない場合、たとえばパラメーターが長く、生成されるアイテムの数が非常に多い場合は、この通常の QR コードを使用してそれを実現できます。

インターフェースと比較すると、この QR コードには生成されるパラメーターの数に制限がありません。パラメーター理論は非常に長くなる可能性があります (具体的な長さは試していませんが、128 より長いのは間違いありません)。制限時間も長期にわたる。この観点から見ると、どのようなビジネスシナリオであっても、この方法が正しい選択であるように思えます。

もちろんそうではありません。通常の QR コードでは、少なくともこれら 2 つの側面を考慮する必要があります。

1. オープンスコープ: 企業、メディア、政府、その他の組織向けの小規模なプログラム。 つまり、個人の開発者アカウントの使用はサポートされていません。

2. 開発は比較的複雑で、構成にはサーバーとドメイン名が必要です。落とし穴もたくさんあるでしょう。

このメソッドの実装は少し複雑なので、ここでは詳しく説明しませんが、この点でニーズがある友人は私にプライベートメッセージを送って、お互いにコミュニケーションを取り、学び合うことができます。

最後に注意すべき点は、どの方法で実装されても、ミニプログラムをスキャンして通常に使用するには、その前にリリースする必要があるということです。

5. AC インターフェースの実装コード例 (クラウド開発)

B インターフェースは AC インターフェースに似ており、コード例は公式 Web サイトに直接アクセスできます。平行線を引くことができるはずです。したがって、ここでは AC インターフェイスの 1 つだけを使用します。主なことは、いくつかの一般的な質問を提起することです。

1. 新しいクラウド関数を作成した後、config.json ファイルで権限を構成します (createQRCode を例にします)

ミニプログラムコードを動的に作成する方法の簡単な分析

## 2.index.js コード

const cloud = require(&#39;wx-server-sdk&#39;)
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event) => {
  try {
    const result = await cloud.openapi.wxacode.createQRCode({
      path: event.path,
      width: event.width
    })
    return result
  } catch (err) {
    return err
  }
}

3. 呼び出し (ローカルデバッグでない場合は、忘れずにクラウド関数を送信してください)

if (posterType == 1) {
		// 配置页面路径以及参数
        path = "pages/indexStudent1/indexStudent1?superiorId1=" +
         superiorId1 + "&superiorId2=" + superiorId2
      } 
      else if (posterType == 2) {
        path = "pages/teacherSubmit/teacherSubmit?superiorId="
         + superiorId2
      }
      // 调用云函数，请求生成小程序码 buffer 数据
      const QRCodeObj = await wx.cloud.callFunction({
        name: &#39;createQRCode&#39;,
        data: {
          path: path,
          width: 430
        }
      })
      // 需要注意的是返回来的数据是Buffer格式
      // 需要转换成为base64格式（为了方便存储复用，毕竟次数有限）
 	  const base64 = "data:image/jpeg;base64," + 
 	  wx.arrayBufferToBase64(QRCodeObj.result.buffer.data)
 	  // 将数据直接扔进image组件的src参数里面即可
 	  this.setData({
          imgUrl:  base64
        })

4.wxml

ミニプログラムコードを動的に作成する方法の簡単な分析