通过 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);
   

嵌入后播放器无法全屏怎么办？ #

• 在设置 iframe 元素的属性时，添加 allowfullscreen="true" 和 allow="fullscreen"。详见嵌入方法。
• 对于 iOS 移动端而言，您可在嵌入链接中，拼接以下参数：
  • systemFullScreen=true：实现系统全屏。
  • cssFullScreen=true：实现样式全屏。

嵌入后连麦时，没有摄像头和麦克风的权限，怎么办？ #

请参考嵌入方法，检查 <iframe> 标签中，是否已在 allow 属性中声明摄像头和麦克风权限。例如：

<iframe
  allow="camera; microphone">
</iframe>

如果您已有 allow 配置，请补充 camera 和 microphone，例如：

<iframe
  allow="fullscreen; autoplay; camera; microphone">
</iframe>

在微信小程序中通过 <iframe> 嵌入观看页后，从电脑端打开时画面显示异常，怎么办？ #

请参考嵌入方法，检查 <iframe> 的 src 属性中是否已指定终端类型为移动端（platform=mobile）。在微信小程序场景下，建议显式指定为移动端。例如：

<iframe src="https://live.byteoc.com/5528/37****9?platform=mobile"></iframe>