uni-app 与 Vue H5 项目通讯

什么是WebView

> WebView是术语，是指网页视图。能加载显示网页，可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页。

可以内嵌在移动端，实现前端的混合式开发，大多数混合式开发框架都是基于WebView模式进行二次开发的。比如：APIcloud、uni-app等等的框架。

uni-app里的web-view

web-view是一个web浏览器组件，可以用来承担网页的容器，会自动铺满整个屏幕

各小程序平台，web-view 加载的 url 需要在后台配置域名白名单，包括内部再次 iframe 内嵌的其他 url 。

详细属性查看：uni-app里的web-view

通讯方法

引入SDK

嵌入的h5项目或者页面不是uni-app项目搭建的话，需要在 index.html 页面或者是当前的HTML页面引入uni-app项目的API ,这样才能使用,才能相互通讯。

我们是用的Vue-cli脚手架搭建的项目，直接在 html 模板引入

Tips

• 这些 JS 文件是在 web-view 加载的那个 HTML 文件中引用的，而不是 uni-app 项目中的文件。
• 如果不考虑微信小程序，则无需引入微信的 JS-SDK。
• 两个文件同时引入时，注意引入的顺序，微信的需要在前。

调用的时机

在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.getEnv(function(res) {  
        console.log('当前环境：' + JSON.stringify(res));  
    });  
});

APP端

监听 web-view 组件的 message 事件，然后在事件回调的 event.detail.data 中接收传递过来的消息。

// 引入需要嵌入的h5 链接

H5端

uni.postMessage 中的参数格式，必须是 data: {}。也就是说，传递的消息信息必须在 data 这个对象中。

APP 向 H5 发送消息 可以动态设置URL，然后 H5 获取 query 参数

跳转页面

在h5页面中引入web-view的方法的基础上，不但可以像上面一样进行通讯，还可以跳转页面，达到从嵌入h5跳回到本地应用的页面上的效果，跳转页面的方式与uni-app一致，在h5页面写入方法就好。

• uni.navigateTo // 跳转到指定页面
• uni.redirectTo // 关闭当前页面跳转到指定页面
• uni.reLaunch // 关闭所有页面跳转到指定页面
• uni.switchTab // 跳转tab页面–只能跳转tab页
• uni.navigateBack // 返回页面层级

Tips

• 当web-view嵌入的h5 是uni-app生成的h5资源的话
  • 使用 uni.webView.navigateTo //其中的webView指的是你嵌入的h5的跳转想要跳转回应用

踩坑

• uni.showToast 会清掉 loading 状态
  • 同理 hideLoading 也会关闭 showToast
  • 解决方案：使用 H5+ 的 plus.nativeUI.toast
• 频繁使用 uni.showLoading 会闪烁，比如上传进度场景
  • 解决方案：使用 H5+ 的 plus.nativeUI.showWaiting
• ing…