3行代码实现小程序直播,带美颜优惠券抽奖功能

Posted 编程小石头

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了3行代码实现小程序直播,带美颜优惠券抽奖功能相关的知识,希望对你有一定的参考价值。

老规矩,先看效果图

3行代码实现小程序直播,带美颜优惠券抽奖功能_直播小程序

一,首先要给你的小程序开通直播插件功能

登录我们的小程序后台,可以看到如下图所示的直播
3行代码实现小程序直播,带美颜优惠券抽奖功能_小程序_02
点击一下,就可以进入小程序直播开通页面
3行代码实现小程序直播,带美颜优惠券抽奖功能_小程序_03
注意我们上图红色框里的一些要求。必须要满足这些条件,才可以开通直播功能。更详细些的如下:
3行代码实现小程序直播,带美颜优惠券抽奖功能_微信直播_04
这就注定目前只能是通过认证的企业小程序才可以开通直播功能了。个人小程序目前是没法开通的。我刚开始还不信,用我的个人小程序试了试。结果就如下图,后面没办法就注册了一个企业小程序。
3行代码实现小程序直播,带美颜优惠券抽奖功能_小程序直播_05
并且小程序的服务类目也要符合官方要求
3行代码实现小程序直播,带美颜优惠券抽奖功能_微信直播_06
到这里,才算真正开通了小程序直播功能。
3行代码实现小程序直播,带美颜优惠券抽奖功能_直播小程序_07

二,创建直播间

点击创建直播间
3行代码实现小程序直播,带美颜优惠券抽奖功能_微信直播_08
选择手机直播
3行代码实现小程序直播,带美颜优惠券抽奖功能_微信直播_09
这里需要用一个实名认证的微信做主播端。
3行代码实现小程序直播,带美颜优惠券抽奖功能_直播小程序_10
认证后如下:
3行代码实现小程序直播,带美颜优惠券抽奖功能_小程序直播_11
这里设置直播的一些封面等信息
3行代码实现小程序直播,带美颜优惠券抽奖功能_直播_12
直播间创建成功后如下
3行代码实现小程序直播,带美颜优惠券抽奖功能_直播_13
3行代码实现小程序直播,带美颜优惠券抽奖功能_直播_14
这里的直播码,扫码后就可以直接开播了,还有这里的房间号一定要记牢,后面会用到。
3行代码实现小程序直播,带美颜优惠券抽奖功能_微信直播_15
这里可以往直播间里添加商品,优惠券等
3行代码实现小程序直播,带美颜优惠券抽奖功能_微信直播_16

下面就是根据官方文档来代码实现直播功能了

三,直播功能的代码实现

我们创建号直播间以后,接下来就要在小程序代码里实现直播功能了。

1,首先是要创建一个小程序项目

至于如何创建小程序项目我这里就不再教大家了,如果你还不知道如何创建小程序项目,建议你去翻下我的历史文章,或者看看我录的《10小时零基础入门小程序开发》 创建好的小程序项目如下
3行代码实现小程序直播,带美颜优惠券抽奖功能_直播小程序_17

2,在app.json里添加直播插件

其实官方的接入文档写的很清晰了。下面把官方文档贴出来给大家:https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html
3行代码实现小程序直播,带美颜优惠券抽奖功能_小程序直播_18
我们只需要把上面红色框里的代码复制到app.json里就可以了。记得把注释去掉
3行代码实现小程序直播,带美颜优惠券抽奖功能_直播小程序_19
一定要记得,除了把注释去掉之外,其他的都不要做改动。

3,然后编写可以跳转到直播间的代码

代码很简单,就写一个button按钮,然后添加点击事件即可。
3行代码实现小程序直播,带美颜优惠券抽奖功能_直播_20
点击事件如下
3行代码实现小程序直播,带美颜优惠券抽奖功能_微信直播_21
其实官方文档里也有讲
3行代码实现小程序直播,带美颜优惠券抽奖功能_小程序直播_22
直播房间的房间id我们在创建直播间成功后其实可以拿的到的。
3行代码实现小程序直播,带美颜优惠券抽奖功能_微信直播_23
到这里我们的直播功能就完整的实现了。下面我们来看看都有哪些直播状态

四,直播状态的显示

未开播状态,这里我们可以订阅开播提醒,等开播的时候,会有订阅消息提醒。
3行代码实现小程序直播,带美颜优惠券抽奖功能_直播小程序_24
如果你订阅开播提醒了,还会有开播提醒
3行代码实现小程序直播,带美颜优惠券抽奖功能_小程序直播_25
直播结束状态
3行代码实现小程序直播,带美颜优惠券抽奖功能_微信直播_26
主播暂时离开
3行代码实现小程序直播,带美颜优惠券抽奖功能_直播_27
主播端网络异常中断
3行代码实现小程序直播,带美颜优惠券抽奖功能_微信直播_28
主播端可以设置美颜等功能
3行代码实现小程序直播,带美颜优惠券抽奖功能_小程序_29
并且我们的小程序直播间里可以设置优惠券,抽奖,添加商品。
3行代码实现小程序直播,带美颜优惠券抽奖功能_直播_30
直播结束后,还有回放功能
3行代码实现小程序直播,带美颜优惠券抽奖功能_小程序_31
好,到这里就给大家把小程序直播功能完整的讲解完了。由于代码量太少,实现起来比较简单,所以就不给大家录讲解视频了。

以上是关于3行代码实现小程序直播,带美颜优惠券抽奖功能的主要内容,如果未能解决你的问题,请参考以下文章

如何快速实现直播美颜功能

Unity实战篇 | 自己制作一个《大转盘抽奖》 小程序,顺便带你看看抽奖的水可以有多深

如何快速的开发一个完整的 iOS 直播 app(美颜篇)

抽奖丨流量话费优惠券还有iPhone7……快来接住!

WEB通用抽奖程序设计 开放的API接口

微信小程序直播怎么弄