uniapp 如何接入微信直播功能

想在uniapp中接入微信直播功能，但目前没找到详细的实现方案。官方文档里对直播模块的介绍比较少，不知道具体需要哪些步骤？

主要遇到以下几个问题：

  1. uniapp是否需要特定的插件或模块才能支持微信直播？
  2. 直播功能需要申请哪些权限或资质？
  3. 有没有完整的代码示例可以参考？

希望有经验的朋友能分享一下具体的实现方法，或者提供一些可行的思路。

2 回复

在uniapp中接入微信直播，需先申请微信小程序直播插件，并在小程序后台添加。然后使用<live-pusher>和<live-player>组件实现推流和播放。注意：仅企业主体小程序可申请，需审核。


在 UniApp 中接入微信直播功能，主要通过以下步骤实现：

1. 获取微信小程序直播权限

  • 登录微信公众平台，进入「小程序管理后台」。
  • 在「功能」-「直播」中申请开通直播权限（需满足类目要求，如电商、教育等）。
  • 审核通过后，获取直播组件权限。

2. 在 UniApp 项目中配置直播组件

  • 在 pages.json 中添加直播组件配置：
    {
  "pages": [
    {
      "path": "pages/live/live",
      "style": {
        "usingComponents": {
          "live-room": "plugin-private://wx2b03c6e691cd7370/components/live-room/live-room"
        }
      }
    }
  ]
}
  • 注意：live-room 是微信官方提供的直播组件，需通过插件方式引入。

3. 使用直播组件

  • 在页面中直接使用 <live-room> 组件：
    <template>
  <view>
    <live-room
      id="live-room"
      :room-id="roomId"
      @statechange="onStateChange"
    />
  </view>
</template>
  • 参数说明：
    • room-id：直播间 ID（通过微信后台创建直播间获取）。
    • statechange：监听直播状态变化事件。

4. 创建直播间和管理

  • 通过微信小程序后台或调用微信 API 创建直播间：
    • 使用 wx.request 调用微信服务端 API（如 createRoom）生成直播间 ID。
  • 示例代码（需在服务端实现）：
    // 服务端调用微信 API（示例为 Node.js）
const axios = require('axios');
const createLiveRoom = async (accessToken) => {
  const res = await axios.post(`https://api.weixin.qq.com/wxaapi/broadcast/room/create?access_token=${accessToken}`, {
    name: "直播间名称",
    coverImg: "封面图 URL",
    startTime: Math.floor(Date.now() / 1000),
    endTime: Math.floor(Date.now() / 1000) + 3600,
    anchorName: "主播昵称",
    anchorWechat: "主播微信号",
    type: 1 // 直播类型
  });
  return res.data.roomId;
};

5. 注意事项

  • 权限限制：仅支持已开通直播权限的小程序，且需符合微信类目规范。
  • 组件限制：live-room 组件仅在小程序端生效，H5 或其他平台需自行适配或使用 WebView 嵌入直播链接。
  • 安全域名：调用微信 API 时需确保域名已配置到小程序后台的「服务器域名」中。

总结

通过以上步骤，即可在 UniApp 中快速集成微信直播功能。重点在于开通权限、配置组件并管理直播间。如有复杂需求（如自定义 UI），可结合微信原生开发或使用第三方服务简化流程。

回到顶部