第六届360前端星计划_小程序，大世界

主讲人

• 刘观宇
• 360奇舞团
• PC小程序框架

一、简介

1. ⼩程序解决了什么问题

• H5：开发速度较快，各个平台的一致性较好，执行起来会有较长的白屏时间，对于系统接口访问有局限。
• APP：体验上优势较大，开发成本较高，各个平台会有较大的差异。
• 小程序：
  相对于H5，小程序除第一次加载，小程序的layout和资源均从本地运行，不经过网络，大大提高了启动速度，减少了白屏加载时间，小程序代码经过审核，宿主APP可以比较放心的把更多权限赋予小程序。
  相对于APP，小程序有效的降低了开发成本，开发者仅使用JS，html，css在统一的平台进行开发。
  

2. 相关的技术栈

• HTML/CSS/JavaScript
• NodeJS
• 移动适配
• HTTP协议/HTTPS
• OAuth2
• GIT

3. 主要的⼩程序平台
   360PC小程序是唯一基于PC的小程序
   
4. 类似⼩程序的技术

• Cordova：通过webview渲染，通过插件调⽤系统服务
• PWA：Service Worker和Push API
• React Native/Weex：JavaScript通过JavaScriptCore等执⾏，并通过Bridges和Native组件交互
• Flutter：Dart直接与独⽴系统的UI库进⾏交互

二、小程序技术架构

1. ⽂件结构及其含义

• .json 后缀的 JSON 配置⽂件
• .wxml 后缀的 WXML 模板⽂件
• .wxss 后缀的 WXSS 样式⽂件
• .js 后缀的 JS 脚本逻辑⽂件

JSON：配置文件

• WXML：小程序的模板布局文件
  • 本质是HTML模版
  • 有特定的标签
  • 接管⼀些简单的逻辑判断
  • JS不直接操作DOM，只负责set数据
  数据驱动模式
• WXSS：定义小程序样式
  • 提供rpx单位：屏幕宽度和750的比值。（类似vw)
  • 精简的CSS
  • 提供全局和局部的CSS
• JS
  • 负责逻辑交互
  • APP 、Page、Component三个构造函数
  • 可调⽤系统API

2. 双线程模型

• 渲染层：WXML、WXSS，使用Webview渲染，一个小程序存在多个界面，所以渲染出存在多个Webview线程。
• 逻辑层：JS脚本，采用JsCore线程运行脚本
• 这两个线程的通信会经由微信客户端做周转，逻辑层发送网络请求，也经由Native转发。
• 由于小程序使用了双线程，所以小程序的开发脚本中没有了BOM和DOM，所以一切BOM和DOM方法，如非必要，不提供，规避了安全和性能的风险。
• 小程序是基于双线程模型，意味着任何数据传递都是线程间的通信，所以都会有一定的延时，异步。
• 对于同步界面，是由双线程发消息来实现的方案，这种消息通信会有一定的效率折损，不提倡用过多的setDate。
  

3. ⽣命周期

• ⽣命周期：框架在执行过程中按照一定的约定调用一组代码的回调点，在这些点上插入代码，会依照约定的时序，约定的参数和约定的返回来进行调用。
• View Thread：渲染视图
• AppService Thread：逻辑视图
  

4. 组件
   快速的界面搭建
   
5. 其他

• 插件机制
• 云端函数
• 小游戏

三、开发发布流程

开发者在⼩程序平台注册⼩程序，以获得APPID
• 初始化代码并完成代码仓库配置
• 开发代码并调试
• 上传并发布

四、小程序的发展

同构框架
• 意义：⼀次编写适配多端，⼀次迭代各端同步
• 利⽤Web的优点，以及对各个平台进⾏动态适配

• 多端同构框架
• ⾃动化
• 硬件框架
• 云IDE
• W3C⼩程序⼯作组

控制⼩程序跳转到指定⻚⾯
• 获取⼩程序⻚⾯数据
• 获取⼩程序⻚⾯元素状态
• 触发⼩程序元素绑定事件
• 往 AppService 注⼊代码⽚段
• 调⽤ wx 对象上任意接⼝