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

主讲人

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

一、简介

  1. ⼩程序解决了什么问题
  • H5:开发速度较快,各个平台的一致性较好,执行起来会有较长的白屏时间,对于系统接口访问有局限。
  • APP:体验上优势较大,开发成本较高,各个平台会有较大的差异。
  • 小程序:
    相对于H5,小程序除第一次加载,小程序的layout和资源均从本地运行,不经过网络,大大提高了启动速度,减少了白屏加载时间,小程序代码经过审核,宿主APP可以比较放心的把更多权限赋予小程序。
    相对于APP,小程序有效的降低了开发成本,开发者仅使用JS,html,css在统一的平台进行开发。
    第六届360前端星计划_小程序,大世界_第1张图片
  1. 相关的技术栈
  • HTML/CSS/JavaScript
  • NodeJS
  • 移动适配
  • HTTP协议/HTTPS
  • OAuth2
  • GIT
  1. 主要的⼩程序平台
    360PC小程序是唯一基于PC的小程序
    在这里插入图片描述
  2. 类似⼩程序的技术
  • 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:配置文件
第六届360前端星计划_小程序,大世界_第2张图片

  • WXML:小程序的模板布局文件
    • 本质是HTML模版
    • 有特定的标签
    • 接管⼀些简单的逻辑判断
    • JS不直接操作DOM,只负责set数据
    数据驱动模式
  • WXSS:定义小程序样式
    • 提供rpx单位:屏幕宽度和750的比值。(类似vw)
    • 精简的CSS
    • 提供全局和局部的CSS
  • JS
    • 负责逻辑交互
    • APP 、Page、Component三个构造函数
    • 可调⽤系统API
  1. 双线程模型
  • 渲染层:WXML、WXSS,使用Webview渲染,一个小程序存在多个界面,所以渲染出存在多个Webview线程。
  • 逻辑层:JS脚本,采用JsCore线程运行脚本
  • 这两个线程的通信会经由微信客户端做周转,逻辑层发送网络请求,也经由Native转发。
  • 由于小程序使用了双线程,所以小程序的开发脚本中没有了BOM和DOM,所以一切BOM和DOM方法,如非必要,不提供,规避了安全和性能的风险。
  • 小程序是基于双线程模型,意味着任何数据传递都是线程间的通信,所以都会有一定的延时,异步。
  • 对于同步界面,是由双线程发消息来实现的方案,这种消息通信会有一定的效率折损,不提倡用过多的setDate。
    第六届360前端星计划_小程序,大世界_第3张图片
  1. ⽣命周期
  • ⽣命周期:框架在执行过程中按照一定的约定调用一组代码的回调点,在这些点上插入代码,会依照约定的时序,约定的参数和约定的返回来进行调用。
  • View Thread:渲染视图
  • AppService Thread:逻辑视图
    第六届360前端星计划_小程序,大世界_第4张图片
  1. 组件
    快速的界面搭建
    第六届360前端星计划_小程序,大世界_第5张图片
  2. 其他
  • 插件机制
  • 云端函数
  • 小游戏

三、开发发布流程

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

四、小程序的发展

同构框架
• 意义:⼀次编写适配多端,⼀次迭代各端同步
• 利⽤Web的优点,以及对各个平台进⾏动态适配
第六届360前端星计划_小程序,大世界_第6张图片

• 多端同构框架
• ⾃动化
• 硬件框架
• 云IDE
• W3C⼩程序⼯作组
第六届360前端星计划_小程序,大世界_第7张图片

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

你可能感兴趣的:(第六届360前端星计划)