完美解决小程序定制化 - 三方平台开发模式

TralafalgarVV
2,880 阅读6分钟

前提

我们的客户多为连锁餐饮企业，且大部分客户希望有自己的线上商城小程序，来售卖自家商品。每个小程序不可能千篇一律，所以像首页、商品列表、会员中心、我的等页面需要支持可定制化。如果按照传统开发模式：一个小程序一个工程。待客户量上来之后，代码的组织与管理，将会是一个灾难。所以我开始调研三方开发，以满足小程序管理与定制化需求。

三方平台开发模式 = 服务平台 + 通用模板小程序

项目总体结构

我们需要开发的部分，主要包括服务平台和通用模板小程序这两块。其中涉及到的一些名词和流程，会在下面详细展开。

  • 服务平台： web端项目，提供小程序的授权、小程序管理、小程序装修等功能；
  • 通用模板小程序： 本质上就是一个小程序，但是它可以通过读取extJson，获取授权给三方平台的小程序ID(extAppid)，作为自己的唯一性标识。还可以获取解析装修数据，来满足差异化的页面样式需求；

服务平台

先从web端的服务平台开始介绍。此平台集合了小程序的授权、模板选择、提审发布、页面装修等主要功能。 其中小程序授权、发布相关流程如下图所示： image.png 因为涉及到的流程比较多，所以我会在下面一一讲解。

创建小程序

首先需要客户先注册好自己的小程序。后期我们也可以通过微信提供的接口，将注册功能集成到服务平台中。

注册微信第三方平台

参考文档

在微信开放平台，申请注册第三方平台。(此处注册的第三方平台，与下面讲解的服务平台要区分开)。文档中关于第三方平台的内容一定要理解透彻！ image.png

获取预授权码

票据、令牌、预授权码相关文档 注册好微信第三方平台后，即可开始小程序授权流程。

  1. 后台通过微信提供的API启动票据推送服务，获取component_verify_ticket；
  2. 后台通过票据获取令牌component_access_token，有效期2小时，快过期时记得刷新；
  3. 通过令牌获取预授权码 pre_auth_code 以上三步均为后台同学参照微信文档，实现的基础服务。

客户扫码授权

授权流程

  • 在我们的服务平台，需要开发一个授权按钮。用户点击后，后端调用微信接口获取授权URL，web端跳转到URL对应页面；
  • 客户扫码进行授权成功后，页面会根据传入的redirect_uri自动返回发起授权动作页面。并将 authorization_code等信息作为query参数。
  • 最后拿刚刚得到的授权码获取接口调用令牌（authorizer_access_token）。(此令牌很重要，用于后面代码上传、提审、发布等接口)

配置小程序

授权完成后，可以调用后台包装的小程序列表接口，获取到已授权给我们服务平台的小程序列表，如下图：

image.png 点击小程序管理按钮，进入小程序信息配置页面。

image.png 点击配置版本按钮，会出现如下弹框，可以在此处对通用模板小程序(后面会讲)的不同版本进行切换。

image.png

选择好版本，并点击确认按钮。会通过后端间接调用微信的上传extJson接口。

extJson

extJson说明文档 extJson中的信息分两种：

  • 特有字段
    • extEnable：配置 ext.json 是否生效
    • extAppid：授权给第三方平台的小程序ID（重要）
    • ext：开发自定义的数据字段
    • ...
  • 与 app.json 相同的字段
    • window
    • tabbar
    • ...

目前主要关注特有字段中的 ext 字段。我们在点击小程序配置弹框的确认按钮时，将groupID、tabbar、版本等信息，保存在ext这个字段中：

image.png

调用完代码上传接口后，刚刚的extJson信息上传到微信后台服务。这样微信会自动生成ext.json文件，并根据 通用模板小程序(后面会讲) 的appID和extJson中的extAppid，将ext.json文件与通用模板小程序进行绑定。

此时我们可以通过获取小程序二维码接口生成该小程序的体验二维码。

我们通过扫描生成的体验二维码，在通用模板小程序启动时，通过调用wx.getExtConfigSync方法读取到ext.json文件中的ext部分信息。从而拿到groupID、tabbar信息等关键数据，进一步请求业务相关接口。（注意此处不需要走提审、发布流程！！！）

提审、发布小程序

配置完小程序后，点击后面的提审、发布按钮，对刚刚生成的小程序进行提审、发布等操作。

审核通过并发布后，我们就可以通过在微信端搜索小程序名称，找到刚刚发布的小程序啦。

小程序装修

配置完小程序后，客户就可以在web端对小程序的部分页面进行装修。这部分功能可以参考有赞。

(以上部分的前提是微信第三方平台已经注册完成、全网发布审核通过，通用模板小程序代码也已经添加到模板库。详情见下面的通用模板小程序部分)

通用模板小程序

基于Taro框架开发

注册通用模板小程序

  1. 注册一个小程序，获取 appid；
  2. 在第三方平台 - 开发配置中，绑定注册好的通用模板小程序；

开发模板小程序

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

需要注意在小程序启动时：

  • 需要调用wx.getExtConfigSync方法读取到ext.json文件中的ext部分信息；

因为我们的小程序支持页面装修，所以在启动时还会获取装修数据，并绘制相关组件。

模板小程序发布

编译完小程序后，在微信开发者工具中点击上传 会弹出提示代码将会上传到第三方平台的草稿箱，是否继续?此处与普通小程序开发不一样了！这里直接把模板代码上传到微信三方平台。

你可以在三方平台的草稿箱中查看刚刚上传的模板小程序。也可以将其添加到小程序模板库，即可看到生成的 templateID (此ID是根据模板传入的次数累加得到的)。

image.png

调试

本地调试

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

参考文档

微信三方平台：上文所有内容，文档中均有详细说明！

avatar
文章
阅读
粉丝