uni-app 与 Vue H5 项目通讯

简介: uni-app 与 Vue H5 混合开发app的通讯方法

什么是WebView

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

可以内嵌在移动端,实现前端的混合式开发,大多数混合式开发框架都是基于WebView模式进行二次开发的。比如:APIclouduni-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 模板引入

<!-- 微信 JS-SDK 如果不需要兼容小程序,则无需引用此 JS 文件。 -->  
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
<!-- uni 的 SDK,必须引用。 -->  
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>

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 链接
<template>
    <view>
        <web-view
            @message="getMessage" 
            src="https://uniapp.dcloud.io/static/web-view.html"
        >
        </web-view>
    </view>
</template>
<script>
//在methods中接收h5发送的消息
/**
* @information message中 接收到的是由h5项目通过uni.postMessage中传递出来的数据,以数组的形式接收每次的消息
*/
getMessage(event){
    console.log('接收到消息',event.detail.data)
}
</script>

H5端

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

<script>
// 在使用到的页面 添加如下代码
 mounted () {
    this.$nextTick(()=>{
      document.addEventListener('UniAppJSBridgeReady', function() {  
        // 向 app 发送消息
        uni.postMessage({  
            data: {  
                action: 'postMessage'  
            }  
        });
      });
    })
  }
</script>

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

<template>
    <web-view
       @message="getMessage" 
       :src="url">
    </web-view>
</template>
<script>
export default {
  data () {
    return {
      url: 'http://192.168.0.1/test?id=1' // APP URL传递参数
    }
  },
  created () {
      // H5 获取参数
    this.params = this.$route.query.id
  }
}
</script>

跳转页面

在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...
目录
相关文章
|
30天前
|
JavaScript API
【vue实战项目】通用管理系统:api封装、404页
【vue实战项目】通用管理系统:api封装、404页
19 3
|
1月前
|
存储 JavaScript 小程序
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
jQuery、vue、小程序、uni-app中的本地存储数据和接受数据
11 0
|
1月前
|
人工智能 JavaScript 前端开发
毕设项目-基于Springboot和Vue实现蛋糕商城系统(三)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
1月前
|
JavaScript Java 关系型数据库
毕设项目-基于Springboot和Vue实现蛋糕商城系统(一)
毕设项目-基于Springboot和Vue实现蛋糕商城系统
|
26天前
|
JavaScript 前端开发
总结 Vue3 的一些知识点:Vue3 项目打包
总结 Vue3 的一些知识点:Vue3 项目打包
|
8天前
|
JavaScript 应用服务中间件 nginx
VUE3项目启动过程中遇到的问题记录
VUE3项目启动过程中遇到的问题记录
20 0
|
26天前
|
JavaScript 前端开发
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
报错:关于Vue项目下载swiper插件时没有dist文件夹的问题
|
29天前
|
前端开发 JavaScript 测试技术
Vue3+Vite+TypeScript常用项目模块详解(下)
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
|
29天前
|
JavaScript 前端开发 API
Vue3+Vite+TypeScript常用项目模块详解
现在无论gitee还是github,越来越多的前端开源项目采用Vue3+Vite+TypeScript+Pinia+Elementplus+axios+Sass(css预编译语言等),其中还有各种项目配置比如eslint 校验代码工具配置等等,而我们想要进行前端项目的二次开发,就必须了解会使用这些东西,所以作者写了这篇文章进行简单的介绍。
Vue3+Vite+TypeScript常用项目模块详解
|
30天前
|
开发框架 JavaScript 前端开发
深入探讨Vue.js核心技术及uni-app跨平台开发实践
深入探讨Vue.js核心技术及uni-app跨平台开发实践
29 0

相关产品

  • 云迁移中心