开发流程

最后更新于 2021-06-30

文档介绍

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

开发代码包

首先，我们再次明确以下三个概念：

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

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

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

下面进行详细介绍。

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 相同的字段；

特有的字段

参数名	参数类型	是否必须	描述
`extEnable`	`bool`	是	当前 ext.json 配置是否生效
`extAppid`	`string`	是	授权小程序 appid
`directCommit`	`bool`	否	是否启用直接提交模式
`ext`	`object`	否	开发者自定义的数据字段在小程序中可以通过 tt.getExtConfigSync 或者 tt.getExtConfig 获取到这些配置信息。
`extPages`	`object`	否	单独设置每个页面的 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，详见接口说明。

课程视频

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

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

点击纠错

评价此篇文档

开发流程
文档介绍
开发代码包
为授权小程序部署代码包
课程视频