微信小程序中嵌入「视频号内容」和「公众号文章」_小程序里面 嵌入 微信视频直播怎么弄
文章目录
- 前言
- 扩展
-
- ✅ 实现目标
- 🧭 前提条件
- ✅ 实现方式：使用 `navigateToMiniProgram` 跳转视频号页面
-
- 🎯 示例跳转路径：
- ✅ UniApp 示例代码（Vue 3）
- 📌 如何获取 `scene=xxx` 参数？
- 🚫 限制说明
- ✅ 替代方案
前言
在微信小程序中嵌入「视频号内容」和「公众号文章」不能像 Web 页面那样直接通过 iframe 插入，但可以使用官方提供的组件和跳转机制间接实现。以下是完整实现方案和限制说明：
📺 一、嵌入视频号内容（视频 / 直播）
微信小程序 不能直接播放视频号内容，但支持跳转到视频号相关页面或唤起视频号。
✅ 方案一：使用
适合跳转到已绑定的视频号主页。
<button open-type=\"openOfficialAccount\">进入视频号主页</button>⚠️ 注意：
- 仅能跳转到与当前小程序绑定的公众号或视频号主页
- 无法跳转到其他账号的视频号内容
✅ 方案二：跳转到公众号文章内嵌的视频号内容
- 如果公众号文章中已嵌入视频号内容（如直播、短视频），
- 你可以引导用户打开公众号文章（参考下一节），间接访问视频号。
📄 二、嵌入公众号文章
✅ 步骤 1：获取公众号文章链接
使用公众号后台发布文章后，会获得一个链接类似：
https://mp.weixin.qq.com/s/abcdefghijk✅ 步骤 2：在小程序中用
<web-view src=\"https://mp.weixin.qq.com/s/abcdefghijk\"></web-view>⚠️
web-view只支持在已关联公众号的小程序中使用，且公众号文章必须为「白名单」。
✅ 步骤 3：配置公众号白名单（非常关键）
在【微信公众平台】→【小程序管理】→【功能设置】→【业务域名】中：
- 添加
https://mp.weixin.qq.com到业务域名白名单 - 后台代码中发起 HTTPS 请求验证域名（一次即可）
✅ 进阶：跳转公众号文章并返回小程序
公众号文章中可通过设置返回小程序的链接按钮或跳转卡片：
<a href=\"weixin://dl/business/?t=xxxxx\">返回小程序</a>🚫 限制说明
web-view 域名✅ 建议交互方案
扩展
虽然微信没有直接暴露给开发者“跳转任意视频号内容”的能力，但如果你的视频号视频是你自己的、与你的小程序主体一致的账号发布的，就可以使用微信提供的“schema”跳转方式：
✅ 实现目标
在 UniApp + Vue3 项目中，小程序内点击按钮跳转打开视频号视频。
🧭 前提条件
- 视频号与小程序属于同一个主体
- 视频号内容已发布
- 拿到对应的视频号 schema 参数（如下所示）
✅ 实现方式：使用 navigateToMiniProgram 跳转视频号页面
微信支持通过如下 appid + path 跳转到视频号视频：
🎯 示例跳转路径：
wx.navigateToMiniProgram({ appId: \'wxeb490c6f0f9e1b03\', // 视频号直播/短视频官方AppId path: \'pages/video/channel/index.html?scene=xxxxxxxxxxxx\', // 具体跳转路径（含 scene）})✅ UniApp 示例代码（Vue 3）
<template> <view class=\"container\"> <image src=\"https://example.com/video-cover.jpg\" mode=\"aspectFill\" style=\"width: 100%; height: 200px\" @tap=\"openVideoChannel\" /> <button @tap=\"openVideoChannel\">打开视频号视频</button> </view></template><script setup lang=\"ts\">function openVideoChannel() { uni.navigateToMiniProgram({ appId: \'wxeb490c6f0f9e1b03\', // 视频号官方 AppID path: \'pages/video/channel/index.html?scene=xxxxxxxxxxx\', // 视频号跳转路径（重点） success() { console.log(\'跳转成功\') }, fail(err) { console.error(\'跳转失败\', err) } })}</script>📌 如何获取 scene=xxx 参数？
你需要：
- 登录「视频号助手」后台：https://channels.weixin.qq.com
- 发布短视频或直播
- 获取对应跳转链接（或联系微信 BD 获取视频号跳转 schema）
🚫 限制说明
wxeb490c6f0f9e1b03 是视频号容器scene 参数不可随意伪造navigateToMiniProgram 需要用户手势触发✅ 替代方案
如果无法获取 scene，可以考虑：
- 用
打开已发布的公众号文章（嵌入视频号视频） - 让用户在公众号或客服消息中打开视频号内容
