微信小程序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()
        }
    })
相关推荐
慧一居士12 分钟前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead14 分钟前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码6 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子6 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年6 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子6 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina6 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路7 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说8 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409198 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app