web網頁與小程序間如何進行通信

本篇內容介紹了“web網頁與小程序間如何進行通信”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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

小程序提供的功能

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

簡單介紹一下如果使用，以分享為例，如果頁面A需要特別設置分享內容，比如轉發標題、縮略圖等。可以再網頁中設置好變量值，通過發送給小程序

網頁

let shareData = {
  path: '轉發路徑',
  title: '自定義轉發標題',
  imageUrl: '縮略圖url',
};
wx.miniProgram.postMessage({ data: JSON.stringify(shareData) });

小程序

index.wxml

通過bindmessage綁定接收事件

<web-view bindmessage='getMessage' src='{{ src }}'></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年最后一個月了，我之前寫過了一首小詩，有點符合我現在的心境，也有一些祝福送給自己也送給大家。

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

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

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

“web網頁與小程序間如何進行通信”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！