前提

为了给多个餐饮商户提供专属的小程序，支持商户DIY小程序首页、订单、购物车、我的页面等，我们需要想出一个解决方案。如果按照传统的开发模式：一个小程序，一个项目。当客户数量增加时，代码的组织和管理将是一场灾难。所以我开始调研第三方开发，以支持多个客户小程序的定制需求。

三方开发 = 服务平台(web端) + 小程序通用模板(微信端)

三方服务思维导图

从下图可以看出，我们需要设计和开发的部分主要是第三方服务平台的搭建和小程序通用模板的开发，下面我会对其中涉及到的一些关键流程进行展开。

三方开发思维导图

小程序授权及上线流程

.png

服务平台（网页端）创建小程序获取预授权码，客户扫码授权

微信授权流程

配置小程序

授权完成后，我们可以通过web端后台封装的小程序列表接口获取授权后的小程序列表，如下图：

.png

这为客户提供了在网页端配置小程序的入口，注意这里配置小程序的过程其实就是通过代码上传接口生成并上传代码的过程。

配置信息有两种类型：

与 app.json 相同的字段

目前我们主要关注字段中的ext字段，我司在web端配置小程序页面（此部分需要大家根据需求DIY），设置的标题图片，小程序皮肤颜色，版本等信息都保存在这个字段中：

.png

保存配置之后，通过代码上传接口将信息上传到微信后台服务，这样微信就会根据小程序模板的 sum 自动生成 ext.json 文件，并将 ext.json 绑定到小程序模板上（这个后面会讲到）。

这样，我们在小程序模板启动时，通过调用wx.方法扫描生成的体验二维码，读取ext.json文件中ext部分信息，就可以获取到肤色等相关数据了。（注意这里不需要走审核发布流程！！！）

小程序审核与发布

配置完小程序后，点击列表上的审核和发布按钮，可以审核并发布刚刚生成的配置信息（）。

审核通过并发布后，我们在微信上搜索小程序名称，就能找到刚刚发布的小程序。（以上前提是第三方平台已经全网发布并审核通过，且微信模板小程序代码也已经添加到模板库中，具体见下文小程序模板部分）

小程序装修

配置完小程序后，客户可以在网页上装饰小程序的一些页面。

由于目前的需求是首页和我的两个页面需要装饰，所以我们在web端模拟了这两个页面，客户可以在上面添加，删除，修改页面模块的样式。

生成的装扮数据保存在后端，小程序启动时会拉取装扮数据，解析并渲染。

小程序模板（微信）

基于Taro框架开发

注册第三方资质。按照文档内容，在微信开放平台创建第三方平台账号；然后注册一个小程序，获取，并作为后续开发的模板小程序；在第三方平台-开发配置中，绑定刚刚注册的模板小程序账号；

开发小程序模板

这部分是基于上面第二步申请的小程序，进行正常的小程序开发。

请注意，当小程序启动时：

所以在封装组件的时候需要考虑如何支持Web端配置的小程序装饰数据和ext.json中的样式数据，这里大家可以发挥自己的想法~

小程序模板发布

编译完小程序后，在微信开发者工具中点击上传

会弹出提示说代码会上传到第三方平台草稿箱，是否继续？这个和普通的小程序开发不一样！！！这里是直接把模板代码上传到微信第三方平台。

你可以在第三方平台的草稿箱中查看刚刚上传的模板小程序，也可以将其添加到小程序模板库中查看生成的模板。

.png

调试 本地调试

由于模拟器无法获取微信平台的ext.json文件，所以需要自行创建一个ext.json文件，放在项目根目录dist下，这样在模拟器启动的时候就可以通过wx.方法获取其中的内容了。

参考文档

微信第三方平台：以上内容，文档里都有详细讲解！