代开发环节说明

更新时间 2024-07-24 02:58:49

我的收藏

整体流程图

详细介绍

第一步：绑定模板小程序

服务商在基于第三方小程序提供代开发服务前，需要先绑定开发者账号，在【账号中心】-【开发者账号】完成绑定后，可添加开发者账号下的小程序作为模板小程序，也可以直接创建模板小程序。

小程序绑定第三方小程序之后，将变为模板小程序，并且在第三方小程序的【开发】-【模板管理】-【模板小程序】中增加一条对应的绑定记录。后续在开发者工具上，提交代码至模板小程序，会在对应的绑定记录中展示版本号、版本描述、上传用户、最新上传时间等信息

模板小程序通常只用于进行小程序代码的编写、调试等工作，不会发布上线。

第二步：小程序代码编写

在开发之前，你需要安装小程序开发者工具（下面简称 IDE）。安装完成后即可打开 IDE，用模板小程序的抖音开放平台账号登录 IDE。

在 IDE 创建项目时，填入模板小程序的 AppId，设定项目名称和选择项目目录，即可完成项目创建。其他开发流程，与开发普通小程序一致。详情可查看小程序开发指引。

在 IDE 的【详情】页中，可以看到模板小程序绑定的第三方小程序名称以及当前模板小程序的 AppId。在定制代开发模式下，配置了 ext.json 文件且文件中配置了授权小程序的extAppid，那么详情页中还会有ext_appid授权小程序信息，如下图所示。注意：模板代开发模式下，无需配置 ext.json 文件。

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

第三步

模板代开发：使用开发者工具为模板小程序提交代码

如果采用的是模板代开发模式，则需将在 IDE 中，将代码提交到第三方小程序绑定的模板小程序，具体步骤如下：

完成代码开发及调试后，在 IDE 中点击【上传】，可将代码提交到第三方小程序绑定的模板小程序，在第三方小程序的【开发】-【模板管理】-【模板小程序】绑定记录中，会展示提交代码的版本号、版本描述、上传用户、最新上传时间等信息。注意：此时 IDE 项目中无需配置 ext.json 文件。

定制代开发：开发者工具项目中增加 ext.json 文件并配置商家小程序 AppId

如果采用的是定制化开发模式，则需在 IDE 项目中增加 ext.json 文件并配置商家小程序 AppId。

为了方便服务商对商家小程序进行定制化开发与调试，引入 ext.json 文件。 ext.json 文件是一个类似于 app.json 的配置文件，放置在小程序代码包的根目录下。

ext.json 文件中的配置字段分为两种：

•

特有的字段；

•

同 app.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。

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 配置：

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 最终处理结果：

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"
      }
    ]
  }
}

第四步

模板代开发：将模板小程序代码提交到模板库

如果采用的是模板代开发模式，则需将模板小程序代码提交到模板库。

在第三方小程序的模板管理下的模板小程序中，每个模板小程序只保留最新的一次上传记录。为防止同一个模板小程序多次代码提交被覆盖，可将模板小程序中的临时代码添加到【模板库】中，添加后可以获得模板 ID，模板 ID 用于后续为商家小程序提交代码。每个第三方小程序最多可以有 200 个代码模板。

定制代开发：定制代码开发/调试。此时接口调用将使用商家小程序 AppId

如果采用的是定制代开发模式，则需开发/调试定制代码，此时接口调用将使用商家小程序 AppId。

在 IDE 项目的代码包根目录下配置 ext.json 文件，且配置了 ext.json 文件中的extEnable=true和extAppid=商家小程序等字段，此时对代码进行运行调试，小程序的 JS API 接口将使用商家小程序的 AppId，不再使用模板小程序的 AppId。比如：代码中调用tt.login接口时，获得的code字段需要使用商家小程序的authorizer_access_token调用code2session接口换取openid等信息。

第五步：将代码提交到商家小程序

模板代开发：基于 API 将模板库代码提交到商家小程序

使用商家小程序的authorizer_access_token调用提交代码接口，实现基于模板库代码为商家小程序提交代码。

定制代开发：ext.json 文件配置 directCommit，实现开发者工具将代码直接提交到商家小程序

在 IDE 项目的代码包根目录下配置 ext.json 文件，且配置了 ext.json 文件中的extEnable=true、directCommit=true和extAppid=商家小程序等字段，此时在 IDE 中点击【上传】，实现将代码直接提交到商家小程序测试版。

第六步：基于 API 为商家小程序修改基础信息

使用商家小程序的authorizer_access_token调用修改小程序名称、修改小程序图标、修改小程序简介和增加服务类目等接口，完善商家小程序的名称、图标、简介和服务类目等信息。注意：本步骤不是强制的，如果商家小程序已配置完成，可跳过；另外服务商代调用这些接口的前提条件是，商家授予了基本信息设置权限集。

除了基础信息修改之外，如果商家小程序代码中还使用到了获取用户手机号等需要申请开通的能力，服务商还需要使用商家小程序的authorizer_access_token调用能力代申请接口，完成相关能力的获取。如：代申请获取用户手机号能力可调用获取用户手机号接口。注意：服务商代申请能力的前提条件是，商家授予了运营管理权限集。