通过 iframe 嵌入观看页,且在商品卡片菜单中打开了微信小程序跳转开关并正确设置了小程序原始 ID,但观众在移动端点击商品卡片,仍然无法跳转至微信小程序页面。
微信提供的开放标签 wx-open-launch-weapp
在 iframe 嵌入时无法正常工作。
在您的 H5 应用中,接入并初始化微信 JSSDK。详见微信 JSSDK 说明文档。
指定开放标签 wx-open-launch-weapp
,并按需配置 API。详见微信开放标签说明文档。
在 H5 应用中监听 postMessage
事件。
事件消息体格式
{
action: 'OPEN_MINIPROGRAM'
data: {
miniAppId: 'xxxx', // 控制台或服务端 API 配置的微信小程序原始 ID
miniAppDirectUrl: 'xxxxxxx', // 控制台或服务端 API 配置的微信小程序链接
}
}
示例代码
const handlerPostMessage = event => {
const {
action = '',
} = event.data ?? {};
if (
action === 'OPEN_MINIPROGRAM'
) {
const {miniAppId = '', miniAppDirectUrl = ''} = event.data.data ?? {};
// 校验微信小程序原始 ID 和链接是否为有效值
if (!miniAppDirectUrl || !miniAppId) {
return;
}
// 请自行实现唤起微信小程序的逻辑
// 该示例中,以微信浏览器使用开放标签 wx-open-launch-weapp 唤起小程序为例。观众点击打开小程序按钮,即可跳转至微信小程序页面
<wx-open-launch-weapp username={miniAppId} path={miniAppDirectUrl}>
<script type="text/wxtag-template">
<style>.btn { display: flex;align-items: center;width: 100px;height: 100px; background: blue; }</style>
<button class="btn">打开小程序</button>
</script>
</wx-open-launch-weapp>
}
};
// 监听 postMessage 事件
window.addEventListener('message', handlerPostMessage);
iframe
元素的属性时,添加 allowfullscreen="true"
和 allow="fullscreen"
。详见嵌入方法。systemFullScreen=true
:实现系统全屏。cssFullScreen=true
:实现样式全屏。