uni-app对接微信小程序直播

1.登录微信小程序后台-点击>设置->第三方设置->添加直播插件

2.添加直播组件后->点击<详情>      记录这两个参数直播插件的appid和最新版本号

3. 打开项目,找到manifest.json这个文件

代码:

"plugins" : {"live-player-plugin" : {"version" : "1.1.9",   //最新直播组件版本号"provider" : "wx********0" //直播appid}}

4.获取直播间列表

/*** 获取直播列表*/
public function getLive(){//获取access_tokenif($_COOKIE['access_token']){$token = $_COOKIE['access_token'];}else{$token=$this->getAccessToken();setcookie("access_token", $token, time()+7200);}$page                    = i('page', 0);  //当前页码$rows                    = i('rows', 10); //每页记录条数//请求直播间列表接口$live_list_url='https://api.weixin.qq.com/wxa/business/getliveinfo?access_token='.$token;//需要传递的参数$data = array("start"=>$page,"limit"=>$rows);$data = json_encode($data);$res=$this->http_request($live_list_url,$data);//获得直播间列表$result = json_decode($res, true);$this->render('default', $result);
}
/*** 获取access_token*/
public function getAccessToken(){$appid='wx***********25';//小程序appid$appsecret='6ce*********d';//小程序appsecret$url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$appsecret;$res=$this->http_request($url);$result = json_decode($res, true);$access_token=$result['access_token'];return $access_token;
}
//https请求(支持GET和POST)
function http_request($url,$data = null){$curl = curl_init();curl_setopt($curl, CURLOPT_URL, $url);curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);if(!empty($data)){curl_setopt($curl, CURLOPT_POST, 1);curl_setopt($curl, CURLOPT_POSTFIELDS, $data);}curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);$output = curl_exec($curl);//var_dump(curl_error($curl));curl_close($curl);return $output;
}5.uni-app(vue.js)请求列表信息:methods: {getLiveList: function () {let that = this;var params = {page: this.page};that.$.request({url: this.Config.URL.get_live_list,data: params,success: function (data, status, msg, code) {if (data.room_info.length > 0) {for (var r = 0; r < data.room_info.length; r++) {data.room_info[r]['start_time'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(data.room_info[r]['start_time']));}that.setData({live_rows: that.live_rows.concat(data.room_info),});} else {that.setData({flag: !1, ispage: !1})}}});},
}
6.获取的列表信息循环列表显示(根据页面需求自己写页面)需要在列表中加onclick点击事件,把当前房间的roomid传递到点击事件中
7.在点击事件中使用 navigator 组件跳转进入直播间//点击跳转直播页liveDetail(roomid){let roomId = roomid; // 填写具体的房间号,可通过下面【获取直播房间列表】 API 获取let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/live', pid: 1 })) // 开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数),后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、【直播间到商详页面携带参数】章节(上限600个字符,超过部分会被截断)wx.navigateTo({url: `plugin-private://wx2b0*******70/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`})},

转载于:https://blog.csdn.net/qq_33273556/article/details/108549977

uni-app开发经验分享十九: uni-app对接微信小程序直播相关推荐

  1. App前端,Web前端,后端,微信小程序到底该学啥?

    互联网行业发展的速度之快,让每一个从事IT行业的人员目不暇接.作为IT行业的人才,需要不断地学习新知识,否则很容易落伍.2016年,人工智能与虚拟现实着实火了一把,当然,深入研究这两门技术的大多是大公 ...

  2. 分享下自己写的一个微信小程序请求远程数据加载到页面的代码

    分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1  思路整理 就是页面加载完毕的时候  请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码  我是改的 onload ...

  3. 四,layaair对接微信小程序:分享

    本来这系列的博文不准备再更新了,但由于项目后期(小项目)需要对接微信小程序的功能,诸如分享.排行榜之类.后期再考虑使用微信广告功能(这个目前有限制,如果达不到1000用户量的话,是不能接入广告的),由 ...

  4. app能不能跳转外部h5_轻羽微信小程序和H5的区别在哪里?主要有三点

    随着移动互联网的发展,许多应用在不断的产生,要说现在更新快.开放功能多的应用,只能是微信小程序了.微信小程序开放了60多个流量入口,更新了各种新的功能,尤其是之前实现的页面跳转功能,给开发者带来了好消 ...

  5. python日程提醒小程序_用手机APP管理日程太繁琐?试试这个微信小程序

    随着我们日常生活.学习以及工作的日益繁忙,合理安排自己的日程事项变得越来越重要.相信大家在自己的手机里也安装过一些任务管理APP,可是真正坚持用下来的人又有多少呢?如果你觉得手机里的任务管理APP功能 ...

  6. 关于Android开源库分享平台,(GitClub)微信小程序的开发体验

    七八月份的深圳一直在下雨,总有人说雨天适合窝在家看书,对于程序开发者来说更是难得的学习机会.我们502工作室的小伙伴利用这个时间学习了一下微信小程序开发,并上线了一个GitClub小程序,目前功能有些 ...

  7. 微信小程序直播如何接入?开源代码接入案例分享

    小程序直播组件接入指引 一.简介 小程序直播,是微信提供给小程序开发者的直播组件.通过调用该组件,商家可以在小程序中实现直播功能. 按下面的使用说明接入,在你的小程序中引入直播组件. 二.使用方法说明 ...

  8. 第十五周学习周记——微信小程序开发初步

    第十五周学习周记 前言 一.小程序简介 二.小程序代码构成 1. JSON配置 2. WXML模板 3. WXSS样式 4. JS逻辑交互 总结 前言 这一周将开始微信小程序的学习. 一.小程序简介 ...

  9. 小程序一键分享html5,H5手机网站封装微信小程序并实现分享功能的教程

    通过本文教程可以实现将H5手机网站直接封装成微信小程序,并且支持分享功能.但不支持微信支付功能. 说明:手机站域名必须开启https模式 第一步: 微信开发者工具中创建小程序,填写你自己的小程序App ...

最新文章

  1. Python中的shape和reshape()
  2. SAP生产订单预留相关的备忘录
  3. CodeForces - 622C Not Equal on a Segment(思维+水题)
  4. mysql索引底层图_MySQL索引底层数据结构
  5. 开发者调试工具Chrome Workspace
  6. lisp 提取字符串中的數字_Redis 数据结构之字符串的那些骚操作
  7. vim php psr,PHP编码规范(PSR-1)-基本代码规范
  8. _RecordsetPtr
  9. 校园网编写linux网络认证,个人心得:校园网linux锐捷认证ruijie(xrgsu)使用及xrgsu下载...
  10. 前沿分享|上海市新能源汽车数据平台 王成名: 车联网全景监控数据时空超融合数据库方案
  11. 实施ERP系统需要注意哪些方面?
  12. 宽带拨号找不到netcfg.hlp文件
  13. 基于.NET平台的分层架构实战(九)——数据访问层的第三种实现:基于NBear框架的ORM实现
  14. 泰坦尼克号生存预测(超详细)
  15. python 常见日期转换、excel时间转化、日期加N天、减N天等操作
  16. 传奇工程师卡马克入坑 AI:徒手一周实现反向传播和 CNN
  17. 计算机操作电脑试题评分标准,2014计算机一级上机试题(1—5套)评分标准.docx
  18. 4.4OC10-内存管理2-set方法的内存管理
  19. 数字电路实验怎么接线视频讲解_时间继电器怎么看图接线?这可是星三角接触器接线必备元件...
  20. 2022年计算机软件水平考试软件评测师(中级)练习题及答案

热门文章

  1. android 屏幕方向监听,Android如何监听屏幕旋转
  2. 你的名字烂大街了吗?数据揭开国人起名背后的秘密……
  3. USB ncm虚拟网卡
  4. STM32F103标准库开发:KEY按键实验
  5. 基本的信号——冲激信号与冲激序列
  6. 使用disk genius合并C盘和D盘
  7. 计算机标记的定义,标记网格法
  8. OGG12.1(LINUX) for 11G R2 RAC classical install 经典抽取模式单项同步配置OGG12.1
  9. html 图像处理 灰度图和浮雕图类PS
  10. 川土微电子 | CA-IF1051 CAN-FD收发器