Web ページとミニプログラム間で通信するにはどうすればよいですか?次の記事では、Web ページと小さなプログラム間の通信に関する関連知識(shí)を紹介します。
WeChat ミニ プログラムは、Web ビュー方式を使用して H5 プロジェクトを埋め込み、開(kāi)発量を削減します。実際の使用では、Web ページ間の通信のみが行われます。機(jī)能のニーズについて、以下に私が遭遇した問(wèn)題とその解決策を簡(jiǎn)単にまとめます。
ミニ プログラムによって提供される機(jī)能
WeChat は、Web ページからミニ プログラムにメッセージを送信するためのメソッド wx.miniProgram.postMessage を提供します。このメソッドは、ミニ プログラムにメッセージを送信します。特定の時(shí)間にコンポーネントのメッセージ イベントをトリガーします (ミニ プログラムの退避、コンポーネントの破棄、共有)。
特定の API の詳細(xì)は表示できます WeChat オープン ドキュメント
https://developers.weixin.qq.com/miniprogram/dev/component/web- view .html
共有を例に、ページAにタイトルやサムネイルの転送など、特別な共有コンテンツを設(shè)定する必要がある場(chǎng)合の使い方を簡(jiǎn)単にご紹介します。 Web ページで変數(shù)値を設(shè)定し、それをアプレットに送信できます
webpage
let shareData = {
path: '轉(zhuǎn)發(fā)路徑',
title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
imageUrl: '縮略圖url',
};
wx.miniProgram.postMessage({ data: JSON.stringify(shareData) });小プログラム
Index.wxml
bindmessage bindingでイベントを受信
<web-view bindmessage='getMessage' src='{{ src }}'></web-view>index.js
// 獲取從網(wǎng)頁(yè)發(fā)送來(lái)的消息
getMessage(e) {
const getMessage (e) {
// data是多次postMessage的參數(shù)組成的數(shù)組
const { data } = e.detail;
// 需要取最后一條數(shù)據(jù)
let shareMessage = data[data.length - 1];
this.shareMessage = JSON.parse(shareMessage);
};
// 設(shè)置分享
onShareAppMessage(options) {
return {
title: this.shareMessage.title,
path: this.shareMessage.path,
imageUrl: this.shareMessage.imageUrl,
};
}これでカスタマイズされた共有機(jī)能は完成しますが、postMessageメソッドはメッセージの取得しかできません。では、特定のシナリオではない場(chǎng)合、どのように通信を取得するのでしょうか?
コミュニケーションを取るための簡(jiǎn)単な方法
私が提供するソリューションは最適または最も普遍的なものではないかもしれませんが、問(wèn)題が発生した場(chǎng)合の解決策として使用できます。問(wèn)題です。代替案です。
1. シーンの復(fù)元
私たちのミニ プログラムには都市の位置情報(bào)が含まれています。初めてミニ プログラムに入るときは、現(xiàn)在地の都市を選択し、都市を選択します。都市はローカルにキャッシュされるため、ミニ プログラムに再度入るときに都市を再選択する必要はありません。機(jī)能は次のスクリーンショットです。
単な分析 "163884158125251Web ページと小さなプログラム間の通信方法の簡(jiǎn)単な分析")
単な分析 "163884158736334Web ページと小さなプログラム間の通信方法の簡(jiǎn)単な分析")
2. 解決策
解決策は非常に簡(jiǎn)単で、バックエンド パートナーとコミュニケーションをとった後、私は彼に、都市 ID はユーザー情報(bào)に関連付けられているため、ユーザーがミニ プログラムに入ったときにユーザーが最後に選択した都市 ID を取得し、それをミニ プログラムにキャッシュできるため、ユーザーはミニ プログラムに再度入るときに都市を再度選択しますWebpage
// 保存城市信息
const saveCityHandle = () => {
saveCity({
cityId: cityId,
userId: userId,
}).then(() => {});
};小プログラム
都市 ID を取得した後、後で使用できるように、wx.setStorageSync を通じてキャッシュします。wx.login({
success(res) {
if (res.code) {
wx.request({
url: `${that.domain()}/getUserInfo`,
data: {
body: { jsCode: res.code },
},
success(res) {
wx.setStorageSync('cityId', res.data.cityId);
},
});
} else {
console.log('登錄失敗！' + res.errMsg);
}
},
});まとめ
「過(guò)去を振り返り、新しいことを?qū)Wぶことで教師になれる。」私は時(shí)々、特定の知識(shí)ポイントを振り返ることがあります。 . もしかしたら、あなたを勇気づける新しいアイデアがあるかもしれません。ヾ(?°?°?)??ちょっとした詩(shī)
日付を見(jiàn)たら、12月が2021年の最後の月だった。今の私の心境に少し沿った短い詩(shī)を書(shū)きましたが、私自身と皆さんにとっても祝福の言葉です。眼前是一扇窗， 窗外是變換的景色， 夜晚， 墨綠的樹(shù)， 散落燈光的高樓大廈， 疾馳的汽車， 或匆忙或悠閑的行人。 我好像記住了每一座樓宇， 卻不記得每一張面孔， 不變的建筑， 變換的路人。 今年， 有一些變化， 每一顆追求人生的心， 都值得期待， 每一個(gè)不舍的眼神， 笑容也無(wú)法遮掩。 致， 所有開(kāi)發(fā)的伙伴， 一期一祈， 勿懷猶也， 幸福美好。【関連する學(xué)習(xí)の推奨事項(xiàng):
小さなプログラム開(kāi)発チュートリアル】
以上がWeb ページと小さなプログラム間の通信方法の簡(jiǎn)単な分析の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫(huà)像を無(wú)料で
Undresser.AI Undress
リアルなヌード寫(xiě)真を作成する AI 搭載アプリ
AI Clothes Remover
寫(xiě)真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無(wú)料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡(jiǎn)単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無(wú)料のコードエディター
SublimeText3 中國(guó)語(yǔ)版
中國(guó)語(yǔ)版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開(kāi)発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開(kāi)発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
EdgeブラウザのショートカットとしてWebページをデスクトップに送信するにはどうすればよいですか?
Mar 14, 2024 pm 05:22 PM
Edge ブラウザのショートカットとして Web ページをデスクトップに送信するにはどうすればよいですか?多くのユーザーは、アクセスページを直接開(kāi)くことができるように、頻繁に使用する Web ページをデスクトップにショートカットとして表示したいと考えていますが、その方法がわかりません。この問(wèn)題に応えて、この號(hào)の編集者は大多數(shù)のユーザーが解決策を考えているので、今日のソフトウェア チュートリアルで共有されているコンテンツを見(jiàn)てみましょう。 Edge ブラウザで Web ページをデスクトップに送信するショートカット方法: 1. ソフトウェアを開(kāi)き、ページ上の「...」ボタンをクリックします。 2. ドロップダウン メニュー オプションから [アプリケーション] で [このサイトをアプリケーションとしてインストールする] を選択します。 3. 最後に、ポップアップウィンドウでそれをクリックします
新世代の光ファイバーブロードバンドテクノロジー - 50G PON
Apr 20, 2024 pm 09:22 PM
前回の記事 (リンク) では、Xiao Zaojun が ISDN、xDSL、10GPON に至るブロードバンド技術(shù)の発展の歴史を紹介しました。今日は、今後の新世代の光ファイバーブロードバンド技術(shù)、50GPON についてお話しましょう。 █F5G と F5G-A 50GPON を紹介する前に、F5G と F5G-A について話しましょう。 2020年2月、ETSI（歐州電気通信標(biāo)準(zhǔn)化協(xié)會(huì)）は、10GPON+FTTR、Wi-Fi6、200G光伝送/アグリゲーション、OXCなどの技術(shù)をベースとした固定通信ネットワーク技術(shù)體系を推進(jìn)し、それを第5世代、すなわちF5Gと名付けました。固定ネットワーク通信技術(shù) (第 5 世代固定ネットワーク)。 F5Gは固定ネットワークです
WebページでPHPを開(kāi)く方法
Mar 22, 2024 pm 03:20 PM
Web ページで PHP コードを?qū)g行するには、Web サーバーが PHP をサポートし、適切に構(gòu)成されていることを確認(rèn)する必要があります。 PHP は 3 つの方法で開(kāi)くことができます。 * **サーバー環(huán)境:** PHP ファイルをサーバーのルート ディレクトリに配置し、ブラウザを通じてアクセスします。 * **統(tǒng)合開(kāi)発環(huán)境: **PHP ファイルを指定した Web ルート ディレクトリに配置し、ブラウザを通じてアクセスします。 * **リモート サーバー:** サーバーによって提供される URL アドレスを介して、リモート サーバー上でホストされている PHP ファイルにアクセスします。
Web ページ上の畫(huà)像を読み込めない場(chǎng)合はどうすればよいですか? 6つのソリューション
Mar 15, 2024 am 10:30 AM
一部のネチズンは、ブラウザの Web ページを開(kāi)いたときに、Web ページ上の畫(huà)像が長(zhǎng)時(shí)間読み込めないことに気づきました。何が起こったのでしょうか?ネットワークは正常であることを確認(rèn)しましたが、どこに問(wèn)題があるのでしょうか?以下のエディタでは、Web ページの畫(huà)像が読み込めない問(wèn)題に対する 6 つの解決策を紹介します。 Web ページの畫(huà)像を読み込めない: 1. インターネット速度の問(wèn)題 Web ページに畫(huà)像が表示されません。これは、コンピュータのインターネット速度が比較的遅く、コンピュータ上で開(kāi)いているソフトウェアが多いためと考えられます。また、アクセスする畫(huà)像が比較的大きいため、読み込みタイムアウトが原因である可能性があります。その結(jié)果、畫(huà)像が表示されません。ネットワーク速度をより多く消費(fèi)するソフトウェアをオフにすることができます。タスク マネージャーに移動(dòng)して確認(rèn)できます。 2. 訪問(wèn)者が多すぎる Web ページに寫(xiě)真が表示されない場(chǎng)合は、訪問(wèn)した Web ページが同時(shí)に訪問(wèn)されたことが原因である可能性があります。
ネットワーク接続は正常であるにもかかわらず、ブラウザが Web ページにアクセスできない場(chǎng)合の考えられる理由
Feb 19, 2024 pm 03:45 PM
ブラウザは Web ページを開(kāi)けませんが、ネットワークは正常です。多くの理由が考えられます。この問(wèn)題が発生した場(chǎng)合は、段階的に調(diào)査して具體的な原因を特定し、問(wèn)題を解決する必要があります。まず、Web ページを開(kāi)けないのは特定のブラウザに限定されているのか、それともすべてのブラウザで Web ページを開(kāi)けないのかを判斷します。 1 つのブラウザだけで Web ページを開(kāi)けない場(chǎng)合は、テストのために Google Chrome、Firefox などの他のブラウザを使用してみることができます。他のブラウザでページを正しく開(kāi)くことができる場(chǎng)合、問(wèn)題はその特定のブラウザにある可能性があります。
ワイヤレスマウスの開(kāi)発経緯
Jun 12, 2024 pm 08:52 PM
原題：「ワイヤレスマウスはどのようにしてワイヤレスになるのか？」 》ワイヤレスマウスは今日のオフィスコンピュータの標(biāo)準(zhǔn)機(jī)能となり、今後は長(zhǎng)いコードを引きずる必要はなくなります。しかし、ワイヤレスマウスはどのように機(jī)能するのでしょうか?今日は、No.1 ワイヤレス マウスの開(kāi)発の歴史について學(xué)びます。ワイヤレス マウスは 1984 年に世界初のワイヤレス マウスを開(kāi)発しましたが、このワイヤレス マウスは信號(hào)として赤外線を使用していたことをご存知ですか?キャリアは下の寫(xiě)真のようになると言われていますが、後にパフォーマンス上の理由で失敗しました。ロジクールがついに 27MHz で動(dòng)作するワイヤレス マウスの開(kāi)発に成功したのは、10 年後の 1994 年でした。この 27MHz の周波數(shù)も、長(zhǎng)い間ワイヤレス マウスとして使用されてきました。
Webページが開(kāi)けない場(chǎng)合の対処法
Feb 21, 2024 am 10:24 AM
Web ページが開(kāi)かない問(wèn)題を解決する方法 インターネットの急速な発展に伴い、人々は情報(bào)を取得し、通信し、娯楽するためにますますインターネットに依存するようになりました。しかし、時(shí)々Webページが開(kāi)けないという問(wèn)題に遭遇し、多くのトラブルを引き起こします。この記事では、Web ページが開(kāi)かない問(wèn)題を解決するための一般的な方法をいくつか紹介します。まず、Web ページを開(kāi)けない理由を特定する必要があります?？激à椁欷朐颏摔稀ⅴ庭氓去铹`クの問(wèn)題、サーバーの問(wèn)題、ブラウザの設(shè)定の問(wèn)題などが含まれます。以下にいくつかの解決策を示します: ネットワーク接続を確認(rèn)します: まず、
PHP でソケット通信を?qū)g裝するための方法とテクニック
Mar 07, 2024 pm 02:06 PM
PHP は、さまざまな Web アプリケーションの開(kāi)発に使用できる一般的に使用される開(kāi)発言語(yǔ)です。一般的な HTTP リクエストとレスポンスに加えて、PHP はソケットを介したネットワーク通信もサポートし、より柔軟で効率的なデータ対話を?qū)g現(xiàn)します。この記事では、PHPでソケット通信を?qū)g裝する方法とテクニックを、具體的なコード例を交えて紹介します。ソケット通信とは ソケットは、異なるコンピュータ間でデータを転送できるネットワーク內(nèi)の通信方法です。 by S
