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

最近准备给自己的小程序做个直播功能,看下直播所需要的一些资质,瞬间被吓止步。后面发现小程序官方出了直播插件,这就为小程序接入直播提供的诸多便利。仅仅需要一些简单的配置,就可以轻松实现直播功能了。下面带大家来一步步给自己的小程序添加直播功能吧。

老规矩,先看效果图

ab2ac84cd822840a54e60c2af29edc88.png

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

登录我们的小程序后台,可以看到如下图所示的直播

8202689933db6fd6c1cbb8437d0517c8.png

点击一下,就可以进入小程序直播开通页面

2367249caed792cbebf61aef1e9f7f6a.png

注意我们上图红色框里的一些要求。必须要满足这些条件,才可以开通直播功能。更详细些的如下:

b15550ad8aa006cc119eb178f8d2e555.png

这就注定目前只能是通过认证的企业小程序才可以开通直播功能了。个人小程序目前是没法开通的。我刚开始还不信,用我的个人小程序试了试。结果就如下图,后面没办法就注册了一个企业小程序。

309bca40a433e94b01dc9ba067064c23.png

并且小程序的服务类目也要符合官方要求

141c323e7606f79b4eaa11f05713e122.png

到这里,才算真正开通了小程序直播功能。

05bf913cd92b6bd6949d5acb0a906870.png

二,创建直播间

点击创建直播间

68747be95862223d38e2d006834d9584.png

选择手机直播

1f4a16de2b6c40f05b8a644be64e1fa3.png

这里需要用一个实名认证的微信做主播端。

14d147eca9760c184582c0aebfd15063.png

认证后如下:

48dbef1db0df9c490f1f411df9fb81f7.png

这里设置直播的一些封面等信息

540d3f12c19a971d5b98576a867e497a.png

直播间创建成功后如下

aaa944819436226b8081a1a52a443db8.png
8739d5d1f80bca7999cf1209e2c6ac8b.png

这里的直播码,扫码后就可以直接开播了,还有这里的房间号一定要记牢,后面会用到。

245a06ed5a10db8e61aa9537914d0011.png

这里可以往直播间里添加商品,优惠券等

783b154d30520c5b74cc331d588f508d.png

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

三,直播功能的代码实现

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

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

至于如何创建小程序项目我这里就不再教大家了,如果你还不知道如何创建小程序项目,建议你去翻下我的历史文章,或者看看我录的《10小时零基础入门小程序开发》 创建好的小程序项目如下

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

其实官方的接入文档写的很清晰了。下面把官方文档贴出来给大家:https://developers.weixin.qq.com/miniprogram/dev/framework/liveplayer/live-player-plugin.html

69d604ff461360625fd1c987df96be3a.png

我们只需要把上面红色框里的代码复制到app.json里就可以了。记得把注释去掉

9b671aceeb21336ef52fca2771b2ebdf.png

一定要记得,除了把注释去掉之外,其他的都不要做改动。

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

代码很简单,就写一个button按钮,然后添加点击事件即可。

6b7b09ff0a1c9838723f8ed2dcf8f6b7.png

点击事件如下

59fa15a13d5636198939c9159fa2766b.png

其实官方文档里也有讲

a26d22ca0425020b4f6c83ec83ef192f.png

直播房间的房间id我们在创建直播间成功后其实可以拿的到的。

dd1f2e7853bd1a552996993bb9242cf6.png

到这里我们的直播功能就完整的实现了。下面我们来看看都有哪些直播状态

四,直播状态的显示

未开播状态,这里我们可以订阅开播提醒,等开播的时候,会有订阅消息提醒。

b54e31c5dad397828db6674bd85461bd.png

如果你订阅开播提醒了,还会有开播提醒

61f3e49e0dd87af20abb08da79f17d6a.png

直播结束状态

6e9e0e265603ec3cf1e654f8cfa6189d.png

主播暂时离开

63c478c37cab2bb2ad84696f19fc21c3.png

主播端网络异常中断

1ece27fdbc505433817855f4ebbb8613.png

主播端可以设置美颜等功能

ca288221e657c7a9ab1e392ed23c7cae.png

并且我们的小程序直播间里可以设置优惠券,抽奖,添加商品。

288e793a6c4a4be6ec2272a48ccfe736.png

直播结束后,还有回放功能

24be960283b95ef271a80b492f578d30.png

好,到这里就给大家把小程序直播功能完整的讲解完了。由于代码量太少,实现起来比较简单,所以就不给大家录讲解视频了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值