逐渐抹平小程序与web开发体验

这是「优码」第 3 期，分享我一周新的认知

过去一周对我影响最深刻的是一套代码开发多个平台的小程序。

目前大厂基本都有自己的小程序「宿主环境」，其中以微信为首。随后，阿里、百度、头条都纷纷推出了他们自己的小程序。

这就引发了一个问题，这么多小程序平台，难道开发者要开发多套代码吗？

答案肯定不是！

小程序终究属于前端范畴，毕竟它的技术栈与前端技术栈大同小异。前端发展这么多年，Vue、React 框架被应用到无数网站，这已经不是 jQuery 的时代了。受这些框架的影响，小程序的开发体验也被提上了日程。

小程序框架出现了。

小程序框架的出现使得开发者通过一套代码可以开发多个平台的小程序，同时把前端高效的开发体验也加进来了，比如支持 CSS 预处理器、状态管理、Typescript 语言。框架对外宣称提供类 Vue 的开发体验。那这些框架的原理是什么？

小程序虽然没有一个统一的标准，但是各个小程序平台默认都以「微信小程序为标准」，谁不以微信小程序为标准，谁或许将成为开发者眼中的“IE浏览器”。所以各个小程序平台给开发者提供的 API 基本都是“抄”自微信小程序，但是各家小程序都有自己的独特符号，比如百度智能小程序是 swan、微信小程序是 wx、支付宝小程序是 ant、头条小程序是 tt。

在小程序的「宿主环境」中只能识别自己的规范，开发者必须遵循。小程序框架能做的就是通过某种技术对代码进行转换，使得其能符合不同「宿主环境」。一图胜千言：

说白了，小程序框架做的事情就是让开发者通过一种新的规范来开发小程序，小程序通过编译，最终转换成不同平台的代码。

这周我接触到的是百度的小程序框架 OKAM，一套代码可以同时支持多种小程序，同时也支持快应用。功能特性（来做OKAM官方描述）：

1、开发模式
支持单文件组件化开发方式，目录结构更加清晰简洁；
支持 NPM 包的依赖管理和引用；
提供渐进增强可配置方式，包括可配置的构建流程，来提升开发框架能力；

2、开发语法
模板：支持类 Vue 模板语法、Pug 模板语法；
样式：支持 CSS 预处理器和后处理器， Stylus、Less、Sass、Postcss；
脚本：支持 Typescript、ES Next 语法支持；

3、HTML 标签支持
Vue 数据操作语法，包括 computed、watch 支持；
Vue 双向绑定 v-model 指令支持；
filter 模板语法支持；
Redux 数据状态管理；
模板组件 ref 引用支持；
Mixins 支持；
Promise、Async、await 语法支持；
原生接口支持可定制的 Promise 化；
提供原生接口 Hook 能力；
样式 rpx 单位自动转换；
接口 Mock；
图片自动压缩能力；

小程序开发逐步抹平与 web 的差异，还有很多框架，大家自行搜索：

1、京东的 taro：多端统一开发框架，支持用 React 的开发方式编写一次代码，生成能运行在微信/百度/支付宝/字节跳动/ QQ 小程序/快应用/H5/React Native 等的应用；
2、Chameleon：真正专注于让一套代码运行多端的开发框架，提供标准的MVVM架构开发模式统一各类终端；
3、uni-app：使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。

小程序端的发展历程和浏览器当年的发展历程有很多相似之处。

大家周末愉快！

---

推荐阅读：

我是一颗树 · DOM
关于晋升的一点思考