如何实现小程序的直播功能

拼搏现实的明天。 2022-12-01 03:40 222阅读 0赞

**1.首先小程序要符合开通直播的条件**

（1）小程序在目前开放的21个类目范围内：电商平台、商家自营-百货、初级食用农产品、食品、酒/盐、图书报刊/音像/影视/游戏/动漫、汽车/其他交通工具的配件、服装/鞋/箱包、玩具/母婴用品、家电/数码/手机、美妆/洗护、珠宝/饰品/眼镜/钟表、运动/户外/乐器、办公/文具、鲜花/园艺/工艺品、汽车内搭/外饰、家居/家饰/家纺、机械/电子器件、在线视频课程、直播、视频 。

（2）主体下小程序近半年没有严重违规。

（3）小程序近90天存在支付行为。

以上3个条件同时满足的前提下，下面3个条件满足其一即可

（4）主体下公众号累计粉丝数大于100。

（5）主体下小程序近7日dau大于100。

（6）主体在微信生态内近一年广告投放实际消耗金额大于1w。

小程序直播还在公测中，如果符合要求，就会收到开通的邀请

**2.登录进微信公众平台**

开通成功后，在 设置 -----> 第三方设置 里面查看：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center]  
**3.接着就可以开始创建直播了**

（1）在微信公众平台中找到 功能 ----> 直播

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_100x150]

（2）点击直播，会跳到直播控制台，然后点击创建直播间：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 1]

（3）在弹出的弹窗里面，按要求填写信息，然后点击下一步：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 2]  
注：在填写主播微信账号时，新人会先进行一个注册，按提示进行就好

（4）点击下一步后，按要求上传图片就好，有分享卡片样式配置，购物直播频道样式，直播间样式配置，其中直播间样式配置中有点赞，评论，商品货架，分享，回放，客服等功能可勾选：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 3]

（5）选择好后点击创建，就会回到直播控制台页面，这时，看下图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 4]  
（6）打开小程序代码，**这个代码很重要，添加代码后要进行一次代码上传发布，没有的话客户端扫码进入的会是空白页**

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

**主包：**

"plugins": { 
        "live-player-plugin": { 
            "version": "1.1.8", // 注意填写该直播组件最新版本号，微信开发者工具调试时可获取最新版本号（复制时请去掉注释）
            "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid，该示例值即为直播组件appid（复制时请去掉注释）
        }
    }

**分包：**

"subpackages": [
        { 
            "plugins": { 
                "live-player-plugin": { 
                    "version": "1.1.8", // 注意该直播组件最新版本号，微信开发者工具调试时可获取最新版本号（复制时请去掉注释）
                    "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid，该示例值即为直播组件appid（复制时请去掉注释）
                }
            }
        }
    ]

（7）如果需要在小程序页面内点击后跳转到直播页面，在需要的页面中填入以下代码，不需要请忽略

**第一种方法：使用 navigator 组件跳转进入直播间**

.js：

let roomId = [直播房间id] // 填写具体的房间号
    let customParams = encodeURIComponent(JSON.stringify({  path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
    this.setData({ 
        roomId,
        customParams
    })

.wxml

<navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={ {roomId}}&custom_params={ {customParams}}"></navigator>
    // 其中wx2b03c6e691cd7370是直播组件appid不能修改

**第二种方法：使用 navigateTo 方法跳转进入直播间**

.js

let roomId = [直播房间id] // 填写具体的房间号，可通过下面【获取直播房间列表】 API 获取
    let customParams = encodeURIComponent(JSON.stringify({  path: 'pages/index/index', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
    wx.navigateTo({ 
        url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${ roomId}&custom_params=${ customParams}`
    })
    // 其中wx2b03c6e691cd7370是直播组件appid不能修改

（8）如果有其他需求，可以参考小程序文档：

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

**4.如何在直播间中添加购买的商品**

（1）如图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 5]  
（2）选择未入库后会跳到如下页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 6]

（3）点击添加商品后，弹出如下页面：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 7]  
注意这里的路径必须是小程序发布后，线上已经存在的页面

（4）填写完成后点击添加商品，会显示在审核中，审核很快的，过两  
分钟刷新看一下

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 8]

（5）审核通过后，在商品的已入库中查看，就有这个商品喽

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 9]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 10]  
（6）然后来到刚刚创建的直播间，点击控制台（可以创建商品，再创建直播间，方便一些）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 11]  
（7）来到如下页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 12]  
向下滑动，找到推送控制，点击导入商品

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 13]  
选择后添加就可以了

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 14]  
（8）这里还有抽奖和优惠券的设置，如有需求，点击后按照要求添加即可

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 15]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/cf1d300119b0455da584eee4aba8b911.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center_100x150]: /images/20221123/2219df7504c24368afba584833067983.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/3076897d8dbf46c5a16e581fd112cf6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/41c0824786c4436fba93cb7ed6759f59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/f6ca4a22b6a740dd85c26e62d8eaf365.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/1969aa3567d84013a844a1b3f6bf0010.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/304b994ad8664e16a351671ce99ff226.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/808c10ade5b140409c3a816894b3fb39.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/d30e37b581e24e06aff25758b1efcc86.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/1f562dfd22e342f6afa1ad1d0b3350f6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/e3d0f42961394eaf8b2bf7a326974d79.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/b99c111b2ed047698233511ec2c33c6e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/f0e18d6235f34effac18f1853b2a4cb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/22dcc2a4eae4499395b31922221c11fb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221123/61a921fa719245d1ac539e209b4419d9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221123/9113270c45b74803a56ac54dd74daad6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N3eDk5OQ_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221123/7056cb206af04c98a98c802f4dd00b3a.png