h5页面如下:当前链接已经配置了业务域名
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <title></title> -->
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</head>
<body>
<div class="container">
<div class="header">
<h1>报名成功</h1>
<button id="jumpBtn">返回首页test</button>
<button onclick="shareMiniProgramPage()">分享小程序页面</button>
</div>
<div class="imgbox">
<!-- <p>关注【发球局 Girt Glee】公众号</p> -->
<!-- <p>为您推送最新活动动态</p> -->
<div class="imgItem">
<img src="https://gritglee.net/qrcode.jpg" style="width: 170px;height:170px;"/>
<p>长按关注【发球局】公众号</p>
<p>关注公众号,为您推送报名通知、活动订阅通知等最新活动动态</p>
</div>
</div>
</div>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
document.getElementById('jumpBtn').addEventListener('click', function() {
// 判断是否在小程序环境中
if (typeof wx !== 'undefined' && wx.miniProgram) {
// 直接跳转
wx.miniProgram.switchTab({
url: '/pages/index/index', // 替换为你的目标页面路径
success: () => {
console.log('跳转成功');
},
fail: (err) => {
console.error('跳转失败:', err);
}
});
} else {
window.location.href = window.location.href + '?jumpTo=/pages/home/index'
// 非小程序环境处理
alert('请在小程序中打开');
}
})
function shareMiniProgramPage() {
if (typeof wx !== 'undefined' && wx.miniProgram) {
// 方式 2:通过 postMessage 发送数据,由小程序 onMessage 监听处理
wx.miniProgram.postMessage({
data:[{
action: 'share',
path: '/pages/detail/detail', // 目标页面路径
title: '分享标题', // 可选
imageUrl: '分享图片URL' // 可选
}]
});
} else {
alert('请在微信小程序中打开');
}
}
</script>
</body>
</html>
小程序内部:/pages/signup/paySuccess页面使用了webview组件,代码如下:
<template>
<view class="pay-success-page">
<web-view
:src="webViewUrl"
bindmessage="handleWebViewMessage"
></web-view>
</view>
</template>
<script>
export default {
data() {
return {
webViewUrl: "https://gritglee.net/qrcode.html" // 存储公众号关注页面的URL
};
},
// 在微信小程序中,需要在页面 onLoad 中处理
onLoad() {},
computed: {
activity_info() {
return this.$store.getters['activity/activity_info']
},
},
onShareAppMessage() {
let shareImg ='';
if(this.activity_info.multimedia && this.activity_info.multimedia.length){
shareImg = this.activity_info.multimedia[0].url
}else{
shareImg = '/static/share.png'
}
return {
title: '发球局',
path: `/pages/detail/detail?from=share&activityId=${this.activity_info.activity_id}`, // 分享路径,可带参数
imageUrl:shareImg, // 可选,分享图片
shareTicket: true
}
},
methods: {
handleWebViewMessage(e) {
console.log(e,"paysuccess")
const { action, path, title, imageUrl } = e.detail.data[0];
if (action === 'share') {
// 跳转到目标页面并设置分享信息
wx.navigateTo({
url: path,
success: () => {
// 在目标页面设置分享信息(需目标页面已配置 onShareAppMessage)
console.log('跳转成功,分享数据:', { title, imageUrl });
}
});
}
},
}
}
</script>
这里handleWebViewMessage方法没有进来,为什么
webview文档看过没有?