2017 年 12 月 28 日，一款叫做《跳一跳》的微信小游戏横空出世，为微信小程序跳出一片繁华；2018 年 5 月，研究公司 QuestMobile 发布了微信小游戏《跳一跳》的数据，这款只有 4MB 大小的游戏截至 2018 年 3 月份已经积累了 3.9 亿玩家。除了本身平台用户基数的优势，微信还认为，微信小游戏的 加载速度比 HTML5 快 30% 也是其成功的原因。
![]()
据微信游戏产品总监孙春光分享：
《跳一跳》的 次日留存为 65% ，三日留存为 60%，七日留存为 52%，“这已经可以媲美一款非常活跃的 APP 大作了…… 和 H5 游戏行业 20%左右的留存相比更是有翻天覆地的变化。我们做过对比，同样品质的 H5 游戏，做成小游戏，留存率有 10%的提升。”
而跳一跳发布的这一天，距离微信声势浩大的提出“小程序”的概念已经比较久了，一直不温不火、没有广泛群众基础的“小程序”，在《跳一跳》中让普通用户感受到了它的魅力，也让商业开发者嗅到了真正的商机。
全文脉络大体如下图所示：
![]()
小程序
小程序的诞生
如果我们将时间拨回到 2017 年 1 月 9 日 0 点：万众瞩目的微信第一批微信小程序正式低调上线，用户可以体验到各种各样微信小程序提供的服务。
小程序类似传统的 Hybrid 架构，对渲染性能要求较高的组件，通过 Native 组件来实现，以弥补传统 Web 页面性能上的不足。而小程序主要有以下一些优势和特点：
小程序的特点
![]()
而微信小程序，从某种意义上来说，并不算是小程序理念的第一次提出。
2013 年 8 月 22 日，百度 CEO 李彦宏在百度世界大会上正式宣布推出轻应用开放平台，提出“移动搜索+轻应用”是满足海量中长尾应用开发者需求的最佳模式。当时的轻应用主要有以下特点：
- 第一，无需下载，即搜即用：以往，开发者付出高昂成本拉动用户下载应用，每隔十天半月还要推送更新版本，一不小心就遭用户卸载，通过轻应用，开发者后端的每一处更新在前端都自动呈现，无需骚扰用户；
- 第二，破壳检索，智能分发：开发者开发的应用不再是信息孤岛，里面的内容都可以被索引，这跟原生应用形成明显的差别。在应用商店里，只有用户输入明确的 App 名称，例如“滴滴打车”，这个应用才能够被分发。而现在，移动搜索中自然表达的所有与打车有关的需求，比如“我要打车”、“从国贸到雍和宫”等，都将导向开发者开发的打车类应用，大大增加应用的曝光量和使用率，从源头解决分发难题；
- 第三，功能强大，全能体验：轻应用能够帮应用调起语音、摄像头、定位、存储等手机本地或云端的多种能力，让应用的功能更强大；
- 第四，订阅推送，沉淀用户：轻应用不仅支持用户搜索时实现调用，还支持用户主动订阅。如果用户有订阅需求并添加应用，相关开发者就能够将用户沉淀下来，并对用户进行持续、精准的信息和服务推送。
以上内容摘自维基百科。
2016 年 Google 提出的 PWA 的概念，于 2017 年正式落地，2018 年迎来重大突破，全球顶级的浏览器厂商，Google、Microsoft、Apple 已经全数宣布支持 PWA 技术，但是由于国内技术环境的特殊性，PWA 可算籍籍无名。
小程序界的先行者 —— 轻应用、PWA 的结局，想必你已经清楚，最终在国内成功的，只有微信推出的小程序，这不禁使人感叹：赤兔无人用，当须吕布骑。
小程序的技术原理
小程序的运行环境
小程序通常是依附于特定 App 而存在的，根据设备进行分类，小程序通常有以下四种运行环境：
Operating environment
![]()
双线程模型
我们都知道，微信小程序采用双线程模型，将逻辑层与渲染层分开，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层，如下图所示：
![]()
逻辑层与渲染层
小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。开发者写的所有代码最终将会打包成一份 JavaScript 文件，并在小程序启动的时候运行，直到小程序销毁。这一行为类似 ServiceWorker，所以逻辑层也称之为 App Service。
逻辑层与渲染层
![]()
双线程的特点
双线程
![]()
双线层交互的生命周期
双线程交互的生命周期，一图胜千言：
![]()
双线程生命周期
前文提到，小程序是基于双线程模型的，所以在小程序视图层和逻辑层之间的数据传递会存在一定延时。渲染层需要有逻辑层的数据才能把界面渲染出来。
下面对双线程交互的生命周期做简要解释说明：
start 阶段:
- View 线程初始化渲染，包括页面层级等;
- AppService 线程初始化数据，进入 钩子;
初始化完成
- View 线程：通知逻辑层，等待逻辑层数据
- AppService 线程：进入 onShow 钩子，等待渲染层通知
渲染层渲染初始数据
- View 线程：渲染数据
- AppService 线程：等待渲染层通知
渲染层渲染初始数据完成
- View 线程：通知逻辑层初始化数据完成
- AppService 线程：进入 onReady 钩子
数据变化
- AppService 线程：重新把数据发送给渲染层
- View 线程：接收到数据并渲染
切到后台
- AppService 线程：进入 onHide 钩子
切到前台
- AppService 线程：进入 onShow 钩子，发送数据到渲染层
- View 线程：接收到数据并渲染
调用 navigateBack（从页面栈删除）
- AppService 线程：进入 onUnload 钩子
- View 线程：清除层级渲染
小程序运行机制
下图从启动、更新、运行、通信等角度简单总结了小程序运行机制：
![]()
小程序运行机制
页面生命周期
前文描述了双线程交互的生命周期，而页面的生命周期则更加直观明了：
![]()
页面生命周期
页面路由
- 在小程序中所有页面的路由全部由框架进行管理；
- 框架以栈的形式维护了当前的所有页面，开发者可以使用 getCurrentPages() 函数获取当前页面栈；
- 小程序不允许打开超过五个层级的页面。
API
小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等，类别上主要可以分为：
- 事件监听 API；
- 同步 API；
- 异步 API（支持 callback & promise 两种调用方式）；
- 云开发 API，开通并使用微信云开发，即可使用云开发 API，在小程序端直接调用服务端的云函数。
云开发
微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。开发者无需搭建服务器，可免鉴权直接使用平台提供的 API 进行业务开发。
![]()
小程序前景
手机上那些僵尸 App
现在进入六月份了，一年一度的综合所得税汇算也进入最后阶段，每一个普通的我们默默打开个人所得税 App，体味着补税与退税的悲喜；这个一年中只会使用那么几次，却没法真的卸载的 App，承载着我们的悲喜，也诠释着我们在信息化时代的无奈，最先抗议的，也许是手机的内存了。
是的，作为普通人，每天在自己的手机上会使用的 App 有几个？社交电商、衣食住行、银行服务、视频娱乐等较为高频的场景日益聚合在互联网大平台所提供的“超级 App”中，独立第三方 App 即便聚焦细分领域的特定群体，依然不得不与大量其他竞争者激烈争夺消费者掌中那方寸之屏。
我们的手机上满屏满屏的 App，绝大部分都是僵尸 App；作为消费者，我们日常使用的都是超级 App，而且数量不会超过十根手指，剩下的都是墙上的一抹蚊子血。
小程序在未来生活中，将承担越来越多的角色，而这得益于小程序“无需下载、用完即走”的理念，也得益于小程序在技术上制作成本低、内存小、运行快、敏捷迭代、易部署、具有丰富的延展性等技术优势。
百花齐放的小程序
为什么要做小程序？用张小龙的话说是因为越来越多的人通过微信公众号来宣传、推广和销售产品，因为公众号的开发、获取用户和传播成本更低，并且为了更好的服务客户，拆分出来的服务号却没能提供更好的服务，所以微信有必要再研究出一个新的形态，来满足商家直接通过微信服务顾客的需求。这也是一些自带场景属性的平台化 App 涉足小程序的一个重要原因。
随着微信小程序的推出，一些的大厂也纷纷提供了小程序开放平台，一时间，小程序生态百花齐放，好不热闹。而这些大厂才有的小程序能力，我称之为“王谢堂前燕”。
![]()
百花齐放的小程序
从上图不难发现，目前主流 App 利用他们的高流量，在自己的生态下提供一种开放能力，每种 App 都有相应的优势和政策，帮助开发者更有效的宣传和营销。比如：
- QQ 小程序，连接年轻用户的新方式，覆盖 8 亿新生代活跃网民；
- 百度智能小程序，智能连接人与信息、人与服务、人与万物的开放生态，依托以百度 App 为代表的全域流量，通过百度 AI 开放式赋能， 精准连接用户，无需下载安装便可享受智慧超前的使用体验；
- 支付宝小程序是一种全新的开放模式,让合作伙伴有机会分享支付宝及阿里集团多端流量和商业能力,为用户提供更好的体验,助力商家经营升级；
- 字节跳动系小程序（抖音+头条新闻+西瓜视频），广大开发者以字节小程序为载体，利用小程序提供的丰富基础能力完成服务搭建，为字节跳动旗下 App 用户提供优质服务，同时也让自身业务完成流量与转化升级。
小程序行业前景
据 「中研网数据」 显示，2021 年微信小程序日活超过 4.5 亿，全网小程序数量突破 700 万个，小程序开发者突破 300 万，微信为开发者支付的广告分成接近百亿，小程序服务在加速普及。
![]()
小程序行业前景
综上，小程序看起来市场广阔，前景无限，但是似乎有能力提供开放平台的都是一些超级 App。
在当前传统大型企业转型、互联网生态逐渐趋于政策性开放的背景下，普通 App 难道就没法分一杯羹，获得运行小程序的能力吗？数字化时代， 普通 App 最终又将何去何从？
让你App接入小程序
也许大家潜意识里一直觉得，只有那些超级 APP 才具备运行小程序的能力，而且日常生活中使用小程序场景最多的无非就是微信、支付宝、抖音、头条、百度这几个 APP，那你们有没有想过「自己的 APP 也可以具备小程序的运行能力」呢？
虽然互联网大厂并未将这部分小程序运行能力开放出来，但是我们也不必望而生羡，因为小程序技术不再是 BAT 的专属，市面上早就推出了类似技术能力，我们一般称之为小程序容器技术。
目前在 Github 很热门的前端容器技术 —— FinClip，一个可以让任何 APP 都能具备小程序运行能力的前端容器技术，只需简单集成 FinClip SDK ,即可在 iPhone、Android、Windows、Linux、macOS、统信等平台下的应用中运行你的小程序，这意味着，移动端、PC 端、车载设备、智能电视、智能手表都能运行小程序了。同时，它还提供一个后台管理系统，统一管理小程序的上架和下架。
FinClip 小程序容器技术主要有以下几点技术优势：
- 多平台终端兼容：自带多终端小程序 SDK，简单集成后即可在 iPhone，Android，Windows，Linux，macOS 平台下的应用中运行你的小程序。
- SDK 体积小：移动 App 集成 FinClip SDK 后，安装包的体积仅仅增大了不到 3MB;
- FinClip 完全遵循兼容微信小程序的开发标准与规范：如果你有现成的微信小程序，可以不改一行代码直接放进你的 App 里面，运行效果和在微信上面保持一致，不必额外二次开发和改造，大大节省了人力成本。此外，在 FinClip 上架的小程序不需要修改一行代码也能具备用微信登录能力，可基于微信生态建立对应的用户登录体系。
- 支持灰度发布功能：FinClip 提供了面向业务与运营的灰度发布功能，您可以针对不同人群、不同地域设置不同条件，具备超级 APP 才拥有的“千人千面”灵活效果
- 提供小程序 IDE 开发工具 —— FIDE：界面与微信小程序的开发工具类似，自带调试和真机预览，简单易上手，同时支持小程序生成 APP，可以将已有小程序代码导出为 IOS 与 Android 中可用的工程文件（也是近期开发者最喜欢的功能）。
![]()
Generate app
你可以在这个 FIDE 里面，对现有项目进行二次开发，扩展功能和接口，同时它们还支持「小程序一键转换成 APP」，可以将已有小程序代码导出为 IOS 与 Android 中可用的工程文件，由于导出的工程文件已经集成了 FinClip SDK ，所以直接拥有小程序的运行能力，后续可在这个 APP 上继续上架更多小程序，自建自己的小程序生态。
并且 FIDE 中还包含各类扩展插件和接口（支付、人脸识别、音视频、OCR 等），开发者可自主勾选所需的支持插件，从而增强所生成 App 原生能力。
最后，通过一个脑图简单总结一下：
![]()
本文转载至公众号前端印象。
