当前位置:   article > 正文

记一次微信小程序与webviewH5通信_小程序webview与h5通信

小程序webview与h5通信

背景

近期公司需要将H5网页嵌入到微信小程序内,这个仅需要引入webview即可:

<web-view :src="webViewUrl"></web-view>

但对于部分同学可能需要进一步的开发,例如二者之间数据传输,接下来为大家奉上自己的踩坑记录。

 实践

1、H5传递与微信小程序

首先在H5环境,我们想要与微信小程序通信,必须引入相关SDK,例如,我的微信小程序是由uniapp框架开发的,所以通信之前,我们需要将uniapp的SDK引入到我们的H5项目当中。下载地址

引用下载文件

  1. import uni from "@/public/uni.webview.1.5.4.js";
  2. //如果提示uni.postMessage 不是function,就在 uni.webview.1.5.4.js 里面将 uni 替换掉,如替换成 webUni(建议 查找 全选 替换)
  3. import webUni from "@/public/uni.webview.1.5.4.js";

随后我们便可以先检查当前环境

  1. webUni.getEnv(function(res) {
  2. console.log('当前环境:' + JSON.stringify(res));
  3. });

向小程序传递参数(window.postMessage)

根据官方文档说明,我们采用window.postMessage()

  1. const obj= {params: "传递参数"}
  2. window.postMessage({
  3. data: obj
  4. });

这时需要我们在webview标签加上@message属性,监听接收参数

  1. <template>
  2. <view class="">
  3. <web-view :src="webViewUrl" @message="handleMessage"></web-view>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. webViewUrl: 'http://localhost:80',
  11. }
  12. },
  13. methods: {
  14. handleMessage(event){
  15. console.log(event.detail.data);
  16. //打印结果
  17. //data:{params: "参数示例"}
  18. },
  19. },
  20. }
  21. </script>

这里要注意官方说明!!!

所以,在H5传递参数的方法中,要一并触发相关api

  1. const obj= {params: "传递参数"}
  2. window.postMessage({
  3. data: obj
  4. });
  5. //后退
  6. webUni.navigateBack({
  7. delta: 1
  8. });
  9. //组件销毁(也就是关闭页面)
  10. uni.redirectTo({
  11. url: 'test?id=1'
  12. });
  13. uni.reLaunch({
  14. url: 'test?id=1'
  15. });
  16. uni.switchTab({
  17. url: '/pages/index/index'
  18. });
  19. //分享
  20. uni.share()
  21. //根据自身情况选其一

 但在实际应用中,我们可能不会采用这种方法,因为想要触发@message事件,总是要在特定时机才可以,所以我们也可以选择更为直接的方法:路径传参

  1. //在H5界面编写
  2. //首先声明参数变量
  3. const params = {data: "Are you ok?"}
  4. //假如我们要跳转到小程序的login页面,我们可以这样做
  5. webUni.navigateTo({
  6. url: `/pages/login/login?message=${params}`,
  7. });
  8. //在小程序编写
  9. //login页面就可以在页面加载时接收路径参数
  10. onLoad(){
  11. const routes = getCurrentPages()
  12. const curParam = routes[routes.length - 1]
  13. const jsonString = decodeURIComponent(curParam.options.message);
  14. const data = JSON.parse(jsonString);
  15. console.log(data);
  16. //打印结果
  17. //params:{data: "Are you ok?"}
  18. },

 这样小程序便可以接收到H5传递的参数了。

2、微信小程序与H5通信

微信小程序传递参数给H5就相对简单了,例如我们的H5链接是localhost,我们就可以:

  1. <template>
  2. <view class="">
  3. <web-view :src="webViewUrl" @message="handleMessage"></web-view>
  4. </view>
  5. </template>
  6. <script>
  7. export default {
  8. data() {
  9. return {
  10. webViewUrl: 'http://localhot:3000',
  11. }
  12. },
  13. onShow(options) {
  14. //声明要传递给H5的参数
  15. let params = {
  16. data: "这是要给H5的参数"
  17. }
  18. this.webViewUrl = `http://localhot:3000?${JSON.stringify(params)}`
  19. },
  20. methods: {
  21. handleMessage(event){
  22. console.log(event.detail.data);
  23. }
  24. },
  25. }
  26. </script>

下面我们便可以在H5环境监听url的路径参数

  1. // 获取地址栏的查询字符串(不包括URL的域名和路径)
  2. const queryString = new URLSearchParams(window.location.search).toString();
  3. // 如果查询字符串不为空,则尝试解析它
  4. if (queryString) {
  5. //首先,使用decodeURIComponent来解码这个字符串
  6. const decodedString: string = decodeURIComponent(queryString);
  7. // 注意,这里末尾有一个'='号,需要移除它
  8. const jsonString = decodedString.slice(0, -1);
  9. // 现在,使用JSON.parse来解析JSON字符串
  10. const jsonObject = JSON.parse(jsonString);
  11. console.log("已接收到小程序的参数",jsonObject);
  12. }

至此,小程序与H5便实现了,相互通信。

总结

微信小程序与H5通信是在日常开发中总会遇到的场景,我第一次接触的时候,由于没有经验,走了不少弯路,所以在这里分享一下自己的经验,希望能帮助到正在学习的同学,如有不妥,也欢迎同学们或者大佬批判指正。

另外,顺便说明一下,我之所以遇到这种场景,是因为我们公司目前正在做一个H5发送订单到微信小程序调起支付的效果,所以,后续我还会继续分享自己提交订单实现微信支付的文章,欢迎关注。

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop博客】
推荐阅读
  

闽ICP备14008679号