WeChatアプレットでQRコードを識別するために長押しする実装プロセス

WeChatアプレットでQRコードを識別するために長押しする実装プロセス

序文

公式アカウントのQRコードは長押しで認識できることは皆さんご存じですが、ミニプログラムに対する制限は比較的厳しく、QRコードの長押し認識を実現する方法はありません。私はずっとそう信じてきましたが、これはWeChatの公式ルールにも書かれています。今朝まで、ミニプログラムのQRコードは実際に長押しで認識できることを偶然発見したので、興味を持って調べたところ、ミニプログラムでQRコードを長押しして認識することは本当に可能であることがわかりました。公式の抜け穴なのか、プログラムのバグなのかは分かりませんが、この機能が実現できるのですから、当然喜んで使うしかありません。

いつものように、まずはレンダリングを見てみましょう

ご覧のとおり、ミニプログラムで長押しして QR コードを認識する機能を実装できました。それを達成する方法を段階的に教えていきましょう。公式仕様ではこの機能がサポートされていることがまだ明確に記載されていないため、この機能はいつでも無効になる可能性があります。まずはここで楽しんでもらい、できるだけ長く楽しんでもらいます。

まず、WebViewを使用して公式アカウントの記事を表示します

公式アカウントの記事には長押しして QR コードを識別する機能があることがわかっているので、まずミニプログラムで長押しして QR コードを識別し、次にミニプログラムで公式アカウントの記事を表示する必要があります。ミニプログラムで公式アカウントの記事を表示するにはどうすればよいでしょうか。ここでは、Webview を使用する必要があります。 Webview の使い方は非常に簡単です。以下の手順に従ってください。

src は、弊社公式アカウントの記事に対応するリンクです。このように記述するだけでコード部分が完成し、残りは設定作業のみです。

次に、ミニプログラムを公式アカウントにリンクする必要があります

公開アカウントの記事へのリンクを見つけてWebビューに配置すると、次のような問題が発生します。

次に、公式アカウントのバックグラウンドでミニプログラムをリンクする必要があります。

ここではミニプログラムの appid がどこにあるかは説明しません。ミニプログラムを学習したことがあるなら、appid がどこで取得できるかは間違いなくわかっているはずです。

3.設定後、長押しして直接識別することができます

上記の関連付けの後、数分間の遅延が発生するため、開発者ツールを閉じてから再度開くことをお勧めします。

ミニプログラムのウェブビューに公式アカウントの記事が正常に表示されていることがわかります。次に、次のように携帯電話でプレビューします。

これは末尾に QR コードが付いた標準的な公開アカウント記事であることがわかります。では、このQRコードを長押しすることで認識できるのでしょうか?

長押ししてQRコードを認識できたことがわかります。

この時点で、ミニプログラムで長押しして QR コードを認識できるように実装できました。 。 。

できるだけ早く試してみる必要があります。 WeChat の担当者がこの機能を明確に開発していないため、100% の成功を保証することはできません。しかし、ミニプログラムをモーメントに共有できるようになったことで、ミニプログラム内のQRコードを長押しして識別することが禁止されることはなくなると思いますので、この機会にこの機能を試してみてください。

要約する

WeChatミニプログラムで長押ししてQRコードを識別する方法についての記事はこれで終わりです。WeChatミニプログラムで長押ししてQRコードを識別する方法に関するより関連性の高い内容については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後も123WORDPRESS.COMを応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットWebViewを使用して長押しでQRコードを認識する方法の例
  • WeChatアプレットは画像をクリックすると、長押しプレビュー、保存、パラメータ付きQRコードの識別、転送などの機能を実現します。

<<:  CentOS7でFTPサーバーを設定する方法

>>:  MySQL 起動時に「サーバーは PID ファイルを更新せずに終了しました」というエラーが報告される理由の詳細な分析

推薦する

JS での矢印関数と this の記述と理解

目次序文1. JSで関数を書く方法1. 通常の関数の書き方2. 矢印関数の書き方2. 通常の関数でこ...

Docker ベースの MySQL マスタースレーブレプリケーション環境を構築するための実装手順

1. はじめに以前のプログラム アーキテクチャは次の形式になります。プログラムのサイズが大きくなると...

5つのCSSスクロール天井実装方法の比較(パフォーマンス向上版)

改訂版のプレビューこの記事は 3 日前に書かれたものです。先輩の同僚から改訂の提案をいくつかいただき...

Linux システムでの CPU 使用率が高い場合のトラブルシューティングのアイデアと解決策

序文Linux 運用保守エンジニアとして、日々の業務の中で Linux サーバーの CPU 負荷が ...

Linux システムでの nginx サーバーのインストールと負荷分散構成の詳細な説明

nginx (エンジン x) は、高性能な HTTP およびリバース プロキシ サーバー、メール プ...

MySQL データベースの文字化け問題の原因と解決策

序文データベースのデータを表示すると、文字化けした文字が表示されることがあります。実際、どのようなデ...

CSS を使用して画像の下の空白を数ピクセル消去する方法の詳細な説明

最近、友人が私に質問をしました。ページをレイアウトすると、画像の下に 1 ~ 2 ピクセルの空白があ...

入力できない無効な値はアクションレイヤーに渡すことができません

フォームを入力不可にしたい場合は、フォームを次のように設定します。コードをコピーコードは次のとおりで...

JavaScript で Priority Queue を実装する

目次1. 優先キューの紹介2. 優先キューのカプセル化1. 優先キューの紹介通常のキューに要素が挿入...

MySQLのビューの詳細な説明

ビュー: MySQL のビューはテーブルと多くの類似点があります。ビューも複数のフィールドと複数のレ...

パーソナライズされた検索エンジンを使用して、必要なパーソナライズされた情報を検索します

現在、多くの人がインターネット上で生活しており、インターネットで情報を検索することは日常的な作業とな...

crontab 実行時間とシステム時間の不一致の解決方法

序文LINUX では、定期的なタスクは通常、cron デーモン プロセス [ps -ef | gre...

antd ツリーと親子コンポーネント間の値転送問題について (React のまとめ)

プロジェクト要件: 製品ツリー ノードをクリックすると、そのノードのすべての親ノードが取得され、表に...

HTML でカスタム画像を使用してチェックボックスを表示する方法

チェックボックスの使用を実装するために画像を使用する必要がある場合は、それを使用して実装できます。実...