小程序技术栈

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

类似小程序的技术

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

小程序技术架构

文件结构及其含义

.json后缀的JSON配置文件

json.png

.wxml后缀的WXML模板文件

本质是HTML模板
有特定的标签
接管一些简单的逻辑判断
JS不直接操作DOM，只负责set数据 基于数据驱动模式

.wxss后缀的WXSS样式文件

提供rpx单位 提供屏幕宽度和750的比值
精简的CSS
提供全局和局部的CSS

.js后缀的JS脚本逻辑文件

负责逻辑交互
APP、Page、Component三个构造函数
可调用系统API

双线程模型

双线程.png

生命周期

生命周期.png

组件

组件.png

开发发布流程

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

小程序的发展

多端同构框架

意义：一次编写适配多端，一次迭代各端同步
利用Web的优点，以及对各个平台进行的动态适配
kbone：

kbone.png

自动化

控制小程序跳转到指定页面
获取小程序页面数据
获取小程序页面元素状态
触发小程序元素绑定事件
往AppService注入代码片段
调用wx对象上任意接口

硬件框架

硬件框架.png