微信小程序webview通信

本文在uniapp 框架背景下生成,其他情况仅作参考

开始

直接照着文档来即可。

小程序页面:

scss 复制代码
message(e) {
    console.log(e.detail.data)
}
<web-view src="xxx" @message="message"></web-view>

h5页面:

css 复制代码
uni.postMessage({
    data: {
        action: 'message'
    }
});

实际上在h5页面postMessage 之后发现并没有触发小程序页面的message 事件,仔细看文档发现只有在特定的时机才会触发:后退组件销毁分享

可以在h5页面多次postMessage ,最终message 事件的参数会是个按顺序生成的数组。

H5页面

进行在小程序上不易处理的逻辑操作,本文的案例是根据DOM 生成图片,采用的是html2canvas 库。

完成之后或返回,或跳转其他页面,都需要调用小程序的API,这里通过weixin-webview-jssdk 实现。

通信

分享

通过页面的分享按钮触发,此时仍在当前页面,直接处理相关逻辑即可。

后退

这个后退 是指包含webview 标签的这个小程序页面的后退。那么这里需要一个中间页面,在onShow时判断是要跳转到该小程序页面,还是展示数据。此时整个流程就非常清晰了,具体的细节稍微画了一下流程图来展示。

如果是h5环境,则直接展示h5页面。

如果是微信环境,跳转到中间页面,在onLoad 中立即跳转到小程序页面。

小程序页面中由webview 标签嵌套h5页面,在h5页面中获取数据之后,自动执行小程序的返回操作,此时又会回到中间页面。 同时触发webview 标签的message事件,然后将数据发送给中间页面。具体的页面通信方式在下文作详细阐述。

返回到中间页面,检测到有数据存在,则不会自动跳转到小程序页面,而是展示数据。

如果直接在小程序页面返回(不是在h5中获取数据之后调用的返回),则回到中间页面时不会有数据,则再次执行返回,回到初始页。

销毁

这个销毁 是指包含webview 标签的销毁。那么仍然需要一个中间页面,在数据生成之后,通过页面间通信的方式来通知小程序页面销毁webview 标签,具体的细节稍微画了一下流程图来展示。

如果是h5环境,则直接展示h5页面。

如果是微信环境,跳转到小程序页面。维护一个控制webview标签展示的flag,默认为true。

sql 复制代码
<web-view v-if="flag" src="xxx" @message="message"></web-view>

此时展示h5页面,生成数据之后跳转到中间页,中间页通知小程序页面数据生成了(具体的页面通信方式在下文作详细阐述.),该把flag 置为false了,然后执行返回操作。

回到小程序页面,发现flag 为false且存在数据,则webview 组件销毁,触发message 事件,执行数据处理逻辑。

页面间通信

  1. 通过getCurrentPages 方法可以获取到页面栈,找到对应的页面实例,就可以修改其中的数据。

  2. uni.$emit + uni.$on 实现的页面间通信

    发送页面:

    bash 复制代码
    uni.$emit("fn", { payload: "anything" })

    接收页面:

    javascript 复制代码
    uni.$on("fn",(res) => {
        console.log(res)
    })

    记得取消监听

    javascript 复制代码
    onUnload() {
      uni.$off("fn")
    },
  3. 与上个方法类似,由微信提供的API。

    发送页面:

    kotlin 复制代码
    this.eventChannel = this.getOpenerEventChannel()
    this.eventChannel.emit('fn', { payload: "anything" });

    接收页面:

    css 复制代码
    uni.navigateTo({
        url: 'xxx',
        events: {
            fn: data => fn()
        }
    })
相关推荐
小小弯_Shelby3 分钟前
uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目
前端·uni-app
IT_陈寒6 分钟前
SpringBoot性能飞跃:5个关键优化让你的应用吞吐量提升300%
前端·人工智能·后端
加洛斯1 小时前
Vue 知识篇(2):浅谈Vue中的DOM与VNode
前端·javascript·vue.js
kunge1v51 小时前
学习爬虫第三天:数据提取
前端·爬虫·python·学习
可爱的秋秋啊1 小时前
简单网站编写
开发语言·前端
Keepreal4961 小时前
Electron基本概念
前端·javascript·electron
zhaoolee2 小时前
Claude Code使用指北(如何白嫖百万Qwen3 Token,每月劲省20刀)
前端
前台端水工程师2 小时前
vite-plugin-mock插件的3.0.2版本在生产环境无法使用
前端
戈卬2 小时前
VSCode 中 Prettier 工作原理与使用指南
前端
我叫张得帅2 小时前
从零开始的前端异世界生活--005--“HTTP详细解析中”
前端