網(wǎng)頁(yè)與小程序間怎么進(jìn)行通信？下面本篇文章給大家介紹一下關(guān)于網(wǎng)頁(yè)與小程序通信的相關(guān)知識(shí)，希望對(duì)大家有所幫助！
我們的微信小程序采用的web-view的方式內(nèi)嵌H5項(xiàng)目，從而減少開(kāi)發(fā)量，在實(shí)際只用中會(huì)遇到網(wǎng)頁(yè)與小程序通信的功能需要，下面我簡(jiǎn)單總結(jié)了我遇到的問(wèn)題以及解決方案。
小程序提供的功能
微信提供了網(wǎng)頁(yè)向小程序發(fā)送消息的方法：wx.miniProgram.postMessage，該方法向小程序發(fā)送消息，會(huì)在特定時(shí)機(jī)（小程序后退、組件銷毀、分享）觸發(fā)組件的message事件。
具體API詳情可以查看?微信開(kāi)放文檔
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html
簡(jiǎn)單介紹一下如果使用，以分享為例，如果頁(yè)面A需要特別設(shè)置分享內(nèi)容，比如轉(zhuǎn)發(fā)標(biāo)題、縮略圖等?？梢栽倬W(wǎng)頁(yè)中設(shè)置好變量值，通過(guò)發(fā)送給小程序
網(wǎng)頁(yè)
let shareData = {
path: '轉(zhuǎn)發(fā)路徑',
title: '自定義轉(zhuǎn)發(fā)標(biāo)題',
imageUrl: '縮略圖url',
};
wx.miniProgram.postMessage({ data: JSON.stringify(shareData) });小程序
index.wxml
通過(guò)bindmessage綁定接收事件
<web-view bindmessage='getMessage' src='{{ src }}'></web-view>index.js
// 獲取從網(wǎng)頁(yè)發(fā)送來(lái)的消息
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方法只有特定場(chǎng)景可以獲取消息，所以如果非特定場(chǎng)景怎么獲取通信呢？
一種簡(jiǎn)單的獲取通信的方法
我提供的解決方案可能不是最優(yōu)的也不是最通用的，但是如果遇到了問(wèn)題時(shí)可以作為一個(gè)備選方案。
1、場(chǎng)景還原
我們的小程序中有城市定位，第一次進(jìn)入小程序需要選擇所在城市，選擇城市之后會(huì)緩存到本地，之后再次進(jìn)入小程序不再需要重選選擇城市。功能如下截圖
選擇城市之后會(huì)在首頁(yè)右上角展示
由于城市選擇頁(yè)面和首頁(yè)都是通過(guò)web-view內(nèi)嵌小程序的方式，所以顯然在H5頁(yè)面中進(jìn)入緩存，在小程序中是無(wú)法獲取到緩存信息的。
2、解決方案
解決方案很簡(jiǎn)單，我跟后端的同伴溝通后，拜托他提供給我一個(gè)接口，把城市id和用戶信息關(guān)聯(lián)起來(lái)，這樣我就可以再用戶進(jìn)行小程序的時(shí)候獲取用戶上次選擇的城市id，進(jìn)而再小程序里面緩存處理，這樣用戶再次進(jìn)入小程序的時(shí)候無(wú)需再次選擇城市
網(wǎng)頁(yè)
// 保存城市信息
const saveCityHandle = () => {
saveCity({
cityId: cityId,
userId: userId,
}).then(() => {});
};小程序
獲取城市id之后通過(guò)wx.setStorageSync緩存下來(lái)，以便后續(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('登錄失敗！' + res.errMsg);
}
},
});總結(jié)
“溫故而知新,可以為師矣?！?/p>
有時(shí)候回過(guò)頭來(lái)看看某些知識(shí)點(diǎn)，也許就會(huì)有新的思路，與君共勉。ヾ(?°?°?)??
一首小詩(shī)
看了一眼日期，發(fā)現(xiàn)12月，2021年最后一個(gè)月了，我之前寫(xiě)過(guò)了一首小詩(shī)，有點(diǎn)符合我現(xiàn)在的心境，也有一些祝福送給自己也送給大家。
眼前是一扇窗， 窗外是變換的景色， 夜晚， 墨綠的樹(shù)， 散落燈光的高樓大廈， 疾馳的汽車， 或匆忙或悠閑的行人。 我好像記住了每一座樓宇， 卻不記得每一張面孔， 不變的建筑， 變換的路人。 今年， 有一些變化， 每一顆追求人生的心， 都值得期待， 每一個(gè)不舍的眼神， 笑容也無(wú)法遮掩。 致， 所有開(kāi)發(fā)的伙伴， 一期一祈， 勿懷猶也， 幸福美好。
【相關(guān)學(xué)習(xí)推薦：小程序開(kāi)發(fā)教程】
以上是淺析網(wǎng)頁(yè)與小程序間怎么進(jìn)行通信的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！
熱AI工具
Undress AI Tool
免費(fèi)脫衣服圖片
Undresser.AI Undress
人工智能驅(qū)動(dòng)的應(yīng)用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機(jī)
Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費(fèi)的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強(qiáng)大的PHP集成開(kāi)發(fā)環(huán)境
Dreamweaver CS6
視覺(jué)化網(wǎng)頁(yè)開(kāi)發(fā)工具
SublimeText3 Mac版
神級(jí)代碼編輯軟件(SublimeText3)
Edge瀏覽器怎么將網(wǎng)頁(yè)用快捷方式發(fā)送到桌面？
Mar 14, 2024 pm 05:22 PM
Edge瀏覽器怎么將網(wǎng)頁(yè)用快捷方式發(fā)送到桌面？我們很多用戶為了方便直接打開(kāi)訪問(wèn)頁(yè)面，想要將經(jīng)常使用的網(wǎng)頁(yè)以快捷方式的形式顯示在桌面，但是不知道應(yīng)該如何操作，針對(duì)這個(gè)問(wèn)題，本期小編就來(lái)和廣大用戶們分享解決方法，一起來(lái)看看今日軟件教程分享的內(nèi)容吧。 Edge瀏覽器將網(wǎng)頁(yè)發(fā)送到桌面快捷方式方法： 1、打開(kāi)軟件，點(diǎn)擊頁(yè)面中的“...”按鈕?！ ?、在下拉菜單選項(xiàng)中選擇“應(yīng)用”中的“將此站點(diǎn)作為應(yīng)用安裝”。 3、最后在彈出的窗口中將其
新一代光纖寬帶技術(shù) ——50G PON
Apr 20, 2024 pm 09:22 PM
上篇文章（鏈接），小棗君給大家介紹了寬帶技術(shù)從ISDN、xDSL到10GPON的發(fā)展歷程。今天，我們來(lái)聊聊即將到來(lái)的新一代光纖寬帶技術(shù)——50GPON。█F5G和F5G-A介紹50GPON之前，先說(shuō)說(shuō)F5G和F5G-A。2020年2月，ETSI（歐洲電信標(biāo)準(zhǔn)化協(xié)會(huì)）推進(jìn)了一套以10GPON+FTTR、Wi-Fi6、200G光傳送/匯聚、OXC等技術(shù)為基礎(chǔ)的固定通信網(wǎng)絡(luò)技術(shù)體系，并將其命名為F5G，也就是第五代固網(wǎng)通信技術(shù)（The5thgenerationFixednetworks）。F5G是固網(wǎng)
php怎么在網(wǎng)頁(yè)打開(kāi)
Mar 22, 2024 pm 03:20 PM
在網(wǎng)頁(yè)中執(zhí)行 PHP 代碼需要確保 Web 服務(wù)器支持并已正確配置 PHP?？梢酝ㄟ^(guò)三種方式打開(kāi) PHP： * **服務(wù)器環(huán)境：**將 PHP 文件放置在服務(wù)器根目錄并通過(guò)瀏覽器訪問(wèn)。 * **集成開(kāi)發(fā)環(huán)境：**將 PHP 文件放置在指定 Web 根目錄并通過(guò)瀏覽器訪問(wèn)。 * **遠(yuǎn)程服務(wù)器：**通過(guò)服務(wù)器提供的 URL 地址訪問(wèn)托管在遠(yuǎn)程服務(wù)器上的 PHP 文件。
網(wǎng)頁(yè)圖片加載不出來(lái)怎么辦？6種解決辦法
Mar 15, 2024 am 10:30 AM
有網(wǎng)友發(fā)現(xiàn)打開(kāi)瀏覽器網(wǎng)頁(yè)，網(wǎng)頁(yè)上的圖片遲遲加載不出來(lái)，是怎么回事？檢查過(guò)網(wǎng)絡(luò)是正常的，那是哪里出現(xiàn)了問(wèn)題呢？下面小編就給大家介紹一下網(wǎng)頁(yè)圖片加載不出來(lái)的六種解決方法。 網(wǎng)頁(yè)圖片加載不出來(lái)： 1、網(wǎng)速問(wèn)題 網(wǎng)頁(yè)顯示不出圖片有可能是因?yàn)殡娔X的網(wǎng)速比較慢，電腦中開(kāi)啟的軟件比較多， 而我們?cè)L問(wèn)的圖片比較大，這就可能因?yàn)榧虞d超時(shí)，導(dǎo)致圖片顯示不出來(lái)， 可以將比較占網(wǎng)速的軟件將關(guān)掉，可以去任務(wù)管理器查看一下?！ ?、訪問(wèn)人數(shù)過(guò)多 網(wǎng)頁(yè)顯示不出圖片還有可能是因?yàn)槲覀冊(cè)L問(wèn)的網(wǎng)頁(yè)，在同時(shí)間段訪問(wèn)的
網(wǎng)絡(luò)連接正常但瀏覽器無(wú)法訪問(wèn)網(wǎng)頁(yè)可能原因
Feb 19, 2024 pm 03:45 PM
瀏覽器打不開(kāi)網(wǎng)頁(yè)但是網(wǎng)絡(luò)正常，可能的原因是多種多樣的。在該問(wèn)題出現(xiàn)時(shí)，我們需要逐步排查，才能確定具體的原因并解決問(wèn)題。首先，確定網(wǎng)頁(yè)打不開(kāi)的現(xiàn)象是局限于某個(gè)特定的瀏覽器還是所有瀏覽器都無(wú)法打開(kāi)網(wǎng)頁(yè)。如果只有一個(gè)瀏覽器無(wú)法打開(kāi)網(wǎng)頁(yè)，可以嘗試使用其他瀏覽器，如谷歌瀏覽器、火狐瀏覽器等進(jìn)行測(cè)試。如果其他瀏覽器能夠正常打開(kāi)網(wǎng)頁(yè)，那么問(wèn)題很可能出在該特定瀏覽器上，可能
無(wú)線鼠標(biāo)的發(fā)展史
Jun 12, 2024 pm 08:52 PM
原文標(biāo)題：《無(wú)線鼠標(biāo)到底是怎么做到無(wú)線的？》無(wú)線鼠標(biāo)慢慢成了現(xiàn)在辦公電腦的標(biāo)配，從此再也不用拖著長(zhǎng)長(zhǎng)的線跑來(lái)跑去了?？墒牵瑹o(wú)線鼠標(biāo)是怎么工作的呢？今天我們一起來(lái)學(xué)習(xí)一下No.1無(wú)線鼠標(biāo)的發(fā)展史你知道嗎，無(wú)線鼠標(biāo)現(xiàn)在也已經(jīng)40歲了，1984年的時(shí)候，羅技研制了世界上第一款無(wú)線鼠標(biāo)，不過(guò)這個(gè)無(wú)線鼠標(biāo)采用紅外線作為信號(hào)的載體，據(jù)說(shuō)長(zhǎng)得像下面圖片這個(gè)樣子，后面由于性能原因而宣告失敗。直到十年后的1994年，羅技終于研發(fā)成功了一個(gè)工作在27MHz的無(wú)線鼠標(biāo)，這個(gè)27MHz頻率也成了很長(zhǎng)一段時(shí)間內(nèi)，無(wú)線鼠標(biāo)
網(wǎng)頁(yè)打不開(kāi)怎么解決
Feb 21, 2024 am 10:24 AM
網(wǎng)頁(yè)打不開(kāi)怎么解決隨著互聯(lián)網(wǎng)的快速發(fā)展，人們?cè)絹?lái)越依賴于互聯(lián)網(wǎng)來(lái)獲取信息、進(jìn)行交流和娛樂(lè)。然而，有時(shí)我們會(huì)遇到網(wǎng)頁(yè)打不開(kāi)的問(wèn)題，這給我們帶來(lái)了很多困擾。本文將為大家介紹一些常見(jiàn)的方法，幫助解決網(wǎng)頁(yè)打不開(kāi)的問(wèn)題。首先，我們需要確定是由于什么原因?qū)е戮W(wǎng)頁(yè)打不開(kāi)?？赡艿脑虬ňW(wǎng)絡(luò)問(wèn)題、服務(wù)器問(wèn)題、瀏覽器設(shè)置問(wèn)題等。下面是一些解決方法：檢查網(wǎng)絡(luò)連接：首先，我們需要
PHP實(shí)現(xiàn)Socket通信的方法與技巧
Mar 07, 2024 pm 02:06 PM
PHP是一種常用的開(kāi)發(fā)語(yǔ)言，可以用于開(kāi)發(fā)各種Web應(yīng)用程序。除了常見(jiàn)的HTTP請(qǐng)求和響應(yīng)以外，PHP也支持通過(guò)Socket進(jìn)行網(wǎng)絡(luò)通信，實(shí)現(xiàn)更為靈活和高效的數(shù)據(jù)交互。本文將介紹PHP如何實(shí)現(xiàn)Socket通信的方法與技巧，并附上具體的代碼示例。什么是Socket通信Socket是一種在網(wǎng)絡(luò)中進(jìn)行通信的方法，可以在不同的計(jì)算機(jī)之間傳輸數(shù)據(jù)。通過(guò)S
