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

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

小程式提供的功能

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

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

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

簡單介紹如果使用，以分享為例，如果頁面A需要特別設(shè)定分享內(nèi)容，例如轉(zhuǎn)送標題、縮圖等?？梢栽倬W(wǎng)頁中設(shè)定好變數(shù)值，透過傳送給小程式

網(wǎng)頁

let shareData = {
  path: '轉(zhuǎn)發(fā)路徑',
  title: '自定義轉(zhuǎn)發(fā)標題',
  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

// 獲取從網(wǎng)頁發(fā)送來的消息
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,
  };
}

這樣一次客製化分享功能就完成了，但是postMessage方法只有特定場景可以取得訊息，所以如果非特定場景怎麼取得通訊呢？

一種簡單的獲取通信的方法

我提供的解決方案可能不是最優(yōu)的也不是最通用的，但是如果遇到了問題時可以作為一個備選方案。

1、場景還原

我們的小程式中有城市定位，第一次進入小程式需要選擇所在城市，選擇城市之後會快取到本地，之後再次進入小程式不再需要重選選擇城市。功能如下截圖

選擇城市之後會在首頁右上角展示

由於城市選擇頁面和首頁都是透過web-view內(nèi)嵌小程式的方式，所以顯然在H5頁面中進入緩存，在小程式中是無法取得到快取資訊的。

2、解決方案

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

網(wǎng)頁

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

小程式

#取得城市id之後透過wx.setStorageSync快取下來，以便後續(xù)使用。

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('登錄失?。?amp;#39; + res.errMsg);
    }
  },
});

總結(jié)

「溫故而知新,可以為師矣?！?/p>

有時候回過頭來看看某些知識點，也許就會有新的思路，與君共勉。ヾ(?°?°?)??

#一首小詩

看了一眼日期，發(fā)現(xiàn)12月，2021年最後一個月了，我之前寫了一首小詩，有點符合我現(xiàn)在的心境，也有一些祝福送給自己也送給大家。

眼前是一扇窗，
窗外是變換的景色，
夜晚，
墨綠的樹，
散落燈光的高樓大廈，
疾馳的汽車，
或匆忙或悠閑的行人。

我好像記住了每一座樓宇，
卻不記得每一張面孔，
不變的建筑，
變換的路人。
今年，
有一些變化，
每一顆追求人生的心，
都值得期待，
每一個不舍的眼神，
笑容也無法遮掩。

致，
所有開發(fā)的伙伴，
一期一祈，
勿懷猶也，
幸福美好。

【相關(guān)學習推薦：小程式開發(fā)教學】

以上是淺析網(wǎng)頁與小程式間怎麼進行通信的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！