360前端星计划----小程序/点播/自我修养
小程序
什么是小程序？小程序并不是一个专有技术名词，而是为了解决某个问题而出现的技术方案的总称。小程序是利用web开发的技术栈，利用宿主APP加速渲染，并将APP的能力有效对外释放的一系列技术的总称。
- 小程序利用本地文件加载，减少网络请求
- 跨平台兼容好
- 质量有保证，宿主APP运行放心
技术栈
- HTML/CSS/JavaScript
- NodeJS
- 移动适配
- HTTPS
- OAuth2认证方案
- ...
小程序技术架构，以微信小程序为例
文件结构及其含义
json文件
- app.json 小程序文件的配置，比如页面路径(pages)，顶部背景颜色(window)
- project.config.json:开发者工具配置
- 每个page下的json: 个性化page，覆盖app.json中window的配置
- stiemap.json: 指导搜索引擎进行检索
wxml模板文件
- HTML模板
- 有特定的标签
- 有简单的逻辑判断功能
- JS不直接操作DOM，只负责set数据
wxss样式文件
- 提供rpx单位：屏幕宽度和750的比值
- 精简CSS
- 提供全局，局部CSS选择
JS脚本
- 交互逻辑
- APP，Page，Component三个构造函数
- 可调用系统API
双线程渲染模型
和浏览器不同，样式的渲染和JS脚本的执行是由两个不同的进程来管理。两个线程通信由微信转发，而网络请求由Native转发。没有DOM，BOW对象。 任何数据的通信有需要微信转发，有一定延迟，是异步的。
生命周期
与vue，react类似：
- Start开始渲染，以此调用
onLoad,onShowcallback，然后状态变成Created - 渲染线程通知逻辑线程渲染完毕
- 逻辑线程返回初试数据以供渲染
- 渲染完毕，渲染线程变成Ready状态，并通知逻辑线程
- 逻辑线程触发
onReady变成Active状态，发送数据 - 渲染线程收到数据，进行渲染，此后一直保持在这个准备接受数据进行渲染的状态
- 小程序切换后台，逻辑线程触发
onHide变成Alive状态，不再发送数据 - 从后台切换前台时，逻辑线程触发
onShow，变成Active状态，再次发送数据 - 退出时触发
onUnload，双线程销毁
组件机制
- 微信官方提供了官方/原始组件，也可以使用自定义组件
- 此外还提供了插件机制/云端函数/小游戏
开发发布流程
- 注册小程序获得APPID
- 初始化代码并完成代码仓库配置
- 开发代码并调试
- 上传并发布
小程序的发展
多端同构框架
- 一次开发多端适配，更新多端同步
- 多各个平台进行动态适配
- 有uni-app,Taro,KBone等架构
KBone
自动化
要开启服务端口
- 控制跳转制定页面
- 获取页面数据
- 获取小程序页面元素状态
- 触发元素绑定事件
- 调用wx对象上任意接口
- 往AppService注入代码对象
硬件框架
- WMPF 架构，架构了微信的虚拟环境
云IDE
W3C相关提案
点播
什么是视频
格式和内容
- 文件扩展名 = 媒体封装格式/媒体容器类型
- 媒体封装格式 ！= 音视频编码格式
- 文件内容：头信息，索引信息，视频数据，音频数据
视频数据
音频数据
传输协议
- 传统场景
- 流媒体
- 点播传输：通过range方式或者参数方式完成Seek
- WEB端：HTTPs，WS，P2P
播放器原理
- 解协议：解协议
- 解封装：解封装
- 解码
- 渲染
WEB API
媒体兼容判断
videoElement.canPlayType(typestr) 会返回maybe or probably 或者不支持。要知道格式和解码器才能判断，并不准确
交互式视频
基于Video时间轴控制。查看当前时间轴以控制事件触发，然后跳转
播放本地视频文件
使用FileReader() API加载本地视频然后赋值给videoElement.src
播放硬件资源
使用APIwindow.navigator.getUserMedia，返回一个promise，参数是stream，将其赋值给videoElement.srcObject
播放JS拉去的媒体数据
使用API MediaSource
WEB端点播直播&播放方案
点播直播区别
- 点播：创作者上传-转码-存储-CDN分发-观众
- 直播：创作者推流-存储-CDN分发-观众
媒体类型的选择
- HTTP(S)-MP4 点播
- HTTP(S)-FLV 点播直播
- HTTP(S)-HLS 点播，直播有高延迟
主要是会有兼容方面的问题，如果原生浏览器支持播放器，直接原生video播放。但是不支持有几种情况
- 协议或者容器类型不兼容：JS拉去视频，重新解码封装，再通过MSE让video解码
- 解码器不支持：JS下载数据，WASM解容器，解码。通过WebGL&WebAudio渲染播放
- 有解密需求：先js下载，解容器之后逐帧解码
代码的自我修养
衡量代码质量的唯一有效标准: WTF/min
代码规范
- eslint规范：使用第三方包进行代码检查
- 可能的质量问题
- 可能的风格问题
格式
- git commit message 规范
- 合并提交 git rebase -i
