如题，微信小程序内嵌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) } }
4.非自定义分享页面统一添加上传特定的信息，小程序端接收到这个特定的信息就不在对当前页面进行自定义分享（通常都是走小程序的默认分享）
//router.js router.beforeEach((to, from, next) => { //非特定页面分享传空值给小程序 if (!['Home', 'Cate', 'GoodsDetail'].includes(to.name)) { window.wx.miniProgram.postMessage({ data: { share: 'default' } }); } next() });
注：
之所以要加这段代码，是因为如果用户访问了没有自定义分享的页面，在分享的时候依然会触发webview的bindmessage事件，但拿到的是上一次h5自定义分享页面postmessage的数据，直接导致调起分享的时候分享出去的是上一次访问过的自定义分享页面了。
所以，即使是不需要自定义分享的页面，也要postmessage给小程序，让小程序知道这个页面不需要自定义分享（通常都是走小程序的默认分享了）。
如上，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的完整示例了。当然这只是一种可行的实现方式，不同人写法不同，可以按照自己熟悉的方式去写。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。