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

流程化