360前端星计划day5
简介
小程序解决了什么问题
- 技术方面
- h5开发速度快，但是白屏时间长，系统接口访问有局限
- app体验有优势，但是开发成本高，ios和android差异化
- 小程序在两者之间找到均衡点，除了第一次其他页面都从本地加载，有效降低开发成本，各个平台可以使用统一技术栈
- 非技术方面
- 审核保证质量
- 头部app保证流量，运营工具丰富
相关技术栈
- HTML/CSS/JavaScript
- NodeJS
- 移动适配
- HTTP协议/HTTPS
- OAuth2等认证方案
- GIT
主要的小程序平台
- 微信小程序
- 支付宝小程序
- 百度小程序
- 字节跳动小程序
- 京东小程序
- 快应用
- 钉钉小程序
- 360小程序
类似小程序的技术
- Cordova：通过webview渲染，通过插件调用系统服务
- PWA：service worker和push api
- React Native/weex
- Flutter：Dart直接与独立系统的UI库进行交互
小程序技术架构
文件结构及含义
- JSON
app.json：配置文件，页面路径、网络超时、底部tab等pages：描述路径，知道当前小程序定义在哪个目录window：所有页面的顶部、背景颜色、文字颜色等
project.config.json：开发者工具的样式和行为- 每个page下的
json：页面个性化，覆盖app.json中的window sitemap.json：指导搜索引擎
- WXML：本质是HTML，有特定标签，接管一些简单的逻辑判断(
wx:if)，JS不直接操作DOM，只负责set数据 - WXSS：定义样式，提供
rpx单位（屏幕宽度和750的比值，类似vw），精简的CSS，提供了全局或者局部的CSS，允许局部覆盖全局 - JS：负责逻辑交互，
APP、Page、Component三个构造函数，可调用系统API
双线程模型
运行环境：分为渲染层和逻辑层
- 渲染层：
Webview线程，每个页面一个webview，负责WXML和WXSS - 逻辑层：
JsCore线程 - 没有
dom和bom，规避了安全和性能问题 - 数据传递通过线程，通信都是异步的，对传统web库需要定制。同步界面双线程发消息实现，效率有一定折损，不提倡过多setData，比如定时等
生命周期
组件
- 官方组件：容器，基础内容，表单组件，导航，地图，画布
- 原生组件
- 自定义组件：
Component构造器，引入usingComponent，properties，data，observers，behaviors，lifetimes，pageLifetimes
其他
- 插件机制，规范第三方扩展的引用
- 元端函数，开发者使用accesstoken获取权限
- 小游戏，独立于小程序，没有双线程形式
开发发布流程
- 注册：注册AppID，没有绑定过小程序的邮箱
- 微信自带git版本管理
- 不同的调试方式
- 上传，在管理页面发布体验版本和正式版本
小程序的发展
多端同构框架
- 意义：一次编写适配多端，一次迭代各端同步
- 利用Web的优点，以及对各个平台进行动态适配
- uni-app：兼容vue
- Taro：兼容React
- KBone：基于vue，也有基于react的版本，抹平web和小程序的差异
KBone
通过不同入口进入不同端（Web或小程序），使用相同页面；webpack分为两类，对应两端
自动化
微信官方提供自动化框架，可以完成以下功能的自动化：
- 控制小程序跳转到指定页面
- 获取小程序页面数据
- 获取小程序页面元素状态
- 触发小程序元素绑定事件
- 往AppService注入代码片段
- 调用wx对象上任意接口
硬件框架
WMPF架构，能让硬件在脱离微信的情况下运行小程序，设备上搭建微信虚拟环境，通过服务器与客户端的调用对小程序发出指令
云IDE
支付宝小程序云端的IDE，使开发者代码在任何设备上开发
W3C小程序工作组
W3C小程序和快应用草案：URI Schema，Widget，Manifest，Lifecycle，Packaging等方面
