小程序中嵌套的h5页面设置分享转发

最新推荐文章于 2025-11-19 11:57:51 发布

转载

最新推荐文章于 2025-11-19 11:57:51 发布 · 6k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/codeon/p/11510345.html

文章标签：

#javascript #ViewUI

本文介绍了如何在微信小程序中打开的H5页面实现自定义分享内容。通过H5与小程序通信，发送标题、图片和链接，进而设置小程序的转发信息。H5页面使用微信JS库检测是否在小程序环境中，并调用`wx.miniProgram.postMessage`发送数据。小程序端则通过`<web-view>`组件的`bindmessage`事件监听并处理接收到的数据，用于设置`onShareAppMessage`的返回值。

场景描述：当在小程序中打开h5页面时，希望小程序的转发出去的标题，图片，跳转link可以通过h5通信实现自定义。

实现方式：通过h5给小程序通信，发送标题，图片，跳转link等信息，让小程序设置分享。

h5发送给小程序通信代码
引用微信js1.3.2以上才支持，<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
判断h5是在小程序环境中打开代码：

  //判断是否是小程序环境
    function doMiniProgram(callback) {
        try {
            //小程序环境设置分享
            var ua = window.navigator.userAgent.toLowerCase();
            //