前言:临时来的新需求,需要展示非同一主题下腾讯视频号一些视频列表,点击可以跳转播放

一、官方

虽然官方已经解开非同一主体,也可以跳转视频号的功能,但是小程序中无法直接获取视频号的视频列表信息!

二、间接实现

既然官方允许非同一主题,微信小程序可以跳转到视频号,那么现在就是小程序展示视频列表问题,然后我想应该可以通过复制视频号分享的链接信息获取到视频号信息,然后通过配置在代码中,直接跳转过去?类似跳转公众号平台,然后查了下,果然有这种方案!

三、实现步骤:
  1. 手动收集视频号视频信息(标题、封面、feedId 等)

  2. 在小程序中展示预存信息(前端或后端存储视频列表信息),点击跳转视频号播放页【这里看公司,可以单纯前端直接定义维护,或者给到后端保存数据库请求获取视频列表…】

    <!-- 视频列表 -->
    <view class="video-list">
      <view 
        class="video-item" 
        wx:for="{{videoList}}" 
        wx:key="feedId"
        bindtap="goPlayVideo"
        data-finder="{{item.finderUserName}}"
        data-feed="{{item.feedId}}"
      >
        <!-- 视频封面 -->
        <image class="cover" src="{{item.coverUrl}}" mode="aspectFill"></image>
        <!-- 视频标题 -->
        <view class="title">{{item.title}}</view>
      </view>
    </view>
    
    Page({
      data: {
        //  这里手动配置 目标视频号的视频列表(运营填写即可)
        videoList: [
          {
            title: "视频标题1",
            coverUrl: "https://xxx.jpg", // 视频封面图
            finderUserName: "sphxxxxxx", // 视频号ID
            feedId: "xxxxxx" // 视频ID
          },
          {
            title: "视频标题2",
            coverUrl: "https://xxx2.jpg",
            finderUserName: "sphxxxxxx",
            feedId: "xxxxxx"
          }
        ]
      },
    
      // 点击跳转视频号播放
      goPlayVideo(e) {
        const finder = e.currentTarget.dataset.finder;
        const feed = e.currentTarget.dataset.feed;
    
        wx.openChannelsActivity({
          finderUserName: finder,
          feedId: feed,
          fail: () => {
            wx.showToast({ title: '跳转失败', icon: 'none' })
          }
        })
      }
    })
    
总结
  • 1.手动从视频号里复制视频的封面、标题、ID 等信息,存到数据库;
  • 2.小程序展示这些视频列表,用户点击后跳转到腾讯视频号页面播放,不是在小程序内部直接播放。
Logo

北京人形旗下天工造物具身智能开源社区,聚焦具身天工与慧思开物两大平台

更多推荐