第三方平台
接口说明

开发流程

最后更新于 2021-06-30

文档介绍

之前简要描述了小程序如何授权给第三方应用。然而服务商代开发与普通开发在前后端上均有所区别,本文将会介绍服务商如何开发代码包,以及代授权小程序调用第三方平台服务端 API 部署代码包。

开发代码包

首先,我们再次明确以下三个概念:

  • 授权小程序(extAppid):由小程序拥有者在字节小程序开发者平台创建的,授权给第三方服务商代为开发、管理、运营的小程序。
  • 第三方应用(thirdparty):由第三方服务商在第三方平台上创建的一个应用,是第三方服务商完成后续工作的前提。
  • 开发小程序(thirdpartyDevAppid):也称为模板小程序,由第三方服务商在字节小程序开发者平台创建的,并且和第三方应用绑定的小程序,用于开发小程序代码模板。

服务商开发代码包的过程,可以总结为以下四步:

  1. 为第三方应用添加开发小程序;
  2. 用绑定的开发小程序开发代码包模板;
  3. 为授权小程序调试代码;
  4. 上传并将代码包模板添加到第三方平台模板库;

下面进行详细介绍。

1. 添加开发小程序

a) 服务商在开发者平台申请一个普通的小程序,并完善小程序的主体、头像、昵称、简介、服务类目等信息。

b) 进入第三方平台,将该小程序添加为开发小程序。如下图所示,该第三方应用绑定了两个开发小程序:

2. 开发代码包模板

使用创建开发小程序的开发者帐号登录字节跳动开发者工具。

与开发普通小程序一致,在开发者工具创建项目时填入绑定的开发小程序 thirdpartyDevAppid,设定项目名称和选择项目目录即可创建项目。

对于和第三方应用绑定的开发小程序,可以在开发者工具【详情】页卡中看到关联的第三方应用 thirdparty 的名称以及当前开发小程序 thirdpartyDevAppid,如若项目配置了合法的授权小程序 extAppid,那么页卡中也会有相关信息。如下图所示。

服务商在开发者工具中完成开发后,在项目页卡中点击【预览】按钮,打开手机上的抖音等字节系 APP,即可扫描预览二维码查看小程序的真实表现。

注意:

  • 如果确定 ext.json 里面配置的 extAppid 是正确并且合法的,但是详情页中还是没有按预期展示,可以退出 IDE 重试一下。

3. 为授权小程序调试代码

经过第二步,相信服务商已经开发了一套通用的小程序代码包模板,那么这套模板对于授权小程序的适用性究竟怎么样呢?

为了方便服务商对授权小程序 extAppid 进行开发调试,需要引入 ext.json。 ext.json 是一个类似于 app.json 的配置文件,放置在小程序代码包的根目录下。

ext.json 中的配置字段分为两种:

  • 特有的字段;
  • 同 app.json 相同的字段;

特有的字段

参数名参数类型是否必须描述
extEnablebool当前 ext.json 配置是否生效
extAppidstring授权小程序 appid
directCommitbool是否启用直接提交模式
extobject开发者自定义的数据字段
在小程序中可以通过 tt.getExtConfigSync 或者 tt.getExtConfig 获取到这些配置信息。
extPagesobject单独设置每个页面的 json
对象中的每个 key 应该是该小程序模板 app.json 中定义的页面,每个 key 对应的 value 是 page.json 中所规定的各项配置。

同 app.json 相同的字段

当 ext.json 和 app.json 字段名一致时,ext.json 的字段会覆盖 app.json 中的同名字段。

示例

以下是一个包含了所有配置选项的 ext.json:

{
  "extEnable": true,
  "extAppid": "tt07e3715e98c9aac0",
  "extPages": {
    "pages/home/index": {
      "navigationBarTitleText": "home ext tab"
    },
    "pages/index/index": {
      "navigationBarTitleText": "index ext tab"
    }
  },
  "ext": {
    "authAppid": "tt07e3715e98c9aac0"
  },
  "window": {
    "navigationBarTitleText": "ext Demo",
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#fff",
    "backgroundTextStyle": "light"
  },
  "pages": ["pages/home/index", "pages/index/index"],
  "networkTimeout": {
    "request": 80000
  },
  "tabBar": {
    "selectedColor": "#3227af",
    "backgroundColor": "#dddddd",
    "list": [
      {
        "pagePath": "pages/home/index",
        "text": "home",
        "iconPath": "static/tabBar/old.png",
        "selectedIconPath": "static/tabBar/new.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "index",
        "iconPath": "static/tabBar/old.png",
        "selectedIconPath": "static/tabBar/new.png"
      }
    ]
  }
}

相比平时 app.json 配置:

{
  "window": {
    "navigationBarTitleText": "app Demo",
    "navigationBarTextStyle": "yellow",
    "disableScroll": true
  },
  "pages": ["pages/index/index"],
  "networkTimeout": {
    "connectSocket": 60000,
    "request": 10000
  },
  "tabBar": {
    "selectedColor": "#32f7a3",
    "color": "#f335f2",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "index",
        "iconPath": "static/tabBar/old.png",
        "selectedIconPath": "static/tabBar/new.png"
      }
    ]
  }
}

所以,ext.json 与 app.json 最终处理结果:

{
  "window": {
    "navigationBarTitleText": "ext Demo",
    "navigationBarTextStyle": "black",
    "navigationBarBackgroundColor": "#fff",
    "backgroundTextStyle": "light",
    "disableScroll": true
  },
  "pages": ["pages/home/index", "pages/index/index"],
  "networkTimeout": {
    "connectSocket": 60000,
    "request": 80000
  },
  "tabBar": {
    "selectedColor": "#3227af",
    "backgroundColor": "#dddddd",
    "color": "#f335f2",
    "list": [
      {
        "pagePath": "pages/home/index",
        "text": "home",
        "iconPath": "static/tabBar/old.png",
        "selectedIconPath": "static/tabBar/new.png"
      },
      {
        "pagePath": "pages/index/index",
        "text": "index",
        "iconPath": "static/tabBar/old.png",
        "selectedIconPath": "static/tabBar/new.png"
      }
    ]
  }
}

4. 上传并添加到第三方平台模板库

开发完成后,在开发工具中点击上传。

一旦绑定为开发小程序,在开发者工具中上传该小程序的代码包后,会在第三方平台的【草稿箱】中增加一条对应的记录,而不会在开发者平台【版本管理】下的测试版本增加记录。

草稿箱中,每个开发小程序只保留最新的一次上传记录。为防止被覆盖,服务商可将【草稿箱】中临时的草稿代码添加到【模板库】中,添加后可以获得模板 ID。

每个第三方应用最多可以有 200 个代码模板。

为授权小程序部署代码包

开发完模板后,接下来,就可以依次调用第三方平台服务端 API 为授权小程序提交代码提审代码发布代码

注意:

  • 因为开发的代码包模板是通用的,不会也不应该包含 ext.json 配置文件。所以在代授权小程序提交代码时,应该在入参中传入实际生效的 ext.json,详见接口说明。

课程视频

希望通过短视频的形式能够帮助大家更直观的了解开发流程。

视频链接:第三方平台如何代开发小程序

点击纠错
评价此篇文档