前端入门——小程序

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

相关的技术栈
HTML/CSS/JavaScript
NodeJS
移动适配
HTTP协议/HTTPS
OAuth2
GIT
主要的⼩程序平台
360PC小程序是唯一基于PC的小程序

类似⼩程序的技术
Cordova：通过webview渲染，通过插件调⽤系统服务
PWA：Service Worker和Push API
React Native/Weex：JavaScript通过JavaScriptCore等执⾏，并通过Bridges和Native组件交互
Flutter：Dart直接与独⽴系统的UI库进⾏交互
二、小程序技术架构
⽂件结构及其含义
.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
双线程模型
渲染层：WXML、WXSS，使用Webview渲染，一个小程序存在多个界面，所以渲染出存在多个Webview线程。
逻辑层：JS脚本，采用JsCore线程运行脚本
这两个线程的通信会经由微信客户端做周转，逻辑层发送网络请求，也经由Native转发。
由于小程序使用了双线程，所以小程序的开发脚本中没有了BOM和DOM，所以一切BOM和DOM方法，如非必要，不提供，规避了安全和性能的风险。
小程序是基于双线程模型，意味着任何数据传递都是线程间的通信，所以都会有一定的延时，异步。
对于同步界面，是由双线程发消息来实现的方案，这种消息通信会有一定的效率折损，不提倡用过多的setDate。

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

组件
快速的界面搭建

其他
插件机制
云端函数
小游戏
三、开发发布流程
开发者在⼩程序平台注册⼩程序，以获得APPID
• 初始化代码并完成代码仓库配置
• 开发代码并调试
• 上传并发布

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

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

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

cle/details/105463746