本周在团队内做了一次分享，主题就是关于小程序的，所以将内容整理成文章，以便大家共同探讨。

一、什么是小程序

定义

首先我们先来了解一下一度导致业界为之高潮的“小程序”究竟是个什么鬼。

微信小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

上面是微信官方对小程序的一个定义，再来看一下张小龙对小程序的定义：

从字面上看，小程序就是一个基于微信的应用，这种应用无需从应用市场下载安装，通过扫码或搜索的方式便可直接使用，简单来说就是：基于微信，无需安装，触手可及，用完即走。
既然是基于微信，触手可及，在保证方便快捷体验同时便会有一些限制，而这个限制就体现在“小”上面，我们来看一下“小”在哪里：

限制

无法同时打开超过5个窗口

在一个小程序中，用户的页面浏览层级最多为5级，超出后会报错，所以对于电商应用来说，这是个需要重点关注的地方，以豌豆公主为例，我们商品详情页中含有品牌、视频、推荐等模块，用户的浏览路径很容易便超过5级。

代码编译后大小不超过2M

最初时的限制为1M，这就导致我们在写码是需要尽量注意命名，同时图片等资源不要放在本地，以便控制代码包的大小。

DOM节点不超过16000个

这个限制对于一个轻量的应用来说还好，并不太容易触碰。

二、如何上手

前面我们对小程序有了一个基本的了解，接下来看一下，如何快速上手。

因为小程序是基于微信的，所以整套开发、上传、审核、发布流程都有着严格的限制，很像iOS平台的应用开发流程。首先必须到微信的小程序后台去申请账号，流程和申请公众号相似，申请通过会拿到一个APPID，然后需要下载微信开发者工具，通过开发者工具，可以进行开发、调试、编译、上传等各环节的操作。下载后输入APPID，可以快速创建一个项目：

基本的代码结构如下：

json配置

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json.其中app.json 是对当前小程序的全局配置，包括了小程序的所有页面路径、底部 tab 等。而page目录下的json文件是对独立页面属性的配置。

WXML模板

我们平时的前端开发工作中，接触到较多的是HTML，而在小程序里，充当页面模板角色的便是WXML，与HTML不同的是，WXML是基于基础组件和事件系统构建页面的标签语言，微信提供了一些基础的组件如view、text、button等，同时我们可以在组件上进行事件绑定，如bindtap等。

WXSS

参考WXML，WXSS具有CSS的大部分特性，但同时对CSS进行了扩充和修改，最大的一点不同便是，小程序中的尺寸专用单位——rpx，可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

JS交互逻辑

在小程序中，处理页面事件及业务逻辑的代码都写在js中，同时我们还可以调用微信封装的丰富的API。

三、运行机制

在前面的介绍中，我们发现小程序的代码结构与我们平时前端开发的技术栈（HTML+CSS+JavaScript）十分相似，编码规范基本符合Web规范，本质上也是在Web体系下构建的，那么，我们是否可以理解小程序就是HTML5呢？

答案肯定是否定的，我们来分析下为什么是否定的：首先小程序是运行在微信App中的，而非Browser或者Node环境中，不存在window对象，无法操作DOM，更无法直接访问系统API（可以间接通过微信封装的API访问）。其次，上面代码结构中我们也可以看出WXML，WXSS与HTML和CSS还是有着很大的差别的。所以，小程序与HTML5是两个不同的概念。

运行环境

我们前面说到小程序运行在微信App中，这一点没有错，但不够全面，因为忽略了很重要的一端——微信开发者工具。相信很对同学都知道，微信开发者工具是基于NWjs开发的（Mac系统用户可以通过此路径访问到源码：/Applications/wechatwebdevtools.app/Contents/Resources ）这里说一点题外话，这个NW.js是个什么鬼呢？NW.js 是基于 Chromium 和 Node.js 运行的， 以前也叫nodeWebkit，可以通过前端开发技术进行桌面应用的开发，与此相似的还有一个叫做Electron的框架，像我们熟悉的VSCode、Atom便是基于Electron开发的，相比于NW，Electron在社区活跃度、文档维护等多方面都是有较大优势的，此前也在网上有看到大家猜测微信为何没有Electron而选用NW，有人猜测是因为代码安全考虑，有人猜测是因为NW兼容WindowsXP系统，每个理由似乎都有些道理，但我咨询过微信官方人员后，对方表示“乃们都想太多了，采用NW.js最根本的原因是它对调试工具的支持更完备”。

小程序在开发者工具里是通过nwjs+react实现的，node提供本地API支持，webkit提供web环境，这里不做赘述，我们重点研究一下小程序在真机环境中的运行。

在真机中的实现和ReactNative有点相似，但不同的是RN是调用系统原生组件渲染，而小程序依然是在Webview里进行渲染的，绝大部分组件还是会被转成HTML代码进行渲染的，而JS分别在JSCore（iOS）和腾讯浏览器的X5内核（Android）运行我们先来看一下它的架构：

从上图可以看出，小程序的前端架构主要分为两部分：View视图层和App Service逻辑层。顾名思义，View层是进行UI渲染的，将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。AppService层用来逻辑处理、数据请求、接口调用，它们在两个线程里运行，视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。View层和逻辑层是通过事件的publish和subscribe机制实现通信的，这一点感兴趣的同学可以看一下WeixinJSBridge对象的封装。

小程序在最后都会打包成这样一个结构：

最上面的WAService.js ，提供逻辑层基础的API能力，WAWebview.js ，提供视图层基础的API能力，WAConsole.js 控制台，app-config.js 是小程序完整的配置，包含我们通过app.json里的所有配置，app-service.js 我们自己的JS代码，全部打包到这个文件，page-frame.html 小程序视图的模板文件，所有的页面都使用此加载渲染，且所有的WXML都拆解为JS实现打包到这里，我们通过开发版微信对小程序进行调试可以看到这样的一个情况：

小程序的页面最终还是一个html文件，并没有什么不一样的，联想到前面提到的近似原生的操作体验，无非是多了一个页面缓存能力，本质上依然是Webview渲染的网页。看到这里，有些同学不免有些失望，说好的原生组件渲染呢？不要急，我们在文档中还看到了这样一段话

map、canvas、video、textarea 是由客户端创建的原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 原生组件暂时还无法放在 scroll-view 上，也无法对原生组件设置 css 动画。

这就不难理解了，常规的view、text等组件最终被转成html的标签进行渲染，但是里面还是提供很多系统的原生组件进行渲染的，证据在这里：

上面截图中的页面包含了个video组件，而这个组件正是调用系统原生组件渲染的，我们在调试代码中无法找到这个节点，因为没有进一步查看这一部分是如何实现的，简单猜想一下是，在Webview上面还会有一个层，从图中可以看出，上滑时视频会盖住fix在顶部的导航，这一层便是用来渲染系统原生组件的，两层叠加在一起，便是我们看到的样子了，这一部分，有兴趣的同学可以再深入一步进行分析研究。

四、当前存在的问题

接触一段时间小程序开发后，还是会发现他的一些不尽如人意的地方，比如，不支持cookie，基于现有的服务端接口开发的话，必须需要自己去模拟一套cookie的实现，我们这边是通过localstorage进行封装的；限于包的大小，WXSS无法使用本地的资源。

五、新能力

新组件

前段时间新增一个酷炫的组件，这一点改进可以说是十分大的，因为此前的小程序仅限于自己程序内页面的跳转，无法访问h5页面，而新增的组件只需在后台配置好信任的域名，便可以轻松实现跳转了，脑补一下，以后是不是只需要把小程序做一个壳子，内嵌入原有的移动端站点，便可以迅速将服务拓展到小程序端了。

通知

常规的h5移动站点一个硬伤便是无法对用户进行触达，小程序这边的一个优势便是微信中的模板消息功能，用户在小程序内触发支付和表单提交操作后，可允许开发者向用户在7天内推送有限条数的模板消息，这一点在召回上有很大的意义。
除了上面两点，小程序还支持客服、数据统计等辅助功能。

六、总结

历经两个多月断断续续的开发，豌豆公主的小程序已经发布上线，感兴趣的同学可以体验一下

小程序自面世以来，先是万众期待，后面表现不尽如人意，经历了一段漫长的尴尬期；8月份开始，一些小规模的电商应用从小程序端获取到了可观的流量，同时引起了资本市场的一些关注，可以说发展的道路是曲折的。然而作为技术，作为前端，我觉得小程序的健康发展对整个行业的生态是有很大好处的，给行业以更多可能，给开发者以更多回报（毕竟是基于前端技术栈的），这还不够吗？

以上只是鄙人的一些愚见，还请众大侠指点，一定虚心接受，微信号（xysz1991）