解决uniapp项目中webview页面无法通过postMessage向小程序传递参数的问题-七爪网

当前，在数字化浪潮中，小程序与H5页面的结合成为众多业务场景的必需。但将H5页面嵌入小程序，实现数据共享与传递的过程，既繁琐又至关重要。许多开发者在此环节遇到难题，而这正是本文要探讨的核心所在。

小程序中web-view组件的重要性

web-view组件是小程序与外部h5页面沟通的桥梁。在开发过程中，它相当于一个小窗口，让用户得以浏览h5内容。首先，组件的属性设定了与h5页面的交互模式。正如文档中详述的，这些属性决定了数据的传输方式等。其次，它只在特定操作时才会发出相关消息，比如后退、分享等，了解这些规律有助于开发工作的针对性。

在开发阶段，对这些特性的掌握至关重要。不少企业在实际的项目开发中，因开发者未能准确把握特性而匆忙开始，最终引发了数据传输的紊乱。以一家电商的小程序为例，其中嵌入的商品详情h5页面在分享时出现了数据错误。

原生小程序开发流程参考

在使用微信开发者工具进行原生开发的过程中，调试路径的选择至关重要。通常，人们会选用本地服务路径来进行调试。首先，我们需要关注.wxml文件，它定义了页面的结构布局和元素。以资讯类小程序为例，这个文件决定了文章标题和图片等信息的呈现方式。

.js文件至关重要。其中汇聚了众多逻辑处理功能。就好比在小型工具程序中，.js文件负责处理用户的各种操作，比如点击、滑动等，并对这些操作产生的数据进行计算。若.wxml和.js文件的开发未能良好配合，便可能导致页面显示混乱或功能无法正常运作。

框架开发下小程序页面代码规范

在用框架制作小程序的过程中，页面的编程规则与直接编写有所不同。框架编程有它自己的规则和顺序。比如，某些框架会规定特定的标记样式。在各个行业的小程序制作中，都少不了使用框架。以教育类小程序为例，若采用框架进行开发，编写代码时就必须遵循其页面编程的规则。


<view class="container">
  <web-view src="http://localhost:8080/#/webview" bindmessage="getMessage"></web-view>
</view>

若代码编写不遵循标准，兼容性问题便可能频繁出现。举例来说，在开发一款旅游类小程序时，若未依照框架中的代码布局规则进行编写，那么在部分手机型号上，用户可能会遇到页面布局混乱的情况。

Page({
  data:{
    shareData:""
  },
  getMessage(e){
    console.log("getMessage:e>>>",e)
    this.shareData = e.detail.data[e.detail.data.length - 1];
  },
  onShareAppMessage(){
    let path=`/pages/webView/webView?link=${this.shareData.url}`
    return{
      title:this.shareData.title,
      path,
      imageUrl:this.shareData.imgUrl
    }
  }
})

h5端使用微信小程序SDK的数据传递

若要在h5平台与小程序间实现数据互动，可以考虑使用微信小程序的SDK。SDK中的wx..()函数有助于数据的传输。在众多互联网企业的业务实践中，若需将h5广告页面嵌入小程序，并实现点击数据的传递，这一函数便是关键所在。

不过，这一过程并非毫无瑕疵。部分开发者未留意SDK版本间的兼容性，导致在使用过程中出现故障。例如，旧版SDK可能不支持某些新增功能，这在之前某金融产品的h5和小程序结合案例中就有发生。

<template>
  <view>
    <web-view :src="src" @message="getMessage"></web-view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      src: "http://localhost:8080/#/webview",
      sharePath: "", //二次转发的路径
      shareTitle: "", //二次转发的标题
      shareImgUrl: "" //二次转发的缩略图
    };
  },
  async onLoad(options) {
     this.src = decodeURIComponent(options.link);
  },
  methods: {
    getMessage(e) {
      console.log("getMessage:data :>> ", e.detail.data);
      let data = e.detail.data[e.detail.data.length - 1];
      this.shareTitle = data.shareTitle;
      this.shareImgUrl = data.shareImgUrl;
      this.sharePath = `${data.page}?link=${data.shareUrl}&invited_uid=${this.uid}&dl_id=${this.dl_id}`;
    },
    //小程序分享
    onShareAppMessage() {
      console.log("分享的链接 :>> ", this.sharePath);
      return {
        title: this.shareTitle,
        imageUrl: this.shareImgUrl,
        path: this.sharePath
      };
    }
  }
};
</script>

h5端使用uni的SDK情况

在进行uni框架开发时，h5端操作需留意诸多细节。必须引入uni.js文件，才能正常使用其方法。但下载的文件可能面临被更新的风险。曾有一家初创公司在开发时忽视了这一点，导致uni方法调用完全失灵。

在修改代码以避免对象被覆盖时，必须确保每个字符都完全一致。比如，在某个数码产品推广的小程序和h5页面联合开发的过程中，由于没有实现完全字符的匹配，导致数据传输完全中断。

wx.miniProgram.postMessage({
	data: {
		page: "/pages/webView/webView",
		url: "https://www.baidu.com",
	},
});

检查参数接收不到的要点

若在应用相关方法时未能获取到所需参数，开发者需逐一检查。这包括从h5端的调用过程，到小程序端的接收逻辑等环节。比如，当一款社交小程序嵌入h5聊天界面却无法接收到聊天数据时，问题可能就出在h5端的数据发送格式与小程序端的接收格式不一致。

阅读全文后，你有没有在小程序与h5融合开发过程中遇到类似情况？不妨点个赞、转发一下，并在评论区分享一下你的观点。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webview</title>
  </head>
  <body>
    <div id="app">分享页面给好友</div>
    
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
	<script type="text/javascript">
	document.getElementById("app").onclick=()=>{
		console.log('clickHandle :>> ', );
		wx.miniProgram.getEnv(function (res) {
			console.log("当前环境：" + JSON.stringify(res));
		});
		wx.miniProgram.postMessage({
			data: {
				page: "/pages/webView/webView",
				url: "https://www.baidu.com",
			},
		});
	}
    </script>
  </body>
</html>

相关文章

微信