360前端星之小程序

小程序简介

• h5：开发速度快，较长的白屏时间
• app：开发成本较高，各个平台差异较大
• 小程序相对于H5，除了第一次加载，均从本地运行，提高了启动速度
• 相对app，降低了开发成本
• 技术栈
  • HTML/CSS/JS
  • NodeJS
  • 移动适配
  • HTTP协议、HTTPS
  • 简单了解OAuth2
  • GIT
• 类似技术
  • Cordova：通过webview渲染，通过插件调用系统服务
  • PWA：Service Worker和Push API
  • React Native/Weex
  • Flutter

小程序技术架构

• 文件结构
  • json文件
    • app.json：小程序配置信息，pages页面路径，window定义了小程序
    • project.config.json：微信开发者工具配置
    • page下的json：个性化page
    • sitemap.json：指导搜索引擎进行检索
  • WXML
    • 本质是HTML模板
    • 有特定的标签
    • 接管一些简单的逻辑判断
    • 不直接操作DOM，使用数据渲染不同的模板
  • WXSS
    • rpx单位：屏幕宽度与750px的比值
    • CSS精简模式
    • 提供全局和局部的CSS
  • JS
    • APP\Page\Component三个构造函数，方法、生命周期钩子都写在构造函数中
    • 可调用系统API
  • 双线程渲染模式
    
    • WXSS和WXML工作在渲染层（WebView），JS工作在逻辑层（JSCore）
    • 存在多个渲染层
    • 任何数据传递都是线程间的通信
    • 不提倡过多的使用setData
  • 生命周期
    
  • 组件
    • 官方组件
    • 原生组件
    • 自定义组件
  • 插件机制
  • 云端函数
  • 小游戏

开发发布流程

• 发布
  • 小程序平台注册
    • AppID
  • 初始化代码并完成代码仓库
  • 小程序调试

发展

• 多段同构框架
  • 一次编写适配多端，一次迭代各端框架
  • 对多个平台进行动态适配
  • uni-app(Vue),Taro(React),KBone
    • KBone
• 自动化
  • 控制小程序跳转
  • 获取页面数据
  • 获取元素状态
  • 触发元素绑定事件
  • 注入代码片段
  • 调用任意接口
• 硬件框架
• 云IDE
• W3C小程序工作组