小程序页面的DIY功能到底是怎么实现的呢？

最近这段时间，公司老板一拍大腿想做一个微信小程序第三方平台，说白了就是一个商城模板化，然后可以演变为点餐、预约、新零售之类的。
老板参考了几个平台，觉得别人的那个自定义首页模板挺好用的，非要让我也实现一个，其实这玩意倒挺简单的，就是有点费神，完全体力劳动。最后做成了如下效果：

微Ker商城小程序

想体验的可以去 微Ker小程序官网上体验下，今天主要是想分享下开发这个diy模板的经验。

所谓diy模板就是用户可以在后台任意的编辑页面上的元素，比如可以手动的添加轮播图、商品、优惠券等，还可以借助一些辅助组件来实现界面美化，那么开发这么个功能需要这几点：

1. diy组件
2. 页面编辑器
3. 组件数据编辑器

1. diy组件

就是我们可以让用户使用的组件，比如图片组件、商品组件、轮播图组件等，我们要实现两套组件方案，一套供页面编辑器使用，一套供小程序使用，当然你可以用一些前端框架来实现一套组件多处引用。

2. 页面编辑器

就是中间可以让用户调整组件的区域，用户可以把组件拖动到编辑区域，可以调整组件的上下位置，拖动可以用相关的插件来实现。

3. 组件数据编辑器

这也算是个核心了，因为最终呈现的就是这些数据，比如可以设置组件的样式，间距、颜色、展示数据等。

最终我们会生产一个json数据，这些数据是有一个个组件元素组成，每个组件元素都填充有数据，只需要把这个json存储到数据即可，当然为了安全期间，后台也需要做一些验证。

这里只是提供了一个基本思路，希望对你有帮助。

顺便打一波小广告，有想做小程序商城的可以试试这个网站微Ker小程序