在企业公众号菜单中调用视频列表(自定义菜单)的操作教程

公众号实现视频列表播放功能,需在管理平台创建视频专辑并添加分组视频,支持拖动调整顺序。系统自动生成专辑二维码,可扫码直接观看视频,也可分享至朋友圈或好友。视频链接可嵌入公众号菜单,实现稳定流畅的连播体验。

微信公众号调用视频列表(自定义菜单),微信公众号如何实现视频列表播放视频的功能

使用场景要求:

  1. 在微信公众号中,添加多个视频,且可实现视频列表的连播功能。
  2. 要求观看视频时无广告、稳定流畅。

创建视频列表专辑

进入管理平台,打开“视频列表”,点击"视频专辑"功能,创建“新增专辑”,如下图。

酷播云_视频列表二维码__分享到微信和朋友圈的图片

图3-1:创建“新增专辑

添加视频

为您的视频专辑添加视频,可以分多个组,支持拖动更改分组顺序。

1. 创建一个分组,如下图中步骤4。
2. 添加视频,如下图中步骤5。

酷播云_视频列表二维码__分享到微信和朋友圈的图片

图4-1:为视频专辑添加视频

酷播_视频列表二维码__分享到微信和朋友圈的图片

图4-2:为视频专辑添加视频

视频分享

云平台会自动生成视频专辑二维码,可以很方便的实现视频分享。

方式1:
1. 参照图5-1,点击“分享”,在弹出中扫描二维码,进行分享;
2. 也可以直接下载该视频列表二维码印刷到宣传海报、书本杂志、设备标签上,也可以将视频二维码图片直接发送给对方;
3. 对方微信扫一扫直接观看视频。
方式2:

1. 在弹出中扫描二维码,微信扫一扫先前生成的二维码,打开视频;
2. 点击右上角的" ..." ,即可直接做分享,可以分享到朋友圈、分享到微信群、分享给微信好友;
3. 好友微信扫一扫直接观看视频。

酷播云_视频列表二维码__微信分享效果参考的图片

图5-1:很方便做视频分享

 

酷播云_视频列表二维码__微信分享效果参考的图片

图5-3:外观设置

微信公众号添加链接

最终公众号点击菜单效果

酷播云_视频列表二维码_手机端效果

学会了吗?如果内容不错,记得为我点赞。

### 如何使用 UniApp 开发微信公众号 #### 准备工作 为了使开发顺利,在开始前需准备好必要的环境配置。确保已安装 HBuilderX 或其他支持 UniApp 的 IDE,并注册微信公众平台账号,完成相应认证流程。 #### 创建新项目 启动HBuilderX并新建一个基于Vue框架的UniApp应用模板作为基础架构[^2]。 #### 配置 OAuth2.0 登录功能 对于希望集成社交化分享或个性化服务的应用来说,通过OAuth协议来获取用户的公开资料是非常重要的一步。具体操作如下: - **设置回调页面域名**:进入微信公众平台后台管理界面中的“开发者中心”,按照指引设定合法的JS接口安全域名以及网页授权回调页域名为本地服务器地址或其他托管站点。 - **发起请求获得临时票据 (code)**:当用户访问带有特定参数链接时触发跳转至微信开放平台指定URL模式,该过程由前端负责构建携带必要字段(如appid、redirect_uri等)组成的GET请求发送给API网关;成功后浏览器会被重定向回预先定义好的路径同时附带`?code=CODE&state=STATE`形式查询字符串[^1]。 ```javascript // 示例代码片段用于展示如何处理返回的数据 const code = getUrlParam('code'); // 自定义函数解析URL参数提取Code值 if(code){ console.log(`Received authorization code:${code}`); }else{ alert("Failed to get the authorization code."); } ``` #### 调用微信 JSSDK 实现更多交互特性 除了基本的身份验证外,还可以借助于WeChat JS-SDK进一步增强用户体验,比如自定义菜单按钮样式、上传图片视频等内容共享行为。以下是简化的接入步骤概述[^4]: ##### 步骤一:引入依赖库 下载官方提供的 `jweixin-module` 插件包并将之添加到项目的根目录下,接着修改 `main.js` 文件以全局混入扩展方法以便后续调用。 ```bash npm install @dcloudio/uni-app-jweixin --save ``` ##### 步骤二:初始化 SDK 并注入权限签名 在每次加载含有Webview容器组件之前都需要向后端申请有效的ticket令牌用来签署当前页面所需使用的各项能力列表,之后再利用这些信息填充wx.config()选项从而激活对应的功能模块。 ```javascript import wx from 'jweixin-module'; export function initWxJsSdk(configData) { wx.config({ debug: false, appId: configData.appId, timestamp: configData.timestamp, nonceStr: configData.nonceStr, signature: configData.signature, jsApiList: ['chooseImage', 'uploadImage'] // 只填所需的接口名称即可 }); } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值