hookehuyr

feat(weapp-pay-bridge): 将支付消息通信改为直接跳转小程序支付桥页

重构支付触发逻辑,从使用 `postMessage` 发送消息给 WebView 容器,改为直接调用 `wx.miniProgram.navigateTo` 跳转到外层小程序的支付桥页。支付桥页 URL 已包含订单 ID、回调参数及提示文本,以支持自动拉起支付并处理结果回调。
......@@ -2,9 +2,9 @@
<div class="weapp-pay-bridge-page">
<div class="hero-card">
<div class="eyebrow">WebView 支付测试</div>
<h1 class="title">从 H5 跳转到小程序支付测试页</h1>
<h1 class="title">从 H5 跳转到小程序支付页</h1>
<p class="desc">
这个页面用于在小程序 WebView 中点击按钮后,直接跳到外层小程序的支付测试页,并自动尝试拉起微信支付弹框。
这个页面用于在小程序 WebView 中点击按钮后,直接跳到外层小程序的原生支付桥页,并在桥页里自动拉起微信支付弹框。
</p>
</div>
......@@ -32,10 +32,10 @@
/>
<p class="hint">建议使用未支付且可以正常返回支付参数的测试订单。</p>
<div class="path-box">
<div class="path-label">发给小程序 WebView 容器的消息</div>
<div class="path-value">{{ payMessagePreview }}</div>
<div class="path-label">将跳转的小程序支付桥页</div>
<div class="path-value">{{ payBridgePagePath }}</div>
</div>
<button class="primary-btn" @click="sendPayMessage">点击触发小程序支付测试</button>
<button class="primary-btn" @click="goToMiniProgramPayBridge">点击触发小程序支付测试</button>
</div>
<div class="panel">
......@@ -59,12 +59,9 @@ const isMiniProgramWebView = computed(() => {
return navigator.userAgent.includes('miniProgram');
});
const payMessagePreview = computed(() => {
return JSON.stringify({
type: 'pay_test',
order_id: orderId.value || '',
source: 'weapp-pay-bridge',
});
const payBridgePagePath = computed(() => {
const normalizedOrderId = encodeURIComponent(orderId.value || '');
return `/pages/pay-bridge/index?order_id=${normalizedOrderId}&auto_back=1&back_delay=2&back_mode=navigateBack&back_url=${encodeURIComponent('/pages/webview-preview/index')}&success_text=${encodeURIComponent('支付成功,正在返回 WebView 页面。')}&cancel_text=${encodeURIComponent('已取消支付,正在返回 WebView 页面。')}&fail_text=${encodeURIComponent('支付未完成,正在返回 WebView 页面。')}&source=weapp-pay-bridge`;
});
const ensureOrderId = () => {
......@@ -75,26 +72,29 @@ const ensureOrderId = () => {
return false;
};
const sendPayMessage = () => {
const goToMiniProgramPayBridge = () => {
if (!ensureOrderId()) return;
if (!isMiniProgramWebView.value) {
resultText.value = '当前不是小程序 WebView 环境,postMessage 不会发给小程序。';
resultText.value = '当前不是小程序 WebView 环境,无法跳转到外层小程序支付桥页。';
showToast('请在小程序 WebView 中打开此页');
return;
}
try {
wx.miniProgram.postMessage({
data: {
type: 'pay_test',
order_id: orderId.value,
source: 'weapp-pay-bridge',
wx.miniProgram.navigateTo({
url: payBridgePagePath.value,
success: () => {
resultText.value = `已请求跳转到小程序支付桥页:${payBridgePagePath.value}`;
},
fail: (error) => {
const message = error?.errMsg || '跳转失败';
resultText.value = `调用小程序支付桥页失败:${message}`;
showToast(message);
},
});
resultText.value = '已发送支付请求消息给当前小程序 WebView 容器。';
} catch (error) {
const message = error?.message || '发送 postMessage 失败';
const message = error?.message || '调用 wx.miniProgram.navigateTo 失败';
resultText.value = message;
showToast(message);
}
......