【小程序】小程序CMS页面拼装的实现

现在页面组件化和配置化是一个比较流行的产品设计。我们的小程序最近也有这方面的需求。

CMS原理

一般的拼装页面常见于一些第三方服务平台，类似有赞等，这些平台面向的客户是商家，实际上是商家用户在商家后台拼装好页面后，保存配置，然后重新生成代码发版。客户接收到更新后，看到新的小程序页面。

而我们做为自身的小程序开发，需要的是运营修改页面配置后，在前端实时渲染展示。

这种方式的优点是运营可以实时修改页面（当然如果更新组件，依然需要发版）。缺点是所有组件都在前端，代码体积较大；同时所有配置都是通过请求获取，再进行一层层的渲染，性能要差一些。这就对代码的性能优化和接口的响应速度提出了更高的要求。

目前后端提供的数据是分为以下几层。

这一期新增了秒杀页面，是一个tab页面，上面tab进行切换，下面每个tab又对应一个子页面。

页面暂定的字段，除了组件外，还有页面的标题、背景图、背景色、页面上下边距、页面通用组件间距等，本期新增了一个字段判断是否tab页。

组件首先有一个类型字段，根据这个字段对应不同的组件类型，然后渲染组件内容。有些类型的组件内容是异步再次请求的。组件中又有一个特殊的浮标组件，它是脱离文档流fix定位的。

首先，我们会给每一种组件对应实现一个小程序组件。

然后，要在首页和其他页面展示拼装的页面。首页是必须的，其他页面可以公用一个页面。如果我们在页面引入所有组件并渲染，显然不利于维护。因此，我们需要一个高阶组件(HOC)，通过这个HOC来间接进行各个组件的渲染。

这样，我们只需要在这个HOC中引入所有组件进行维护即可。

进一步的，当我们的页面包含tab页时，可以将页面的渲染再包含一层HOC，传入页面配置。在这一层，判断页面类型，是直接渲染页面，还是先渲染tabs，再在tabs内部渲染子页面。

最后实现的结果如下：