uniapp 微信小程序內嵌h5實時通信

描述:
小程序webview內嵌的h5需要向小程序實時發送消息,有人說postMessage可以實現,所以試驗一下,結果是實現不了實時,只能在特定時機后退、組件銷毀、分享時小程序才能接收到信息(小程序為了安全等考慮做了限制),有人說可以使用websocker實現,這種方法應該是沒問題的,就是有點麻煩,要跟后端配合。

實時通信:
小程序傳參數給h5都是通過url參數,沒什么好說的,主要說下h5傳參數給小程序。
我是使用webview的load方法實現的,這個方法副作用就是會刷新頁面,當需要通信時加載新地址以觸發load事件。

const prefix = window.location.href.indexOf('?') ? '&' : '?'
window.location.href = window.location.href + prefix + `action=openMapAPP&latitude=${latitude}&longitude=${longitude}&address=${address}`

注意:
1.不要通過uni等做跳轉,那樣瀏覽器不會刷新,導致load不會觸發。
2.有可能你發布后load的e.detail.src拿不到url。這個是因為只有小程序配置了業務域名才可以拿到url。
3.本地測試load拿不到url,需要修改微信開發者工具的“調試基礎庫”版本(詳情-本地設置里面)。我測驗2.21.4到2.24.7版本可以拿到url,其他版本太新或太老都不行,這有可能導致切換后項目啟動報錯,可以適當在2.21.4到2.24.7區間換個沒問題的版本。
4.真機調試load拿不到url,需要把調試基礎庫推送到手機端,這個需要使用同個微信。推送后重新真機調試就行了。
在這里插入圖片描述

做非實時通信時根據網上教程掉的坑:
postMessage有兩種方式,第一種是index.html引入uni.webview.js調用uni.postMessage,第二種是引入jweixin.js調用wx.miniProgram.postMessage。
1.用第一種方式,uni.webview.js需要改源碼名稱,不然uni會被覆蓋,這個也挺多人提到的。不過這種方式還要引入jweixin.js才能使用,改完再通過newName.postMessage調用,如果小程序控制臺有輸出invokeAppService postMessage ***則代表發送信息成功,奇怪的是我測試時第一天用這種方式成功了,第二天失敗了還原不了。
2.我換成了第二種方式,不過跟網上其他人用法不同,別人時直接用wx.miniProgram.postMessage調用,我發現wx也是會被uni的wx對象覆蓋,所以我換成npm安裝weixin-js-sdk,然后使用 import wxH5 from “weixin-js-sdk” 引入,再調用wxH5.miniProgram.postMessage。這種也需要引入uni.webview.js,我在index.html引入。這個不需要改uni.webview.js源碼。
3.信息發送成功后webview @message監聽不到信息,需要小程序后退、組件銷毀、分享時才能收到信息。注意:改變嵌套的h5是無效的,例如在h5內做路由返回,經測驗,返回調用的是h5項目的返回,不能返回到webview外,可以點擊小程序左上角的返回按鈕來看有沒有觸發@message事件,所以你webview外的項目的路由至少需要兩層。如果webview直接嵌套html網頁,是可以直接返回到webview外的。
4.官方文檔說可以直接使用 window.postMessage發送信息,測驗后是不行的。這種方式只能通過window監聽message事件才能接收到消息,但是小程序不能用window。

非實時通信備注:
uni.webview.1.5.6.js下載地址:https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js
weixin-js-sdk安裝版本:“weixin-js-sdk”: “^1.6.5”,
發送非實時信息關鍵代碼:

<script type="text/javascript" src="static/js/uni.webview.1.5.6.js"></script>
"weixin-js-sdk": "^1.6.5",
<web-view :src="src" @message="getMessage" />
import wxH5 from "weixin-js-sdk";
wxH5.miniProgram.postMessage({ data: { action: 'test' } });

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/65706.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/65706.shtml
英文地址,請注明出處:http://en.pswp.cn/web/65706.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

php 使用simplexml_load_string轉換xml數據格式失敗

本文介紹如何使用php函數解析xml數據為數組。 <?php$a <xml><ToUserName><![CDATA[ww8b77afac71336111]]></ToUserName><FromUserName><![CDATA[sys]]></FromUserName><CreateTime>1736328669</CreateTime><Ms…

HOW - Form 表單 label 和 wrapper 對齊場景

一、背景 在日常使用 表單 時&#xff0c;我們一般有如下布局&#xff1a; 可以通過 Form 表單提供的配置直接設置&#xff1a; <Formform{form}labelCol{{ span: 4 }}wrapperCol{{ span: 20 }}onFinish{handleSubmit}><Form.Itemlabel"輸入框"name"…

深入探索AI核心模型:CNN、RNN、GAN與Transformer

在人工智能的飛速發展中&#xff0c;眾多深度學習模型和算法不斷涌現&#xff0c;推動了許多領域的進步。特別是在圖像識別、自然語言處理、生成建模等方向&#xff0c;AI模型的應用越來越廣泛。本文將介紹幾種最常用的AI模型&#xff0c;包括卷積神經網絡&#xff08;CNN&…

櫻桃鍵盤win鍵按了沒反應怎么處理

?游戲模式?&#xff1a;部分櫻桃鍵盤在進入游戲模式后會禁用Win鍵&#xff0c;以防止在游戲過程中誤觸。可以通過按下Fn F9鍵來切換游戲模式和辦公模式&#xff0c;確保鍵盤處于辦公模式下&#xff0c;Win鍵即可恢復正常功能。? &#xff08;至此我的問題已解決&#xff0c…

解析若依 `R.java` 類——ruoyi-common-core

文章目錄 1. 類的整體功能2. 代碼解析2.1 成員變量和常量2.2 靜態方法構造響應對象2.3 內部私有方法 restResult2.4 工具方法 3. 開發中的應用擴展3.1 接口規范化3.2 快速響應構造3.3 自定義狀態碼3.4 自定義擴展 R.java 是若依框架中通用的 API 響應封裝類&#xff0c;主要用于…

Perl語言的數據結構

Perl語言的數據結構 Perl是一種功能強大的、靈活的腳本語言&#xff0c;廣泛用于文本處理、系統管理、網絡編程以及許多其他領域。其靈活性不僅體現在語法上&#xff0c;還體現在其豐富的數據結構上。本文將深入探討Perl的主要數據結構&#xff0c;包括標量、數組、哈希以及引…

RK3588上CPU和GPU算力以及opencv resize的性能對比測試

RK3588上CPU和GPU算力以及opencv resize的性能對比測試 一.背景二.小結三.相關鏈接四.操作步驟1.環境搭建A.安裝依賴B.設置GPU為高性能模式C.獲取GPU信息D.獲取CPU信息 2.調用OpenCL SDK獲取GPU信息3.使用OpenCL API計算矩陣乘4.使用clpeak測試GPU的性能5.使用OpenBLAS測試CPU的…

轉運機器人在物流倉儲行業的優勢特點

在智能制造與智慧物流的浪潮中&#xff0c;一款革命性的產品正悄然改變著行業的面貌——富唯智能轉運機器人&#xff0c;它以卓越的智能科技與創新的設計理念&#xff0c;引領著物流領域步入一個全新的高效、智能、無人的時代。 一、解放雙手&#xff0c;重塑物流生態 富唯智能…

基于單片機的無線智能窗簾控制器的設計

摘 要 : 本文以單片機為控制核心 , 基于 PT2262/ 2272 無線收發模塊 , 實現了窗簾的無線遠程智能控制 . 該控制器通過高頻無線收發模塊實現了遙控窗簾的開合控制; 根據外部光線強弱實現自動開關窗簾 ; 根據設定時間自動完成開關過程; 通過語音播報當前環境溫濕度信息以…

linux centos掛載未分配的磁盤空間

使用到的命令 lshw -class disk -short hostnamectl fdisk /dev/sdb partprobe /dev/sdb mount /dev/sdb2 /opt/fastdfs/ mkfs.ext4 /dev/sdb2 mount -t ext4 /dev/sdb2 /opt/fastdfs/

Vivado中Tri_mode_ethernet_mac的時序約束、分析、調整——(一)時序約束的基本概念

1、基本概念 推薦閱讀&#xff0c;Ally Zhou編寫的《Vivado使用誤區與進階》系列文章&#xff0c;熟悉基本概念、tcl語句的使用。 《Vivado使用誤區與進階》電子書開放下載&#xff01;&#xff01; 2、Vivado中的語法例程 1&#xff09;語法例程 約束的語句可以參考vivado…

基于Spring Boot的城市垃圾分類管理系統設計與實現(LW+源碼+講解)

專注于大學生項目實戰開發,講解,畢業答疑輔導&#xff0c;歡迎高校老師/同行前輩交流合作?。 技術范圍&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬蟲、數據可視化、安卓app、大數據、物聯網、機器學習等設計與開發。 主要內容&#xff1a;…

springboot整合admin

1. 添加依賴 首先&#xff0c;在你的admin服務端pom.xml文件中添加Spring Boot Admin的依賴&#xff1a; <dependency><groupId>de.codecentric</groupId><artifactId>spring-boot-admin-starter-server</artifactId><version>2.5.4<…

【YOLOv8雜草作物目標檢測】

YOLOv8雜草目標檢測 算法介紹模型和數據集下載 算法介紹 YOLOv8在禾本科雜草目標檢測方面有顯著的應用和效果。以下是一些關鍵信息的總結&#xff1a; 農作物幼苗與雜草檢測系統&#xff1a;基于YOLOv8深度學習框架&#xff0c;通過2822張圖片訓練了一個目標檢測模型&#xff…

比亞迪夏直插家用MPV腹地,“迪王”開啟全面銷冠新征程

文/王俁祺 導語&#xff1a;比亞迪前腳剛收獲2024年的全面成功&#xff0c;后腳立刻就開始布局2025年的產品矩陣了。比亞迪夏的橫空出世&#xff0c;看來家用MPV市場也要感受“迪王”的恐怖如斯了。 家用MPV市場的“意外之喜” 1月8日&#xff0c;比亞迪夏終于在萬眾矚目之下…

左值引用(Lvalue Reference)和右值引用(Rvalue Reference)詳解

左值引用&#xff08;Lvalue Reference&#xff09;和右值引用&#xff08;Rvalue Reference&#xff09;詳解 文章目錄 左值引用&#xff08;Lvalue Reference&#xff09;和右值引用&#xff08;Rvalue Reference&#xff09;詳解1. 什么是左值和右值&#xff1f;左值&#x…

探索數據存儲的奧秘:深入理解B樹與B+樹

key value 類型的數據紅黑樹&#xff08;最優二叉樹&#xff0c;內存最優&#xff09;&#xff0c;時間復雜度&#xff1a;O&#xff08;logn&#xff09;,調整方便&#xff1b;一個結點分出兩個叉B樹一個節點可以分出很多叉數據量相等的條件下&#xff1a;紅黑樹的層數很高&am…

聯邦大語言模型典型系統: FATE - LLM、FedLLM、FederatedScope - LLM、PrimiHub

聯邦大語言模型典型系統: FATE - LLM、FedLLM、FederatedScope - LLM、PrimiHub 目錄 聯邦大語言模型典型系統: FATE - LLM、FedLLM、FederatedScope - LLM、PrimiHubPEFT 技術及簡單舉例PEFT 技術代碼實現提示詞工程不僅僅在聊天對話框實現,還可以再代碼中實現聯邦大語言模…

L1G5000 XTuner 微調個人小助手認知

使用 XTuner 微調 InternLM2-Chat-7B 實現自己的小助手認知 1 環境配置與數據準備步驟 0. 使用 conda 先構建一個 Python-3.10 的虛擬環境步驟 1. 安裝 XTuner 修改提供的數據步驟 0. 創建一個新的文件夾用于存儲微調數據步驟 1. 創建修改腳本步驟 2. 執行腳本步驟 3. 查看數據…

網絡協議安全的攻擊手法

1.使用SYN Flood泛洪攻擊&#xff1a; SYN Flood(半開放攻擊)是最經典的ddos攻擊之一&#xff0c;他利用了TCP協議的三次握手機制&#xff0c;攻擊者通常利用工具或控制僵尸主機向服務器發送海量的變源端口的TCP SYN報文&#xff0c;服務器響應了這些報文后就會生成大量的半連…