E企盈营销工具技术服务商 热线:4006-838-530

腾讯在线教育小程序汝阳县E企盈小程序开发实践之路

作者于2019年6月21日赴北京GMTC大前端技术会议小程序专场,分享话题《腾讯在线教育小程序开发实践之路》演讲稿一、腾讯在线教育小程序矩阵首先介绍下腾讯在线教育下的3个主要业务:面向成人职业化,兴趣化学习的腾讯课堂面向小学,初高中k12领域的企鹅辅导面向少儿英语学习的ABCmouse每个业务下都有PC Web,客户端,H5,APP这几端,来满足学生的多端上课需求。但由于教育的前身是基于QQ群视频孵化出来的,后续也是围绕QQ生态去搭建产品形态,所以在流量上面,QQ相关的流量占比较多。我们希望能够通过小程序生态,来为教育业务带来微信端流量的增长,并开通家电清洗小程序电话:4006-838-530且优化学生的微信端上课体验,所以我们打造了在线教育的小程序矩阵。我们通过工具,内容型的小程序,来获取流量。比如腾讯课堂打开小程序,腾讯微课堂,企鹅速算,口语拼读等工具型小程序,并最终转化到平台小程序上。二、小程序基础架构设计及工程化探索上面提到的那么多小程序,我开通水草灯小程序电话:4006-838-530们是如何进行框架选型以及团队在多人协作的开发中,是如何制定统一的开发规范,小程序工程化的探索呢?下面将一一介绍。框架选型时,我们对小程序几大主流开发框架,taro, wepy, mpvue跟原生开发框架进行了对比。可以看出原生框架在CSS预处理,多端复用,管理,自动构建这几块能力对比其他框架是欠缺到。但考虑到以下几点,我们比较倾向于使用原生框架进行开发:小程序的特性更新迭代速度较快,我们希望能最快使用上最新特性,其他第三方框架可能会有迭代滞后到问题我们的多端复用需求较弱对性能调优,问题排查要求较高,希望直接操控原生API那么以上这些开发上的缺陷,使用原生框架是否可以解决,如何解决呢?1,CSS预处理首先来看CSS预处理,我们是期望能够在小程序中使用到CSS预处理,包括嵌套语法,mixin,变量等以及styleLint等工具。经过调研后,我们可以直接使用postcss来写样式文件并编译处理成wxss。并且通过引入插件,可以解决小程序样式开发中的痛点。比如postcss-url解决background-image不支持本地图片问题,将其变成base64格式;通过postcss-font-base64插件将字体变成base64格式。2,数据管理数据管理方面可以使用westore来接入。3,构建小程序的构建需要完成什么事情呢?小程序开发者工具已经提供了部分能力: ES7/ES6转ES5,NPM包管理,代码分包,组件化,打包合并。我们借助gulp来实现图片压缩以及前面提到的Post CSS编译为什么使用gulp而不用更流行的webpack呢?这里补齐的能力主要涉及文件处理比较多,使用gulp开发效率较高,小程序一些官方脚手架也是使用gulp。最后,我们选择了小程序原生框架作为我们的开发框架。并且补齐了跟其他开发框架对比欠缺的基础能力。当然,这里并非说其他框架不好,具体选择还是需要看具体的业务场景。4,目录规范确定好开发框架后,统一的目录规范也是团队协同开发必须约束的。在引入npm包管理后,我们在小程序的基础目录中,通过新起了一个miniprogram目录来作为小程序代码的根目录。这是由于小程序会对node_modules里面的包打包编译到miniprogram_npm目录,为了避免小程序的node_modules跟其他工程化相关的node_modules混在一起,才新起了一个文件夹来存放小程序工程代码。可以通过修改project.config.js可以配置小程序代码的根目录路径。5,编码规范约束好目录,那么在团队协同开发,如何维护规范化,风格统一的代码,我们希望可以团队成员开发时可以统一代码规范, 提交规范, 风格保持一致。因此,跟我们其他web项目一样,我们可以使用 eslint,stylelint,commitment,prettier等插件来对我们的代码进行约束,规范。通过git hook来在做提交时的校验检测,不通过则不允许提交。通过Commitizen以及standard-version来自动化生成统一的版本号以及ChangeLog。会自动将你在本次版本迭代中,提交的规范化log(遵循Angular团队的commit规范: github.com/angular/ang… )自动生成ChangeLog, 注明是特性发布,bugfix还是breakingChange,以及对应的log信息。后续我们在需要回滚或者回溯某一版本的改动时,就可以一目了然。我们基于上面的能力以及约束规范,做成统一的脚手架,方便团队在统一的环境下快速开发,并且开源了出去( github.com/imweb/gener… )。三、小程序开发实践介绍完我们的框架选型,工程化探索,接下去分享下在线教育小程序的开发实践经历。1,小程序音视频第一部分是小程序音视频能力相关的实践。腾讯课堂是一个在线学习的平台,那么最核心的就是音视频直播,录播能力。那么在小程序上面,我们如何搭建课堂音视频能力呢?1),直播场景我们先来看未接入小程序前,腾讯课堂的直播架构。我们通过老师上行到云上,再实时下行到端上, App学生以及通过WebRTC下行到PC web学生。对于延迟要求不高的场景,我们可以将直播流旁路转码到CDN,再供用户拉流观看,以节省成本。这是各端使用的直播协议以及延迟对比,小程序应该采用那种协议,如何接入呢?揭秘之前,我们先来了解下小程序音视频能力的发展历史。最初开通游戏主机小程序电话:4006-838-530,小程序音视频只有原生的video标签。意味着只能支持 HLS高延时直播场景。2017年4月份,腾讯云与小程序达成合作,在小程序上嵌入腾讯云音视频SDK,并封装成了live-pusher,live-player标签,使小程序能够支持更低延迟的直播协议,如:rtmp, http-flv等。因此,我们可以使用live-player来播放rtmp,http-flv协议的流媒体来播放,降低小程序直播场景上的延迟。不过目前live-player还存在一些不足:比如全屏按钮不支持,需要自己定义。由于live-player是原生组件,因此需要通过cover-view以及一些hack方式来实现自定义控制条的全屏按钮跟视频窗口显示层级的bugIOS全屏时,bindevent无效不过小程序后面采用同层渲染的方案,解决了原生组件需要使用cover-view来解决显示层级问题,使用最新版本的基础库即可。使用live-player大概1-2s的延迟,那么小程序上还有没更低延迟的直播方案呢?加入你是在腾讯云上面开通了WebRTC后,可以使用wbertc-room去实现小程序上更低延迟的直播。其原理是基于live-player的RTMP,但走的高速专线,不经过CDN,降低了延迟。(小程序接入课堂音视频的整体架构图)2),录播场景介绍完直播接入方案,接着讲下录播。由于版权保护,腾讯课堂录播播放采用了加密HLS。由于录播对延迟没要求,小程序上面可以直接使用video标签来播放加密hls流。在Web上,播放加密HLS的流程如下:1,获取到加密HLS的m3u8地址,传给video;2,浏览器video底层解析m3u8,发现其带有加密协议标识-EXT-X-KEY,其值是一个获取解密key的接口地址;3,浏览器会自动发起该请求,发起请求,去获取解密key;4,浏览器自动发起请求时,会把用户登陆态通过cookie方式带上,业务后台对cookie鉴权后返回解密key,之后浏览器拿到解密key后就可以解密播放了。但在小程序中,由于小程序是没有cookie的,那么怎么去针对小程序发起的获取解密key请求鉴权呢?

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 腾讯在线教育小程序汝阳县E企盈小程序开发实践之路
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

模王系统开发

联系我们升级日志

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏