【2020.09.28更新】小程序直播插件教程贴
717
24

小程序直播目前免费 免流量 自带回放等功能。

商业版支持 :

前台会员中心创建直播间 

每天直播多少场

每天审核多少商品

共审核多少商品

指定会员组开启直播等等

小程序直播流程:会员创建或者管理员创建直播间 然后导入商品即可。默认仅支持小程序开播 如果需要电脑OBS直播请到小程序后台创建直播间才行。

小程序改造教程:

(改造之前 你需要已经在小程序后台 开通了直播功能 否则请在小程序中支付一笔订单 第二天再申请直播 https://mp.weixin.qq.com/ 右侧有直播按钮 进行申请 )

下载最新的套壳小程序后,用小程序编辑器打开  app.json

在pages 中新增一个 

"pages/live/list/index",

"pages/live2/list/index",

下面的截图我就不换了 是live和live2 2个连接 一个是列表带商品一个是列表不带商品

继续往下找  

 "debug": false,

在他下面加上

  "plugins": {
    "live-player-plugin": {
        "version": "1.2.0", 
        "provider": "wx2b03c6e691cd7370" 
    }
},

必须是上面的 你不能修改任何东西。下面的截图我也不换了 版本已经升级到1.2.0了 自己可关注《公众平台安全助手》有插件更新的时候 直接点击进行更新即可 不需要重新审核。

基础库 改为我截图的哪个

小程序后台 设置中的基础库也要改



把下面的附件解压 复制到pages目录 你可以修改 pages\live\list\index.json 中的标题和配色 具体怎么改请自行查看小程序的文档 这里不做解答。

69_2020092619202451cae.zip

(2020年9月26日19:00:00已改)

修改完了 上传小程序重新审核。(我知道这里会挡住99.9%的人 因为审核太变态了)

我们网站后台 公众号菜单可以加一个连接 关键词哪里 输入 pages/live2/list/index 或者 pages/live/list/index

点击生成菜单即可。

 

上面的是对接小程序端的 对接到这里完全可以用了 下面的教程需要一定的基础 可以不用对接 算是增强版对接教程

下面的教程需要一定的专业知识 可以不用对接。

 

1PC版 获取一个会员直播预告和直播中的代码

 {if plugins_config('weixinlive')}
      {php}$live=fun('Livecode@live_status',$info['uid']);{/php}
      {if $live} 
<p>{if $live['live_status']==101}正在直播中{else}直播预告{/if}</p>
<p>{if $live['live_status']==101}正在直播中扫二维码进行观看<img src="{$live.live_code}" />
{else}
直播开始时间 {$live['start_time']|date="Y-m-d H:i:s",###} 扫二维码进行订阅<img src="{$live.live_code}" />
{/if}</p>
     {/if}
      {/if}


$info.uid  就是需要获取状态的会员uid

live_status 就是返回的直播状态 101为正在直播 否则就是未直播(这里有3分钟的时间差 因为定时任务是3分钟执行一次)

live_code  就是返回的直播码和订阅码 他们是一样的

1公众号网页和小程序中获取一个会员直播预告和直播中的代码(不支持非公众号打开和小程序打开)

 {if plugins_config('weixinlive')}
      {if in_weixin()||in_wxapp()}
      {php}$live=fun('Livecode@live_status',$info['uid']);{/php}
      {if $live} 
<!--小程序中--> 
{if in_wxapp()}
<div id="weixinlive">
  <p><img src="{$live.cover_img|tempdir}"></p>
  <p>{if $live['live_status']==101}正在直播中{else}直播预告{/if}</p>
  <p>{if $live['live_status']==101}正在直播中点击进行观看{else}直播开始时间 {$live['start_time']|date="Y-m-d H:i:s",###}点击进行订阅{/if} </p>
</div>
<script type="text/javascript">
$("#weixinlive").on("click", function(e) {
wx.miniProgram.getEnv(function(res) {
	 wx.miniProgram.navigateTo({
    url:'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={$live.roomid}',
    success: function() {
        console.log('success')
    },
});
})
});
</script> 
{/if}
<!--公众号中-->
        {if in_weixin()&&!in_wxapp()}
         <p><img src="{$live.cover_img|tempdir}"></p>
  <p>{if $live['live_status']==101}正在直播中{else}直播预告{/if}</p>
  <p>{if $live['live_status']==101}正在直播中点击进行观看{else}直播开始时间 {$live['start_time']|date="Y-m-d H:i:s",###}点击进行订阅{/if} </p>
     <p>
		 <!--由于公众号中 wx-open-launch-weapp 跳转到小程序设置样式比较麻烦 所以这里只有点击下面的文字才能跳转 插件中必须设置小程序的原始id-->
		 <wx-open-launch-weapp id="launch-btn" class="weixinlive-btn" username="{:config("webdb.P__weixinlive")['weixinlive_yuanshiid']}" path="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={$live.roomid}">
                <template>
          <style>.btn{border:0;background:#fff;font-size:14px;}</style>
          <button class="btn">{if $live['live_status']==101}点击观看直播{else}点击预定直播{/if}</button>
        </template>
          </wx-open-launch-weapp>
    </p>
{/if}
 {/if}
{/if}	
{/if}

然后在 {include file="index@share"/}

下面加上

<script type="text/javascript">
 
var weixinlivebtn = $('.weixinlive-btn').get(0);
    weixinlivebtn.addEventListener('launch', function(e) {
        console.log('success');
    });
    weixinlivebtn.addEventListener('error', function(e) {
        console.log('fail', e.detail);
    });
			 
</script>


↑至此获取单个会员的直播状态就结束了 

1网站任意位置调用直播列表代码功能 仅支持电脑版 公众号和小程序显示 手机浏览器不支持 需要支持的自己加个二维码吧

01
PC版
 {qb:tag name="pc_live2" rows="8" class="plugins\weixinlive\index\Label@getlist"}
	 
        <li> {if $rs['live_status']==101}正在直播中{else}直播预告{/if}<br>{$rs.title}<br>图片:{$rs.picurl}<br>开始时间:{$rs.start_time}<br>结束时间:{$rs.end_time}<br>观看码订阅码<img src="{$rs.live_code}" /></li>
	 
{/qb:tag}

调用指定会员的全部直播 uid=会员uid
 {qb:tag name="pc_live2" rows="8" where="uid=1" class="plugins\weixinlive\index\Label@getlist"}
	 
        <li> {if $rs['live_status']==101}正在直播中{else}直播预告{/if}<br>{$rs.title}<br>图片:{$rs.picurl}<br>开始时间:{$rs.start_time}<br>结束时间:{$rs.end_time}<br>观看码订阅码<img src="{$rs.live_code}" /></li>
	 
{/qb:tag}
01
公众号和小程序中列表 参数和pc版一样
 <!--仅微信和公众号下面显示-->
	{if in_weixin()||in_wxapp()}
 {qb:tag name="wap_live" rows="8" class="plugins\weixinlive\index\Label@getlist"}
	<!--小程序的连接-->
	{if in_wxapp()}
        <li onclick="weixinlive({$rs.roomid})">{$rs.title}</li>
	{/if}
	<!--公众号的连接-->
	{if in_weixin()}
	<li>
	<wx-open-launch-weapp id="launch-btn" class="weixinlive-btn" username="{:config("webdb.P__weixinlive")['weixinlive_yuanshiid']}" path="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={$rs.roomid}">
  <template>
	  <style>.btn{border:0;background:#fff;font-size:14px;}</style>
    <button class="btn">{$rs.title}</button>
  </template></wx-open-launch-weapp>
	</li>
	{/if}
{/qb:tag}
 
<!--小程序js不能修改-->
{if in_wxapp()}
<script type="text/javascript">
function weixinlive(roomid) {
wx.miniProgram.getEnv(function(res) {
	 wx.miniProgram.navigateTo({
    url:'plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id='+roomid,
    success: function() {
        console.log('success')
    },
});
})
}
</script>
 {/if}
<script type="text/javascript">
var weixinlivebtn = $('.weixinlive-btn').get(0);
    weixinlivebtn.addEventListener('launch', function(e) {
        console.log('success');
    });
    weixinlivebtn.addEventListener('error', function(e) {
        console.log('fail', e.detail);
    });
</script>
{/if}



  值得注意的是 我们调用列表的手机版 必须存在  {include file="index@share"/} 不然无法跳转到小程序直播间

/////// 不需要网站调用的修改完了

至此我们的对接就差不多了 

放几张预览图。公众号打开后点击按钮提示,因为小程序还没审核 这里就不点击了,理论上是直接到直播页面。

小程序打开点击直接跳转到直播页面。


小程序直播列表页面(暂时没有做连接 可以参照 打开直播详情的方案加 连接地址pages/live/list/index


我们的后台:新增直播间后需要点一次 同步直播间,后期会增加定时任务自动刷新,因为接口一天仅1万次 还是和回放共享的 远远不够我们需要缓存到我们自己数据库进行调用。我们也支持后台自己创建直播间 但是开播也是需要到小程序后台获取推流码的。

 


演示:扫码后 点击 幻灯片上面的哪2个连接即可,



免费版解压后 除 小程序需要添加的 这个目录外 其他的直接上传到根目录 后台插件 插件哪里选择本地安装即可,

收费版后台安装即可 免费版可能部分功能教程不适合请自行斟酌

  

以下是隐藏的内容需要回复才可见,你回复后,需要刷新网页才可见!
************************************

8
赏礼
赏钱
收藏
点击回复
      全部留言
  • 24
  • 金森 实战运营者 消费:1201元 4天前 22:594楼
    学习学习
0 赏钱 赏礼回复
  • ZQJ 实战运营者 消费:3712.39元 8天前 12:504楼
    请问有 没有人  照这个教程配置成功了的?
0 赏钱 赏礼回复
  • admin 超级管理员 消费:2.88元 1个月前 17:334楼
    这个确实不错.晚点会加入到系统默认的程序里边
    坚持信念13 消费:2184.64元 1个月前
    那是不是把我们之前的直播框架去掉?
    ZQJ 消费:3712.39元 8天前
    我觉得现在可以把这个小程序直播功能 加到系统里面去了,还算带有回放功能,不用原来那么麻烦 自己去配置 本地服务器。我觉得可以推上日程了,加入到系统默认中去了。谢谢、
0 赏钱 赏礼回复
  • wr1688 实战运营者 消费:2493.04元 24天前 20:21
    华为
    4楼
    霸气威武
0 赏钱 赏礼回复
  • 海阔天空 普通粉丝 消费:1492.28元 24天前 19:044楼
    威武霸气
0 赏钱 赏礼回复
  • 尾巴 实战运营者 消费:2942.48元 24天前 16:254楼
    给力!但显得好复杂,对于象我这样的懒人,看着那密密麻麻的修改就头晕
0 赏钱 赏礼回复
  • Suifeng 程序开发者 消费:23.24元 24天前 15:114楼
    2020年9月28日 教程已经全部更新完毕 请查阅
    kk1212 消费:1211.04元 24天前
    非常给力,步骤很清晰,教程很详细
0 赏钱 赏礼回复
  • 绝不妥协 普通粉丝 消费:0元 1个月前 18:44
    其他手机
    4楼
    这个好,技术大能。
0 赏钱 赏礼回复
  • 石头 风格开发者 消费:18871.32元 1个月前 14:574楼
    给力,赶紧体验一下
    Suifeng 消费:23.24元 1个月前
    已经体验结束了
0 赏钱 赏礼回复
  • 奋斗 普通粉丝 消费:11元 1个月前 08:104楼
    牛逼得一塌糊涂
0 赏钱 赏礼回复
  • 艺猫 普通粉丝 消费:115.1元 1个月前 06:384楼
    niu'b牛逼

0 赏钱 赏礼回复
  • 星网科技 实战运营者 消费:2145.96元 1个月前 03:49
    华为
    4楼
    非常好。赶快上线。马上买两套。做直播带货。
0 赏钱 赏礼回复
  • 平行线网络01 实战运营者 消费:3115.99元 1个月前 00:214楼
    厉害太需要了[ ,小程序直播你上线,肯定很多人要使用,现在直播供货,太普遍了,微信小程序不搞直播其它平台已经做成白热化,所以肯定是须要的,放心开发吧,上线定普遍 都会标配安装的,
0 赏钱 赏礼回复
  • 午夜梦寒 实战运营者 消费:1484.13元 1个月前 00:14
    其他手机
    4楼
    看着挺好玩,特别是免流量。只是又要审核小程序,确实很烦人
0 赏钱 赏礼回复
更多回复
      你可能感兴趣的主题
恢复多功能编辑器
  • 3 1
  • Suifeng开发交流圈
        圈内贴子3276
    • 圈子成员338
    本圈子内的新贴

    推荐内容
    扫一扫访问手机版
    请选择要切换的马甲:

     
    网页即时交流
    QQ咨询
    咨询热线
    020-28998648