Uniapp/lucky_shop

Fork 0

Files

ZF sun de63cd4c6a feat(微信视频号): 增加微信视频号和微信视频号列表组件

2026-01-07 16:42:28 +08:00

12 KiB

Raw Blame History

微信视频号集成指南

1. 概述

本文档提供了在UniApp项目中集成微信视频号的详细指导，包括组件实现、配置修改和使用方法。

2. 准备工作

2.1 微信小程序配置

在 manifest.json 文件中，需要确保微信小程序配置正确：

"mp-weixin": {
    "appid": "你的小程序appid",
    "setting": {
        "urlCheck": false,
        "postcss": false,
        "es6": true,
        "minified": true
    },
    "usingComponents": true,
    "permission": {
        "scope.userLocation": {
            "desc": "为了更好地为您提供服务"
        }
    },
    "requiredPrivateInfos": ["chooseLocation", "getLocation", "chooseAddress"],
    "__usePrivacyCheck__": true,
    "optimization": {
        "subPackages": true
    }
}

2.2 微信视频号API权限

2.2.1 开通视频号相关权限

登录微信小程序后台
- 访问微信公众平台
- 使用小程序管理员账号登录
进入开发管理
- 左侧菜单：开发 → 开发管理
- 进入「接口设置」页面
开通视频号权限
- 找到「视频号」相关接口，具体名称为「打开视频号内容」
- 点击「开通」按钮
- 阅读并同意相关协议
- 等待审核通过（通常为即时审核，无需人工审核）
权限开通失败处理
- 确保小程序已发布上线
- 确保小程序未被处罚或限制
- 如仍无法开通，请联系微信公众平台客服

2.2.2 小程序后台配置相关权限

配置manifest.json 在UniApp项目的 manifest.json 文件中，需要确保以下配置正确：

"mp-weixin": {
    "appid": "你的小程序appid",
    "setting": {
        "urlCheck": false,
        "postcss": false,
        "es6": true,
        "minified": true
    },
    "usingComponents": true,
    "requiredPrivateInfos": [],
    "__usePrivacyCheck__": true,
    "optimization": {
        "subPackages": true
    }
}

小程序后台权限设置
- 登录微信小程序后台
- 左侧菜单：设置 → 基本设置
- 向下滚动找到「服务内容声明」部分
- 确保已勾选「视频」相关服务内容
- 如有必要，上传相关资质证明

2.2.3 小程序与视频号关联

小程序管理员操作
- 登录微信小程序后台
- 左侧菜单：设置 → 基本设置
- 向下滚动找到「关联设置」部分
- 点击「关联视频号」按钮
- 输入视频号名称或视频号ID
- 点击「搜索」找到对应的视频号
- 点击「发送关联邀请」
视频号管理员操作
- 视频号管理员需要在24小时内确认关联邀请
- 视频号管理员登录视频号助手
- 进入「设置」→「关联设置」→「小程序关联」
- 找到待确认的关联邀请
- 点击「同意」完成关联
关联失败处理
- 检查视频号是否已完成实名认证
- 检查小程序是否已发布上线
- 检查视频号名称或ID是否输入正确
- 如超过24小时未确认，需要重新发送关联邀请

2.2.4 关联条件

小程序要求：必须已经发布上线，未被处罚或限制
视频号要求：必须已经完成实名认证，状态正常
数量限制：同一个小程序最多可以关联50个视频号，同一个视频号最多可以关联50个小程序
权限要求：关联操作需要小程序管理员和视频号管理员共同确认
主体要求：小程序和视频号的主体可以不同，但需要双方管理员确认

2.2.5 权限验证

完成关联后，可以通过以下方式验证权限是否开通：

在微信开发者工具中验证
- 在微信开发者工具中打开小程序
- 在控制台执行以下代码：
```
console.log('是否支持视频号API:', typeof wx !== 'undefined' && typeof wx.openChannelsActivity === 'function');
```
- 如果返回 true，则表示权限开通成功
在真机环境中验证
- 使用微信扫码打开小程序
- 触发视频号相关功能
- 检查是否能正常打开视频号内容
权限验证失败处理
- 确认小程序是否已与视频号关联
- 确认视频号API权限是否已开通
- 检查微信小程序基础库版本是否支持视频号API（建议使用最新版本）
- 尝试重新关联视频号

3. 组件使用

3.1 单个视频号组件 (diy-wechat-channel.vue)

基本用法

<diy-wechat-channel :value="channelData" />

属性说明

属性名	类型	默认值	说明
channelName	String	""	视频号名称
avatarUrl	String	""	视频号头像URL
videoTitle	String	""	视频标题
coverUrl	String	""	视频封面URL
feedId	String	""	视频号内容ID，用于播放视频
viewCount	Number	0	视频观看次数
showFollow	Boolean	false	是否显示关注按钮
componentAngle	String	""	组件圆角类型，可选值：round
topAroundRadius	Number	0	顶部圆角半径
bottomAroundRadius	Number	0	底部圆角半径

事件说明

事件名	说明	参数
channel-tap	点击视频号头像或名称时触发	视频号数据对象
video-play	点击视频播放时触发	视频号数据对象

3.2 视频号列表组件 (diy-wechat-channel-list.vue)

基本用法

<diy-wechat-channel-list :value="channelListData" />

属性说明

属性名	类型	默认值	说明
list	Array	[]	视频号列表数据
rowCount	Number	2	每行显示的视频号数量
showStyle	String	"fixed"	显示样式，可选值：fixed, singleSlide
mode	String	""	显示模式
font	Object	{}	字体样式配置
componentBgColor	String	"#fff"	组件背景颜色
componentAngle	String	""	组件圆角类型，可选值：round
topAroundRadius	Number	0	顶部圆角半径
bottomAroundRadius	Number	0	底部圆角半径
ornament	Object	{}	装饰样式配置

list数组项说明

属性名	类型	默认值	说明
channelName	String	""	视频号名称
coverUrl	String	""	视频封面URL
videoTitle	String	""	视频标题
feedId	String	""	视频号内容ID，用于播放视频
viewCount	Number	0	视频观看次数

4. 视频播放实现

组件内部使用微信小程序的 wx.openChannelsActivity API 来打开视频号内容：

if (typeof wx !== 'undefined' && wx.openChannelsActivity) {
    wx.openChannelsActivity({
        feedId: item.feedId, // 视频号内容ID，必填
        success: (res) => {
            console.log('打开视频号成功', res);
        },
        fail: (err) => {
            console.error('打开视频号失败', err);
            // 常见错误处理
            if (err.errCode === 40001) {
                console.error('未授权，请检查小程序是否与视频号关联');
            } else if (err.errCode === 40002) {
                console.error('参数错误，请检查feedId是否正确');
            } else if (err.errCode === 40003) {
                console.error('视频号内容不存在或已被删除');
            }
        }
    });
} else {
    console.error('当前环境不支持微信视频号');
}

4.1 API参数说明

feedId：视频号内容ID，必填，必须是有效的视频号内容ID
success：调用成功的回调函数
fail：调用失败的回调函数
complete：调用完成的回调函数（无论成功或失败）

4.2 错误码说明

错误码	说明	解决方案
40001	未授权	检查小程序是否与视频号关联，确认视频号API权限是否已开通
40002	参数错误	检查feedId是否正确，确保是有效的视频号内容ID
40003	视频号内容不存在或已被删除	确认feedId对应的视频号内容是否仍然存在
40004	系统错误	稍后重试，或联系微信公众平台客服

5. 注意事项

5.1 环境限制

微信视频号API只能在微信小程序环境中使用，其他环境（如H5、App）不支持
需要在微信小程序后台配置相关权限
小程序需要与视频号进行关联
微信小程序基础库版本建议使用2.10.0及以上

5.2 数据格式

确保传递给组件的数据格式正确，特别是 feedId 必须是有效的视频号内容ID

5.3 图片资源

视频号头像和封面图片建议使用CDN地址，确保加载速度
图片尺寸建议：
- 头像：200x200px
- 封面：640x360px

5.4 权限和关联

确保在微信小程序后台开通了「打开视频号内容」权限
确保小程序已与视频号成功关联
关联操作需要小程序管理员和视频号管理员共同确认

6. 常见问题

6.1 视频无法播放

检查 feedId 是否正确，确保是有效的视频号内容ID
确认小程序是否与视频号关联
确认小程序是否开通了视频号相关权限
检查微信小程序基础库版本是否支持视频号API
检查视频号内容是否仍然存在（未被删除）

6.2 权限开通失败

确保小程序已发布上线
确保小程序未被处罚或限制
确认小程序管理员账号权限是否正确
如仍无法开通，请联系微信公众平台客服

6.3 关联失败

检查视频号是否已完成实名认证
检查小程序是否已发布上线
检查视频号名称或ID是否输入正确
确认视频号管理员是否在24小时内确认关联邀请
如超过24小时未确认，需要重新发送关联邀请

6.4 组件显示异常

检查传递给组件的数据格式是否正确
确认图片资源是否可访问
检查微信小程序基础库版本是否支持视频号API

6.5 样式问题

可通过组件的 componentAngle、topAroundRadius、bottomAroundRadius 等属性调整组件样式
可通过 componentBgColor 属性调整组件背景颜色
可通过 font 属性调整字体样式

6.6 环境兼容性问题

微信视频号API只能在微信小程序环境中使用
在其他环境中，组件会显示但无法播放视频
建议在非小程序环境中添加友好的提示信息

7. 示例代码

7.1 单个视频号示例

// 单个视频号数据
const channelData = {
    channelName: "示例视频号",
    avatarUrl: "https://example.com/avatar.jpg",
    videoTitle: "这是一个示例视频",
    coverUrl: "https://example.com/cover.jpg",
    feedId: "v02004g10000c3f7l7j5u87l33n8f160",
    viewCount: 12345,
    showFollow: true,
    componentAngle: "round",
    topAroundRadius: 10,
    bottomAroundRadius: 10
};

7.2 视频号列表示例

// 视频号列表数据
const channelListData = {
    list: [
        {
            channelName: "示例视频号1",
            coverUrl: "https://example.com/cover1.jpg",
            videoTitle: "这是示例视频1",
            feedId: "v02004g10000c3f7l7j5u87l33n8f160",
            viewCount: 12345
        },
        {
            channelName: "示例视频号2",
            coverUrl: "https://example.com/cover2.jpg",
            videoTitle: "这是示例视频2",
            feedId: "v02004g10000c3f7m7j5u87l33n8f161",
            viewCount: 67890
        }
    ],
    rowCount: 2,
    showStyle: "fixed",
    font: {
        size: 14,
        weight: "normal",
        color: "#333"
    },
    componentBgColor: "#fff",
    componentAngle: "round",
    topAroundRadius: 10,
    bottomAroundRadius: 10
};

8. 总结

通过本文档提供的组件和配置指导，你可以在UniApp项目中轻松集成微信视频号功能，为用户提供更加丰富的内容体验。

如果在集成过程中遇到问题，请参考本文档的常见问题部分，或查阅微信官方文档获取更多帮助。

12 KiB Raw Blame History Unescape Escape

微信视频号集成指南

1. 概述

2. 准备工作

2.1 微信小程序配置

2.2 微信视频号API权限

2.2.1 开通视频号相关权限

2.2.2 小程序后台配置相关权限

2.2.3 小程序与视频号关联

2.2.4 关联条件

2.2.5 权限验证

3. 组件使用

3.1 单个视频号组件 (diy-wechat-channel.vue)

基本用法

属性说明

事件说明

3.2 视频号列表组件 (diy-wechat-channel-list.vue)

基本用法

属性说明

list数组项说明

4. 视频播放实现

4.1 API参数说明

4.2 错误码说明

5. 注意事项

5.1 环境限制

5.2 数据格式

5.3 图片资源

5.4 权限和关联

6. 常见问题

6.1 视频无法播放

6.2 权限开通失败

6.3 关联失败

6.4 组件显示异常

6.5 样式问题

6.6 环境兼容性问题

7. 示例代码

7.1 单个视频号示例

7.2 视频号列表示例

8. 总结

12 KiB

Raw Blame History