Web ページと小さなプログラム間の通信方法の簡単な分析

Web ページとミニプログラム間で通信するにはどうすればよいですか?次の記事では、Web ページと小さなプログラム間の通信に関する関連知識を紹介します。

WeChat ミニ プログラムは、Web ビュー方式を使用して H5 プロジェクトを埋め込み、開発量を削減します。実際の使用では、Web ページ間の通信のみが行われます。機能のニーズについて、以下に私が遭遇した問題とその解決策を簡単にまとめます。

ミニ プログラムによって提供される機能

WeChat は、Web ページからミニ プログラムにメッセージを送信するためのメソッド wx.miniProgram.postMessage を提供します。このメソッドは、ミニ プログラムにメッセージを送信します。特定の時間にコンポーネントのメッセージ イベントをトリガーします (ミニ プログラムの退避、コンポーネントの破棄、共有)。

特定の API の詳細は表示できます WeChat オープン ドキュメント

https://developers.weixin.qq.com/miniprogram/dev/component/web- view .html

共有を例に、ページAにタイトルやサムネイルの転送など、特別な共有コンテンツを設定する必要がある場合の使い方を簡単にご紹介します。 Web ページで変数値を設定し、それをアプレットに送信できます

webpage

let shareData = {
  path: '转发路径',
  title: '自定义转发标题',
  imageUrl: '缩略图url',
};
wx.miniProgram.postMessage({ data: JSON.stringify(shareData) });

小プログラム

Index.wxml

bindmessage bindingでイベントを受信

<web-view bindmessage=&#39;getMessage&#39; src=&#39;{{ src }}&#39;></web-view>

index.js

// 获取从网页发送来的消息
getMessage(e) {
  const getMessage (e) {
  // data是多次postMessage的参数组成的数组
  const { data } = e.detail;
  // 需要取最后一条数据
  let shareMessage = data[data.length - 1];
  this.shareMessage = JSON.parse(shareMessage);
};

// 设置分享
onShareAppMessage(options) {
  return {
    title: this.shareMessage.title,
    path:  this.shareMessage.path,
    imageUrl: this.shareMessage.imageUrl,
  };
}

これでカスタマイズされた共有機能は完成しますが、postMessageメソッドはメッセージの取得しかできません。では、特定のシナリオではない場合、どのように通信を取得するのでしょうか?

コミュニケーションを取るための簡単な方法

私が提供するソリューションは最適または最も普遍的なものではないかもしれませんが、問題が発生した場合の解決策として使用できます。問題です。代替案です。

1. シーンの復元

私たちのミニ プログラムには都市の位置情報が含まれています。初めてミニ プログラムに入るときは、現在地の都市を選択し、都市を選択します。都市はローカルにキャッシュされるため、ミニ プログラムに再度入るときに都市を再選択する必要はありません。機能は次のスクリーンショットです。

#都市を選択すると、ホームページの右上隅に表示されます

都市選択ページとホームページはどちらもWebビューにミニプログラムを埋め込んでいるので、H5ページにキャッシュが入っているとミニプログラムではキャッシュ情報が取得できないことがわかります。

2. 解決策

解決策は非常に簡単で、バックエンド パートナーとコミュニケーションをとった後、私は彼に、都市 ID はユーザー情報に関連付けられているため、ユーザーがミニ プログラムに入ったときにユーザーが最後に選択した都市 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);
    }
  },
});

まとめ

「過去を振り返り、新しいことを学ぶことで教師になれる。」

私は時々、特定の知識ポイントを振り返ることがあります。 . もしかしたら、あなたを勇気づける新しいアイデアがあるかもしれません。ヾ(◍°∇°◍)ﾉﾞ

ちょっとした詩

日付を見たら、12月が2021年の最後の月だった。今の私の心境に少し沿った短い詩を書きましたが、私自身と皆さんにとっても祝福の言葉です。

眼前是一扇窗，
窗外是变换的景色，
夜晚，
墨绿的树，
散落灯光的高楼大厦，
疾驰的汽车，
或匆忙或悠闲的行人。

我好像记住了每一座楼宇，
却不记得每一张面孔，
不变的建筑，
变换的路人。
今年，
有一些变化，
每一颗追求人生的心，
都值得期待，
每一个不舍的眼神，
笑容也无法遮掩。

致，
所有开发的伙伴，
一期一祈，
勿怀犹也，
幸福美好。

【関連する学習の推奨事項:

小さなプログラム開発チュートリアル】

以上がWeb ページと小さなプログラム間の通信方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。