uniapp微信小程序使用webview嵌套uniappH5并实现通信详细步骤

 更新时间:2024年05月16日 09:15:49   作者:Hlu_xx  
在开发微信小程序的时候,我们有时候会遇到将H5页面嵌入到小程序页面中的情况,这篇文章主要给大家介绍了关于uniapp微信小程序使用webview嵌套uniappH5并实现通信的详细步骤,需要的朋友可以参考下

前言

公司业务需要实现微信小程序调起手机文件管理实现pdf上传,但是微信不支持这种操作,使用wx.chooseMessageFile或者uni.chooseMessageFile,只能调起微信聊天框选择文件,经过多方研究了解,最后决定使用webview嵌套H5的方式来实现,共耗时两天半,以下为各种踩坑记录,希望能帮到大家(看完整代码直接拉到最后)。

一、技术准备与实现方案

因为之前已经写好了相应的上传页面与逻辑,在看了官网的webview示例后,就想着能够直接使用之前的界面,不再单独写html(真不想写T_T),正好项目(uniapp vue3+ts)是需要发布H5的,于是便开始探究如何自己调自己。下面为具体实现步骤(非最终代码):

1.1 将项目发布为H5可以外网访问。

1.2 小程序中使用webview嵌入H5对应界面。

有其他方式可以实现通信(wx有专门的postMessage),笔者这里直接将参数带在url后面,再通过@message方法接收参数回调实现通信(实际上传逻辑都在H5完成了,并没有用到回调)

<template>
  <view class="box">
    <web-view :webview-styles="webviewStyles" :src=webViewUrl @message="getMessage"></web-view>
  </view>
</template>
const webViewUrl = ref<string>('');
//小程序向H5传参带在url后面
webViewUrl.value = `你的H5页面具体访问路径/webview-upload?data=${encodeURIComponent(JSON.stringify(testData))}`
//接收回调参数
const getMessage = (e: any) => {
  console.log(e, 'getMessage');
}

1.3 H5界面获取参数。

onLoad(() => {
  //获取地址栏传参
  const paraString = window.location.href;
  const queryData = JSON.parse(decodeURIComponent(paraString.split("=")[1]));
  console.log(queryData, 'queryData');
})

1.4 H5回调传参

uni.postMessage定义回调参数,uni.navigateBack销毁界面触发回调

const confirm = () => {
  console.log('confirm');
   uni.postMessage({
     data: {
       action: 'message'
     }
   });
   uni.navigateBack({
     delta: 1
   });
  }

以上4个步骤就是小程序调自身H5的所有步骤了,但是,你以为实现了吗,还有一堆问题等着解决呢。

二、问题处理

2.1 uni-webview.js的引入

笔者本以为在uniapp中就可以直接调用uni的方法,结果在调用uni.postMessage就会报错:类型“Uni”上不存在属性“postMessage”。ts(2339)

报错

一番查看后发现uni确实没有导出postMessage方法,再次看看文档,发现需要引入uni-webview.js文件,但是在引入过后也依然不能调用,人麻了。

2.2 修改uni-webview.js源码

花费了不少时间,最后发现引入的uni-webview.js文件也导出了uni对象,会被uniapp本身的uni对象覆盖,改源码吧,把uni-webview.js下载到本地,全局搜一下uni,把定义的uni与导出的uni改为webUni,这是笔者修改过的uni.webview.1.5.5.js文件
然后把文件放在本地(笔者放在了src/static/js下),在index.html文件中按官方文档正常引入

<!-- 引入微信小程序兼容文件,官网上还有其他平台的兼容文件,这里只用了微信小程序,所以就不判断环境了 -->
	<script type="text/javascript">
      document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
    </script>
<!-- 需要把 uni.webview.1.5.5.js 下载到自己的服务器 -->
    <script type="text/javascript" src="./src/static/js/uni.webview.1.5.5.js"></script>

然后就可以使用postMessage了,1.4中的代码就可以改为

const confirm = () => {
  webUni.log('confirm');
   webUni.postMessage({
     data: {
       action: 'message'
     }
   });
   webUni.navigateBack({
     delta: 1
   });
  }

2.3 ts类型报错

别急还有ts类型报错

笔者这里采用了一种最简单的办法,在全局声明一个名为 webUni 的未定义与初始化的变量,引入的uni-webview.js中的同名变量会覆盖webUni :

declare var webUni: any;
   webUni.postMessage({
     data: {
       action: 'message'
     }
   });
   webUni.navigateBack({
     delta: 1
   });
  }

2.4 打包警告

你以为完了吗?打包警告了解一下

这个警告只在build的时候出现,dev是没有的,所以本地运行就可以,打包上线就没效,根据提示查找后发现,使用了JS的模块化,将type="text/javascript"替换type='module’属性就能够引入成功,解决报错。
所以2.2的引入代码要改为

<!-- 需要把 uni.webview.1.5.5.js 下载到自己的服务器 -->
    <script type="module" src="./src/static/js/uni.webview.1.5.5.js"></script>

2.5 配置webview合法域名

总该完了吧,代码层面确实没了,但是上线小程序请求webview时,会报错无法访问,但是开启调试模式就可以访问,大家肯定一眼就知道啥问题了吧。

没错,就是没配webview合法域名。所以登录小程序管理平台==>开发管理==>业务域名,添加webview合法域名就可以了。
添加不上可以查看详情,需要下载授权文件放在H5根目录,注意不是项目的根目录,是打包发布在服务器的根目录,要通过https://配置域名/授权文件名, 这种方式能能接访问到授权文件,这样就能添加上了。

三、最后所有代码

1.index引入uni.webview.js

<!-- 引入微信小程序兼容文件,官网上还有其他平台的兼容文件,这里只用了微信小程序,所以就不判断环境了 -->
	<script type="text/javascript">
      document.write('<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"><\/script>');
    </script>
<!-- 需要下载 uni.webview.1.5.5.js 并修改源码,前面笔者有提供修改文件 -->
    <script type="module" src="./src/static/js/uni.webview.1.5.5.js"></script>

2.小程序使用webview访问H5并传参,定义回调

<template>
  <view class="box">
    <web-view :webview-styles="webviewStyles" :src=webViewUrl @message="getMessage"></web-view>
  </view>
</template>
const webViewUrl = ref<string>('');
//小程序向H5传参带在url后面
webViewUrl.value = `你的H5页面具体访问路径/webview-upload?data=${encodeURIComponent(JSON.stringify(testData))}`
//接收回调参数
const getMessage = (e: any) => {
  console.log(e, 'getMessage');
}

3.H5获取参数 并回调进行通信

onLoad(() => {
  //获取地址栏传参
  const paraString = window.location.href;
  const queryData = JSON.parse(decodeURIComponent(paraString.split("=")[1]));
  console.log(queryData, 'queryData');
})

declare var webUni: any;
   webUni.postMessage({
     data: {
       action: 'message'
     }
   });
   webUni.navigateBack({
     delta: 1
   });
  }

真是一场酣畅淋漓的踩坑之旅T_T…

附:小程序和H5之间传参

小程序和H5之间互相跳转,我们如果需要传递参数的话可以通过 url 路径拼接的方式来传递参数;

url:'/page/index?id=1'

参数传递之后,下面是参数的获取:
1、微信小程序

onLoad:function(options){
	console.log(options)
}

2、H5

mounted(){
	let name = this.getQueryString('name')
	console.log(name )
},
methods:{
	//解析url获取指定参数的值
	getQueryString(name)  {
	    const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
	    const search = window.location.search.split('?')[1] || '';
	    const r = search.match(reg) || [];
	    return r[2];
   }
}

当有差异化功能时就可以通过微信sdk的接口进行当前是否小程序/公众号的判断,然后进行webview新页面的开发。

/ 判断是否是小程序端
    isMiniPrograms() {
      var isMiniprogram = false;
      // 判断是否是小程序打开
      wx.miniProgram.getEnv(res => {
        console.log(res.miniprogram)
        if (res.miniprogram) {
          //在小程序中
          isMiniprogram = true;
        }
      });
      return isMiniprogram;
    }

总结

到此这篇关于uniapp微信小程序使用webview嵌套uniappH5并实现通信的文章就介绍到这了,更多相关webview嵌套uniappH5实现通信内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍

    vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍

    vue如何简单的实现弹框,遮罩,点击其他区域关闭弹框, 简单的思路是以一个div作为遮罩,这篇文章给大家详细介绍了vue实现弹框遮罩点击其他区域弹框关闭及v-if与v-show的区别介绍,感兴趣的朋友一起看看吧
    2018-09-09
  • 关于element ui的菜单default-active默认选中的问题

    关于element ui的菜单default-active默认选中的问题

    这篇文章主要介绍了关于element ui的菜单default-active默认选中的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vue3中hooks的简介及用法教程

    vue3中hooks的简介及用法教程

    vue3 中的 hooks 就是函数的一种写法,就是将文件的一些单独功能的js代码进行抽离出来,放到单独的js文件中,或者说是一些可以复用的公共方法/功能,这篇文章主要介绍了vue3中hooks的简介及用法,需要的朋友可以参考下
    2023-01-01
  • Vuex中mutations与actions的区别详解

    Vuex中mutations与actions的区别详解

    下面小编就为大家分享一篇Vuex中mutations与actions的区别详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue日期组件 支持vue1.0和2.0

    vue日期组件 支持vue1.0和2.0

    这篇文章主要为大家详细介绍了vue日期组件,支持vue1.0和2.0,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • Vue中的watch是什么以及watch和computed的区别

    Vue中的watch是什么以及watch和computed的区别

    这篇文章主要介绍了Vue中的watch是什么以及watch和computed的区别说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • vue中如何给el-table-column添加指定列的点击事件

    vue中如何给el-table-column添加指定列的点击事件

    elementui中提供了点击行处理事件,下面这篇文章主要给大家介绍了关于vue中如何给el-table-column添加指定列的点击事件,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • ant design vue中表格指定格式渲染方式

    ant design vue中表格指定格式渲染方式

    这篇文章主要介绍了ant design vue中表格指定格式渲染方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-10-10
  • Vue.js的Mixins使用方式

    Vue.js的Mixins使用方式

    Vue.js的Mixins功能允许封装可复用的组件选项,实现代码复用和模块化,Mixins可以包含数据、方法、生命周期钩子等组件选项,使用时,Mixins中的选项会被混入组件中,优先级低于组件自身选项,优点包括代码复用、高灵活性和简单易用
    2024-09-09
  • vue如何批量引入组件、注册和使用详解

    vue如何批量引入组件、注册和使用详解

    这篇文章主要给大家介绍了关于vue如何批量引入组件、注册和使用的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05

最新评论