Une brève analyse de la façon de communiquer entre les pages Web et les petits programmes

Comment communiquer entre pages web et mini programmes ? L'article suivant vous présentera les connaissances pertinentes sur la communication entre les pages Web et les petits programmes. J'espère qu'il vous sera utile !

Notre applet WeChat utilise la méthode d'affichage Web pour intégrer les projets H5, réduisant ainsi la quantité de développement. En utilisation réelle, nous rencontrerons les besoins fonctionnels des pages Web et de la communication des applets. Ci-dessous, je résume brièvement mes problèmes rencontrés. et des solutions.

Fonctions fournies par les mini-programmes

WeChat fournit une méthode permettant aux pages Web d'envoyer des messages aux mini-programmes : wx.miniProgram.postMessage. Cette méthode envoie des messages aux mini-programmes et sera traitée à des moments précis (retraite du mini-programme, destruction du composant, partage) déclenche l'événement message du composant.

Les détails spécifiques de l'API peuvent être consultés WeChat Open Document

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

Une brève introduction sur la façon d'utiliser et partagez-le comme par exemple, si la page A doit configurer un contenu de partage spécial, tel que le titre de transfert, la vignette, etc. Vous pouvez définir la valeur de la variable dans la page Web et l'envoyer à l'applet

page Web

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

applet

index.wxml

message de liaison pour recevoir l'événement

<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,
  };
}

Ceci time La fonction de partage personnalisée est terminée, mais la méthode postMessage ne peut obtenir des messages que dans des scénarios spécifiques, alors comment obtenir la communication s'il ne s'agit pas d'un scénario spécifique ?

Un moyen simple d'entrer en communication

La solution que je propose n'est peut-être pas la meilleure ou la plus universelle, mais elle peut être utilisée comme alternative si vous rencontrez un problème.

1. Restauration de scène

Notre mini programme a un positionnement de ville Vous devez sélectionner la ville lorsque vous entrez dans le mini programme pour la première fois. Après avoir sélectionné la ville, elle sera mise en cache localement. Vous n'aurez plus besoin de resélectionner lorsque vous entrez à nouveau dans le mini-programme. Sélectionnez une ville. La fonction est la suivante capture d'écran

Après avoir sélectionné la ville, elle sera affichée dans le coin supérieur droit de la page d'accueil

Étant donné que la page de sélection de la ville et la page d'accueil sont toutes deux intégrées à de petits programmes via le Web. vue, il est évidemment mis en cache dans la page H5. Les informations de cache ne peuvent pas être obtenues dans les mini-programmes.

2. Solution

La solution est très simple Après avoir communiqué avec mon partenaire back-end, je lui ai demandé de me fournir une interface pour associer l'identifiant de la ville aux informations de l'utilisateur, afin que je puisse. apporter de petites modifications à l'utilisateur. Pendant le programme, l'identifiant de la ville sélectionné par l'utilisateur la dernière fois est obtenu, puis mis en cache dans le mini programme, de sorte que l'utilisateur n'a pas besoin de sélectionner à nouveau la ville lorsqu'il entre à nouveau dans le mini programme

page Web

// 保存城市信息
const saveCityHandle = () => {
  saveCity({
    cityId: cityId,
    userId: userId,
  }).then(() => {});
};

mini programme

après avoir obtenu l'identifiant de la ville, mettez-le en cache via wx.setStorageSync pour une utilisation ultérieure.

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);
    }
  },
});

Résumé

"Vous pouvez devenir enseignant en révisant le passé et en apprenant le nouveau."

Parfois, lorsque vous revenez sur certains points de connaissance, vous pouvez avoir de nouvelles idées et les partager avec vous.ヾ(◍°∇°◍)ﾉﾞ

Un petit poème

J'ai regardé la date et j'ai découvert que décembre est le dernier mois de 2021. J'ai déjà écrit un petit poème, qui me correspond un peu maintenant Dans mon humeur, j'ai aussi des bénédictions pour moi et pour tout le monde.

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

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

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

【Recommandations d'apprentissage associées : Tutoriel de développement de mini-programmes】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!