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)
    })
   
相关推荐
群联云防护小杜19 分钟前
构建分布式高防架构实现业务零中断
前端·网络·分布式·tcp/ip·安全·游戏·架构
ohMyGod_1231 小时前
React16,17,18,19新特性更新对比
前端·javascript·react.js
前端小趴菜051 小时前
React-forwardRef-useImperativeHandle
前端·vue.js·react.js
@大迁世界1 小时前
第1章 React组件开发基础
前端·javascript·react.js·前端框架·ecmascript
Hilaku2 小时前
从一个实战项目,看懂 `new DataTransfer()` 的三大妙用
前端·javascript·jquery
爱分享的程序员2 小时前
前端面试专栏-算法篇:20. 贪心算法与动态规划入门
前端·javascript·node.js
我想说一句2 小时前
事件委托与合成事件:前端性能优化的"偷懒"艺术
前端·javascript
爱泡脚的鸡腿2 小时前
Web第二次笔记
前端·javascript
良辰未晚2 小时前
Canvas 绘制模糊?那是你没搞懂 DPR!
前端·canvas
Dream耀2 小时前
React合成事件揭秘:高效事件处理的幕后机制
前端·javascript