通过 iframe 嵌入观看页后，在移动端点击商品卡片无法跳转至微信小程序页面怎么办？

问题现象

通过 iframe 嵌入观看页，且在商品卡片菜单中打开了微信小程序跳转开关并正确设置了小程序原始 ID，但观众在移动端点击商品卡片，仍然无法跳转至微信小程序页面。

可能原因

微信提供的开放标签 wx-open-launch-weapp 在 iframe 嵌入时无法正常工作。

解决方案

1. 在您的 H5 应用中，接入并初始化微信 JSSDK。详见微信 JSSDK 说明文档。

2. 指定开放标签 wx-open-launch-weapp，并按需配置 API。详见微信开放标签说明文档。

3. 在 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);
   

嵌入后无法全屏怎么办？

• 当页面含有全屏功能时，建议添加 allowfullscreen=true 允许 iframe 全屏。
• iOS 移动端默认采用样式全屏，用户可以通过在直播链接后拼接 systemFullScreen=true（系统全屏），cssFullScreen=true（样式全屏）来决定播放器全屏方式。