淺析網頁與小程式間怎麼進行通信

網頁與小程式間怎麼進行通訊？以下這篇文章為大家介紹一下網頁與小程式通訊的相關知識，希望對大家有幫助！

我們的微信小程式所採用的web-view的方式內嵌H5項目，從而減少開發量，在實際只用中會遇到網頁與小程式通信的功能需要，以下我簡單總結了我遇到的問題以及解決方案。

小程式提供的功能

微信提供了網頁向小程式發送訊息的方法：wx.miniProgram.postMessage，該方法向小程式發送訊息，會在特定時機（小程式後退、元件銷毀、分享）觸發元件的message事件。

具體API詳情可以查看 微信開放文件

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

簡單介紹如果使用，以分享為例，如果頁面A需要特別設定分享內容，例如轉送標題、縮圖等。可以再網頁中設定好變數值，透過傳送給小程式

網頁

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

小程式

index. wxml

透過bindmessage綁定接收事件

<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-view內嵌小程式的方式，所以顯然在H5頁面中進入緩存，在小程式中是無法取得到快取資訊的。

2、解決方案

解決方案很簡單，我跟後端的同伴溝通後，拜託他提供給我一個接口，把城市id和用戶資訊關聯起來，這樣我就可以再用戶進行小程式的時候獲取用戶上次選擇的城市id，進而再小程式裡面緩存處理，這樣用戶再次進入小程式的時候無需再次選擇城市

網頁

// 保存城市信息
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年最後一個月了，我之前寫了一首小詩，有點符合我現在的心境，也有一些祝福送給自己也送給大家。

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

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

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

【相關學習推薦：小程式開發教學】

以上是淺析網頁與小程式間怎麼進行通信的詳細內容。更多資訊請關注PHP中文網其他相關文章！