微信小程序内嵌vue项目实现页面自定义分享完整示例代码

如题，微信小程序内嵌vue2的h5项目，要实现H5页面自定义分享，具体操作如下：

一. H5部分

1. public/index.html引用微信jssdk：

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

2. 封装wechat.js处理向向小程序传递分享参数的相关业务逻辑：

// src/assets/js/utils/wechat.js
/**
 * 判断是否在微信小程序 web-view 环境中
 */
export const isMiniProgramWebView = () => {
  const userAgent = window.navigator.userAgent.toLowerCase();
  // 微信小程序 web-view 的 UA 包含 "miniprogram"
  return userAgent.includes('miniprogram');
};

/**
 * 向小程序发送消息（封装 postMessage）
 * @param {Object} data - 要传递给小程序的数据（必须是可序列化的对象）
 */
export const postMessageToMiniProgram = (imgUrl, title) => {
  if (isMiniProgramWebView() && window.wx?.miniProgram?.postMessage) {
    try {
      let shareData = {
        share_title: title || document.title,
        share_img_url: imgUrl,
        share_page_url: location.href,
      }
      window.wx.miniProgram.postMessage({
        data: shareData, // 核心：传递的数据（会被小程序接收）
      });
      console.log('H5 向小程序发送消息成功：', shareData);
    } catch (error) {
      console.error('H5 向小程序发送消息失败：', error);
    }
  } else {
    console.warn('当前非小程序 web-view 环境，无法发送消息');
  }
};

注：postMessageToMiniProgram方法接收两个参数imgUrl和title，imgUrl必传，title可选，如果有就使用，没有就取页面标题。

同样，我们这里直接取页面当前真实的url，这样页面调用中就不需要单独传了。如果不能直接以当前页面真实链接作为分享链接，那可以对这个方法增加页面url的参数。

3. 页面调用：

import { postMessageToMiniProgram } from '@/assets/js/utils/wechat';

分享指定图片：

mounted() {
  //分享参数上传,分享图片为指定图片
  postMessageToMiniProgram("https://www.xxx.com/ihg/shareImg.jpg")
}

分享接口获取的图片，需要对数据进行监听：

watch: {
  banner(n, o) {
    //分享参数上传
    postMessageToMiniProgram(this.banner)
  }
}

如上，h5端的相关改造已经完成了。

二. 小程序端

1. 页面模板

<!--package/view_h5/index.wxml-->
<view>
    <web-view src="{{ url }}" bindmessage="onWebViewInvoke" />
</view>

脚本文件：

// package/view_h5/index.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        url: "",
        shareConfig: ""
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        let {
            url
        } = options
        url = decodeURIComponent(url)
        this.setData({
            url: url
        })
    },
    onShareAppMessage() {
        const {
            shareConfig
        } = this.data;
        // 默认配置（防止无参数时报错）
        const defaultConfig = {
            share_title: "XX商城",
            share_img_url: "/images/default-share.jpg", // 小程序本地默认图片
            share_page_url: "/pages/index/index" // 小程序默认页面
        };
        // 合并配置（H5 传递的参数优先）
        const finalConfig = {
            ...defaultConfig,
            ...shareConfig
        };

        return {
            title: finalConfig.share_title, // 分享标题（用 H5 传递的）
            imageUrl: finalConfig.share_img_url, // 分享图片（用 H5 传递的）
            // 分享路径：仅使用 share_page_url（注意：需转义特殊字符，如 #）
            path: `/package/view_h5/index?url=${encodeURIComponent(finalConfig.share_page_url)}`,
            success: () => wx.showToast({
                title: '分享成功'
            }),
            fail: (err) => console.error('分享失败：', err)
        };
    },
    onWebViewInvoke(e) {
        const messages = e.detail.data;
        messages.forEach(msg => {
            // 存储参数到页面数据（供分享时使用）
            this.setData({
                shareConfig: msg
            });
        });
    },
})

如上，就是微信小程序内嵌H5的完整示例了。当然这只是一种可行的实现方式，不同人写法不同，可以按照自己熟悉的方式去写。