Yuan Chuang 論文募集|WeChat アプレットの QR コードをスキャンしてアプレット内の指定されたページにジャンプし、ターゲット ページにパラメータを渡すにはどうすればよいですか?

プロジェクトのシナリオ:

実際のプロジェクトでは、ユーザーは印刷されたレシートの QR コードをスキャンすることで請求書発行機能を実現し、レシートの QR コードをスキャンした後、アプレットにジャンプして請求情報を追加し、送信する必要があります。請求書を発行するバックエンドのページ。


ソリューション

まず、QRコードの本質はリンクアドレスです。

次に、WeChat ミニ プログラム オープン プラットフォームにログインし、共通リンクの QR コードをスキャンしてミニ プログラムを開くように設定します。

最後に、ビジネス コードは QR コード リンクのパラメータを処理し、ターゲット ページは QR コード リンク アドレスのパラメータを受け取ります。


実際の操作:

1. WeChat オープン プラットフォームにログインし、[開発管理] > [開発設定] を見つけて、共通リンクの QR コードをスキャンしてミニ プログラムを開きます。

 

以下に示すように、プルダウンして設定エントリを見つけます。

 

 

 要件に応じて設定でき、わからない人にはプロンプトとガイダンスが表示されます。

QR コード アドレス: カスタム リンク アドレスですが、ドメイン名は検査ファイルに合格する必要があります。

ミニ プログラム パス: リンクによってリダイレクトされるターゲット ページのパス。

テスト範囲: 自分のニーズに応じて選択できます。オンライン版はオンライン版である必要があります。

 

ここで、パラメータを渡す方法を尋ねるかもしれません。QR コードのパスを区別するためのプレフィックスが必要なだけです。下の図に私のテスト リンク アドレスが表示されます。get リクエストに従ってパラメータを渡します。

 2. ターゲット ページはパラメータを受け取ります。ここでのターゲット ページは、pages/index/add です。

まずQRコードの元のリンクアドレスqrUrlを取得します。

ここでは、ページの onLoad メソッドでそれを取得します。

onLoad: function(e) {
	// e={"q":"https://sp.tbzh.com/index?orderId=1&sfJyToken=false"};
    //Common.isExist() 方法是我自己内部判断非空的
	if(e.q&&Common.isExist(e.q)&&e.q!="undefined"){//扫码进入
		const qrUrl = decodeURIComponent(e.q) // 获取到二维码原始链接内容
        //GetWxMiniProgramUrlParam() 这个方法是解析链接地址中的参数方法
		e = GetWxMiniProgramUrlParam(qrUrl);//此处就是我们要获取的参数 json
        //比如我要得到orderId的值,直接取值即可
        let orderId = e.orderId;
        console.log("订单ID:"+orderId);
	}
}

リンクアドレスパラメータの解析方法

GetWxMiniProgramUrlParam メソッドのコードは次のとおりです。

function GetWxMiniProgramUrlParam (url) {
  let theRequest = {};
  if(url.indexOf("#") != -1){
	  const str=url.split("#")[1];
	  const strs=str.split("&");
	  for (let i = 0; i < strs.length; i++) {
	  	theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
	  }
  }else if(url.indexOf("?") != -1){
	  const str=url.split("?")[1];
	  const strs=str.split("&");
	  for (let i = 0; i < strs.length; i++) {
	  	theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
	  }
  }
  return theRequest;
}

3. この時点で、WeChat アプレット全体の共通リンクの QR コードをスキャンしてアプレット内のページを開くロジックが実現されました。

最後に書かれています: コードワードは簡単ではありませんが、少しでもお役に立てれば、気に入って収集していただければ幸いです。質問や修正がある場合は、コメント欄にメッセージを残してください~~~

おすすめ

転載: blog.csdn.net/weixin_36754290/article/details/126581902