uniapp中APPwebview与网页的双向通信

uniapp提供了uni.postMessage()来实现网页=>APP的通信,实现在网页中点击来实现app的交互

如何使用uni.postMessage()? 其实在文档中已经写明,只需将gitcode.net/dcloud/uni-... 中的代码引入到我们的网页端代码中,就可以正常使用,但是需要注意的是,由于浏览器的安全策略影响,我们可能需要将这个文件中的代码拷贝到我们的本地或者自己的服务 ,否则在访问window.uni的时候可能会出现undefined;挂在完成后,我们访问 window.uni

我们可以通过监听 UniAppJSBridgeReady事件来监听通讯初始化完成事件

之后我们便可以通过来向APP端发送消息

js 复制代码
w.uni.postMessage({
        data: {
          type: 'start',
          data: {}
        },
      })

消息发送之后,在app代码中,在对应的web-view标签的内使用@message事件来接受消息(注意平台兼容性差异)

vue 复制代码
<web-view ref="webview" src="/hybrid/html/index.html" @message="getMessage"></web-view>

此处扩展: App 平台同时支持网络网页和本地网页,但本地网页及相关资源(js、css等文件)必须放在 uni-app 项目根目录->hybrid->html 文件夹下或者 static 目录下

getMessage.js 复制代码
const getMessage = (e) => {
	console.log(e.detail.data) // 读取的时候注意格式,一般为数组,读取e.detail.data[0]就是发送的数据
}

至此,网页向APP的通信完成,以下是APP向网页端通信;

在uniapp的webview中,我们是可以通过eval来对目标网页注入js代码以执行的,首先我们需要获取到我们的目标window对象

js 复制代码
    const pages = getCurrentPages()
    const page = pages[pages.length - 1] // 取当前页面
    const currentWebView = page.$getAppWebview()
    const targetWindow = currentWebView.children()[0] // 取当前页面的webview
  • 1.getCurrentPages() 函数用于获取当前页面栈的实例,以数组形式按栈的顺序给出,第一个元素为首页,最后一个元素为当前页面

    1. page.$getAppWebview(): 获取当前页面的webview对象实例

    当我们拿到targetWindows之后,就可以只用evaJS来在网页中注入执行一段代码,方式很多,只取一两个示例

  • 示例1:

    js 复制代码
      // 网页中定义一个函数(例:getParentMessage)挂在在window上,然后直接执行window.getParentMessage
      window.getParentMessage = function (data) {
          console.log(data)
      }
      
    // app中直接执行
    targetWindow.evalJS('getParentMessage("你好")')
    
    // 网页中打印: 你好
  • 示例2:

js 复制代码
    // app执行
    const jsStr = `window.postMessage({ type: 'parentMessage', l: 11 }, '*')`
    
   //网页中监听
   window.addEventListener('message', (e) => {
        console.log('收到消息:', e.data)
    })
   
相关推荐
伍哥的传说41 分钟前
React & Immer 不可变数据结构的处理
前端·数据结构·react.js·proxy·immutable·immer·redux reducers
90后的晨仔1 小时前
从传统 CSS 到 Vue 的 Class 与 Style 动态绑定全解
前端·vue.js
拾光拾趣录1 小时前
前端灵魂拷问:10道题
前端·面试
独泪了无痕2 小时前
Vite 模块动态导入之Glob导入
前端·vue.js·vite
xdpcxq10293 小时前
Docker用Web应用实例深入容器
前端·docker·容器
超浪的晨3 小时前
JavaWeb 入门:JavaScript 基础与实战详解(Java 开发者视角)
java·开发语言·前端·javascript·后端·学习·个人开发
tianchang3 小时前
React Hook 解析(二):`useEffect` 与 `useLayoutEffect`
前端·react.js
codervibe3 小时前
使用 Vue3 + Axios 与 Spring Boot 高效对接(含 token 处理)
前端·vue.js
云边散步3 小时前
《校园生活平台从 0 到 1 的搭建》第五篇:商品后端
前端·后端
圆心角3 小时前
vue keep-alive 原理
前端·vue.js