react-native-webview使用postMessage后H5不能監聽問題(iOS和安卓的兼容問題)

/* 監聽rn消息 */
const eventListener = nativeEvent => {//解析數據actionType、extraconst {actionType, extra} = nativeEvent.data && JSON.parse(nativeEvent.data) || {}
}
//安卓用document,ios用window
window.addEventListener('message', eventListener);
document.addEventListener('message', eventListener);

import uaParser from 'ua-parser-js'let timer
let ua = uaParser(navigator.userAgent)const handleWatchRNMessage = () => {if (window.ReactNativeWebView) {window.ReactNativeWebView.postMessage(JSON.stringify({ type: 'getToken' }))}const eventListener = (e) => {console.log('message', e.data)let payload = e.data ? JSON.parse(e.data) : {}let type = payload.typeif (type === 'getToken') {localStorage.setItem('token', payload.token)} else if (type === 'getBrowserInfo') {const { browser } = uawindow.ReactNativeWebView.postMessage(JSON.stringify({ type, browser }))}}if (window.platform === 'rn') {if (ua.os.name === 'iOS') {window.addEventListener('message', eventListener)} else {window.document.addEventListener('message', eventListener)}}
}handleWatchRNMessage()

?

參考鏈接:

https://blog.csdn.net/liuxingyuzaixian/article/details/125199131

https://chat.xutongbao.top/?

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

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

相關文章

Jenkins-發送郵件配置

在Jenkins構建執行完畢后,需要及時通知相關人員。因此在jenkins中是可以通過郵件通知的。 一、Jenkins自帶的郵件通知功能 找到manage Jenkins->Configure System,進行郵件配置: 2. 配置Jenkins自帶的郵箱信息 完成上面的配置后&#xf…

DiffusionDet: Diffusion Model for Object Detection

DiffusionDet: Diffusion Model for Object Detection 論文概述不同之處整體流程 論文題目:DiffusionDet: Diffusion Model for Object Detection 論文來源:arXiv preprint 2022 論文地址:https://arxiv.org/abs/2211.09788 論文代碼&#xf…

kubesphere 使用流水線對接 sonar

官方文檔:使用圖形編輯面板創建流水線 創建憑證 創建 sonar 憑證 創建 gitlab 憑證 創建流水線 創建流水線,編輯流水線 自定義流水線 拉取代碼 代理選 kubernetes,label 填maven 添加步驟 - git 填寫 git 地址,選…

CSS 背景屬性

前言 背景屬性 屬性說明background-color背景顏色background-image背景圖background-repeat背景圖平鋪方式background-position背景圖位置background-size背景圖縮放background-attachment背景圖固定background背景復合屬性 背景顏色 可以使用background-color屬性來設置背景…

【計算機設計大賽】國賽一等獎項目分享——基于多端融合的化工安全生產監管可視化系統

文章目錄 一、計算機設計大賽國賽一等獎二、項目背景三、項目簡介四、系統架構五、系統功能結構六、項目特色(1)多端融合(2)數據可視化(3)計算機視覺(目標檢測) 七、系統界面設計&am…

esp-idf的電源管理——軟件的總體結構

idf的電源管理在軟件上,從上到下可以分為三層: freeRTOS idle taskesp pmesp sleepesp sleep又可以進一步細分為兩層,分別是軟件sleep flow以及最終落實到硬件寄存器的rtc sleep。更具體的,函數調用關系如下: #mermaid-svg-WunrsW7XSArlvBnG {font-family:"trebuchet…

前端打開后端返回的HTML格式的數據

前端打開后端返回的 HTML格式 的數據: 后端返回的數據格式如下示例: 前端通過 js 方式處理(核心代碼如下) console.log(回調, path); // path 是后端返回的 HTML 格式數據// 必須要存進localstorage,否則會報錯&am…

步入React正殿 - State進階

目錄 擴展學習資料 State進階知識點 狀態更新擴展 shouldComponentUpdate PureComponent 為何使用不變數據【保證數據引用不會出錯】 單一數據源 /src/App.js /src/components/listItem.jsx 狀態提升 /src/components/navbar.jsx /src/components/listPage.jsx src/A…

Uniapp連接藍牙設備

一、效果圖 二、流程圖 三、實現 UI <uni-list><uni-list :border="true"><!-- 顯示圓形頭像 -->

C語言案例 判斷是否為回文數-06.1

題目&#xff1a;隨機輸入一個5位數&#xff0c;判斷它是不是回文數 步驟一&#xff1a;定義程序的目標 編寫C程序&#xff0c;隨機輸入一個5位數&#xff0c;判斷它是不是回文數 步驟二&#xff1a;程序設計 原理&#xff1a;即12321是回文數&#xff0c;個位與萬位相同&#…

SpringBoot + Vue 微人事(十)

職位管理前后端接口對接 先把table中的數據展示出來&#xff0c;table里面的數據實際上是positions里面的數據&#xff0c;就是要給positions:[] 賦上值 可以在methods中定義一個initPosition方法 methods:{//定義一個初始化positions的方法initPositions(){//發送一個get請求…

2.HTML、CSS

文章目錄 1.什么是HTML、CSS2.HTML的語法特點3.HTML的快速體驗4.開發工具推薦&#xff1a;VS Code5.基本標簽&樣式5.1.標題5.1.1.標題排版5.1.2.標題樣式5.1.3.超鏈接 5.2.正文5.2.1.正文排版5.2.2.頁面布局 表格、表單標簽表格標簽表單標簽 1.什么是HTML、CSS HTML即超文本…

在vue中如何重新渲染所有組件

文章目錄 一、在根組件中給router-view動態綁定上v-if。二、調用重新加載下級組件方法。 在有些需求情況下需要重新加載頁面或者觸發組件的生命周期&#xff0c;但是刷新對用戶體驗不太友好&#xff0c;這個時候我們可以通過provide/inject可以輕松實現跨級訪問祖先組件的數據&…

web JS高德地圖標點、點聚合、自定義圖標、自定義窗體信息、換膚等功能實現和高復用性組件封裝教程

文章目錄 前言一、點聚合是什么&#xff1f;二、開發前準備三、API示例1.引入高德地圖2.創建地圖實例3.添加標點4.刪除標點5.刪除所有標點&#xff08;覆蓋物&#xff09;6.聚合點7.自定義聚合點樣式8.清除聚合9.打開窗體信息 四、實戰開發需求要求效果圖如下&#xff1a;封裝思…

LeetCode1387 將整數按權重排序

思路 首先是這種計算權重的方式很有可能出現重復&#xff0c;所以需要記憶化搜索記憶化搜索&#xff1a;先查表再計算&#xff0c;先存表再返回。將整數 x 和計算的權重分別存儲數組的0和1的位置重寫compare將數組排序按規則排序返回結果 代碼 class Solution {private Hash…

(二)Git在公司中團隊內合作和跨團隊合作和分支操作的全部流程(一篇就夠)

&#xff08;一&#xff09;Git連接GitHub的全部流程https://blog.csdn.net/m0_65992672/article/details/132333727 團隊內協作 項目經理通過git push將代碼推送到遠程倉庫【也就是git、gitee等代碼托管中心】,推完以后組員可以通過git clone克隆下來代碼&#xff0c;如果組…

redis主從復制

隨著項目訪問量的增加&#xff0c;對Redis服務器的操作也越加頻繁&#xff0c;雖然Redis讀寫速度都很快&#xff0c;但是一定程度上也會造成一定的延時&#xff0c;那么為了解決訪問量大的問題&#xff0c;通常會采取的一種方式是主從架構Master/Slave&#xff0c;Master 以寫為…

3.react useRef使用與常見問題

react useRef使用與常見問題 文章目錄 react useRef使用與常見問題1. Dom操作: useRef()2. 函數組件的轉發: React.forwardRef()3. 對普通值進行記憶, 類似于一個class的實例屬性4. 結合useEffect,只在更新時觸發FAQ 1. Dom操作: useRef() // 1. Dom操作: useRef()let app doc…

一些指令工具

一、adb shell adb shell下一些常用命令行工具&#xff1a; pm&#xff1a;PackageManager&#xff0c;包管理器&#xff0c;用于管理應用程序的安裝、卸載、查詢和更多相關操作。 pm install …// pm uninstall …// pm list packages//設備上已安裝的應用程序 pm dump …//獲…