关于 uni-app 使用 web-view 页面之间互相跳转、通信等问题的解决方案

最近开发小程序的时候、需要嵌入一个第三方网站、并且和第三方网站有些交互。这个第三方页面本身就是一个 HTML 页面、想着把它给嵌入到 uni-app 中，结果没实现......（很多的 js 代码在小程序中不识别）。

最后采用 web-view 方式来跳转到第三方页面、这就触发了页面之间互相通信的问题

官方中有一篇文章详细介绍了 在 web-view 加载的本地及远程 HTML 中调用 uni 的API及网页和 vue 页面是如何通讯的方法、但是似乎是 H5 向 uni-app 进行发送数据、并没有介绍 uni-app 如何发送数据到 H5,

那么 uni-app 如何发送数据到 H5？ 其实很简单、在 web-view 中只需要通过 URL 就可以向 H5 进行传参 例如在 uni-app 中：

那么在 H5 中是如何接收值得呢？

    
    
    



    navigateTo
    redirectTo
    navigateBack
    reLaunch
    switchTab
    postMessage
    getEnv

以上 Html 文件 包含 页面跳转、接收 uni-app 的传值、以及发送数据到 uni-app 等

关于 web-view 如何使用就不过多介绍了、官网文章很详细

• http://ask.dcloud.net.cn/article/35083
• https://uniapp.dcloud.io/component/web-view

关于极客返利

极客返利 是由我个人开发的一款网课返利、返现平台。包含 极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是：你买课，我返现。让你花更少的钱，就可以买到课程。

https://geek.laravelcode.cn

https://geek.idaka.ink

版权许可

本作品采用 知识共享署名 4.0 国际许可协议 进行许可。

转载无需与我联系，但须注明出处，注明文章来源 关于 uni-app 使用 web-view 页面之间互相跳转、通信等问题的解决方案

联系我