小程序直播

小程序直播

小程序直播是微信官方提供的商家经营工具。通过调用该组件，商家可以在小程序中实现直播互动与商品销售闭环。

按照下面的使用说明接入，在你的小程序中引入直播组件即可实现直播功能。使用过程中如遇到问题，可在小程序直播社区发帖交流。

使用方法说明

1. 【直播组件】如何引入

版本限制：微信客户端版本 7.0.7 及以上（基础库版本2.9.x及以上支持同层渲染）可以观看直播及使用直播间的功能，低版本刚进入直播间时会提示用户升级微信客户端版本（低版本只能观看直播，无法使用直播间的功能）。

支持在主包或分包内引入【直播组件】 live-player-plugin 代码包（注：直播组件不计入代码包体积），项目根目录的 app.json 引用，示例代码如下：

(1) 主包引入  app.json   红色部分

{
  "pages": [
    "pages/index/index",
    "pages/found/found"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Home+",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "backgroundColor": "#fff",
    "selectedColor": "#ff6a72",
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/index/index",
        "color": "#5b5b5b",
        "iconPath": "pages/images/home.png",
        "selectedIconPath": "pages/images/selected_home.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/allGoods/allGoods",
        "color": "#5b5b5b",
        "iconPath": "pages/images/goods.png",
        "selectedIconPath": "pages/images/selected_goods.png",
        "text": "东西"
      }
    ]
  },
 "plugins": {
     "live-player-plugin": {
       "version": "1.0.0",
      "provider": "wxxxxxxx" 
     }
   },
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    }
  },
  "sitemapLocation": "sitemap.json",
  "navigateToMiniProgramAppIdList": [
    "xxxxxxx"
  ]
}

 

(2) 分包引入  index.json中引入  红色部分

{

　　"navigationStyle": "custom",

　　"usingComponents": {

　　"subscribe": "plugin-private://wx2b03c6e691cd7370/components/subscribe/subscribe"

　　}

}

 

2. 【直播组件】如何使用

按第1步的方法把组件代码包配置引入后，即可直接通过链接地址跳转到直播组件页面（即为进直播间页面）链接地址需要带上直播房间 id；房间 id 可通过下面 获取直播房间列表 API 获取。

示例代码如下：

(1) 使用 navigator 组件跳转进入直播间

index.js

//index.wxml

<!-- <div id="sky_btn" bindtap="gotoLive">

<image src="../images/gotolive.png"></image>

</div> -->

//index.js

// 进入直播按钮
  // gotoLive() {
  //   console.log('测试直播')
  //   wx.navigateTo({
  //     url: 'plugin-private://wxxxxxxx70/pages/live-player-plugin?room_id=7',
  //   })
  // },

示例效果图如下：

 

 

下面是官方文档:

https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html