網頁與小程式間怎麼進行通訊？以下這篇文章為大家介紹一下網頁與小程式通訊的相關知識，希望對大家有幫助！
我們的微信小程式所採用的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綁定接收事件
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中文網其他相關文章！
