概要

天猫精灵小程序是基于支付宝小程序开发的，开发套件也同时被集成在支付宝小程序开发工具中。

当前小程序有2种开发方式：

• 纯触控小程序
• 智能应用语音小程序

对比说明：

纯触控小程序

• 没有语音交互能力，只能在屏幕上触控操作
• 开发和上线流程和普通的支付宝小程序一样
• 适合想要快速从支付宝小程序迁移到天猫精灵上，或者不关心语音交互的小程序
• 大多数情况只在天猫精灵自研设备可用
  

智能应用语音小程序

• 拥有语音交互能力，可使用语音进行操作
• 可以通过调用词语音唤醒小程序
• 语音能力通过智能应用平台配置语音交互模型实现
• 开发过程需要理解语音交互模型和小程序之间的配置关系
• 可以通过智能应用平台-市场向所有商家展示，并在被选择加载之后，在设备可用

一、创建小程序

登录支付宝开放平台，并进入开发者中心。

如图所示，创建应用->小程序->小程序应用，进入创建小程序页面，按小程序创建页面指引完成小程序创建，完成创建后，就可以在开发者中心->我的应用->小程序下看到新创建的小程序了。

进入小程序 设置 页面，在 多端发布支持 分页中，开通 天猫精灵 业务。

二、下载小程序开发工具

点击第一步中完成创建的 小程序，进入 小程序开发管理 页面。

点击右侧的 下载开发工具，进入到下载页，选择适当的版本进行下载并安装。

三、开始小程序开发

打开小程序开发者工具，创建 天猫精灵小程序。

此时若没有登录，会弹出登录二维码，请通过创建小程序的支付宝账号扫码并完成登录。

进入项目开发，若项目从未绑定过小程序，则会自动弹出关联应用弹窗，点击下拉框，选择要关联的小程序，完成关联，就可以开始代码开发了。

小程序的开发，请参考支付宝小程序的官方文档。

四、小程序真机调试

点击 请选择设备，在设备列表中 添加设备，根据页面指导输入天猫精灵设备上播报的验证码，点击确认即可完成调试设备的添加。真机测试对绑定设备的账号有几条要求，详细要求请看文档末尾 附录。

PS: 如果输入验证码后，没有成功绑定设备，可尝试先上传一个小程序的版本，再重试一次。

选中调试设备后，即可通过真机预览的方式，将小程序推送到设备上运行。

至此，纯触控小程序的开发已经完成，可查看本文档第七步：小程序发布。

五、智能应用语音小程序

在普通小程序的基础上，添加语音交互模型的配置，即可增加语音操作能力。智能应用语音小程序，是由开发者自己管理的小程序应用，需要开发者登录智能应用平台手动创建语音交互模型，并配置应用调用词。用户可以通过使用调用词进入小程序。

若要 小程序应用 在 智能应用平台 开发者账号管理，需要满足以下条件：

• 支付宝小程序端已开通 多端发布；
• IDE中，小程序项目创建时选择为 天猫精灵小程序；
• 上传版本前，先绑定一个 带屏真机测试设备。

当以上条件确认满足后，再次上传一个小程序版本，即可在智能应用平台 小程序列表 中找到该小程序应用。

5.1 入驻智能应用平台

登录并入驻 智能应用平台，打开 小程序列表页面。

5.2 关联支付宝开发者账号

点击右上方 关联支付宝账号，或点击自己的 用户头像 进入 用户中心 页面，点击 绑定支付宝账号，用创建小程序所用 支付宝账户 扫码完成绑定。然后重新进入 小程序列表页面。

5.3 填写基本信息

在配置语音交互模型之前，需要先补充小程序智能应用的基本信息。

补充完成后，可以看到 小程序应用 的secretKey，用于在 小程序项目 中注册语音能力。

5.4 配置语音交互模型

语音交互模型的配置请参考【语音交互模型简介】。

小程序智能应用会自动创建一个默认意图，通常情况下，只需对意图进行语料和参数配置即可使用。

5.5 配置页面意图

小程序 在设备交互时，设备通常处于小程序的某个页面，要使页面支持语音交互，需要为页面配置页面意图，当用户话术命中意图语料时，触发页面语音交互。

点击左 侧配置页面意图，进入配置页面意图页面，点击 新增配置，进入 配置页面执行意图页面，填写小程序的页面地址（小程序项目中的 pageId），勾选需要执行的 页面执行意图，提交 保存即可生效。

后续可通过 配置页面执行意图 列表，点击 详情，查看详细配置信息，如有需要，还可以通过 编辑 进行修改。

这里配置的 页面地址 和 页面执行意图，需要与 小程序页面 的xxx.js对应，详情请查看小程序配置。

5.6 配置回复逻辑

小程序 自动生成了 默认意图 和 NLU结果透出 的回复逻辑，配置完 语料 和 参数 后，平台就能在用户说到相关的语句时识别出用户的意图，并且解析出其中的参数，下发给端上的小程序处理。因此 小程序 通常不用修改应用的 回复逻辑。至此 小程序 的 语音交互模型 配置完成。

5.7 小程序配置

在页面的xxx.js下onShow方法中增加语音能力注册，示例如下：

my.call('useCustomSkill', {
  skillName: '小程序Id',
  secretKey: '从基础信息页面获得'
})

在需要响应语音操作页面的xxx.json中，增加commands和js函数之间的映射关系，如下图的index.json所示：

数据格式如下：

{
  "skill":[
      {
        "commands" : ["cmd1", "cmd2"],
        "onVoice" : "jsFun(param1, param2)"  
      }
  ]
}

字段说明：

• commands:
  语音交互模型 中配置的 意图名称。
• onVoice:
  语音command对应的js响应函数。onVoice中的参数名，需与 语音交互模型 配置中，语料 中使用的 参数名称 相同。

示例：

假设要配置的json文件所在项目下路径为pages/index/index.json，而执行的意图为default，需要响应的方法为doSt

则json数据应该配置为：

{
  "skill":[
      {
        "commands" : ["default"],
        "onVoice" : "doSt"  
      }
  ]
}

语音交互模型 中，页面意图应该配置为：

页面地址：pages/index/index

页面执行意图：default

六、语音API

6.1 默认的语音回调

API：onVoiceEvent

说明：如果当前的语音操作，没有命中当前页面的语音配置，且没有触发页面跳转(如：今天天气，我要听歌等)，则会调用page内的onVoiceEvent方法：

Page({
   
  onVoiceEvent(event){
    my.alert({content: "onVoiceEvent = " + JSON.stringify(event)}); 
  },
   
});

示例数据

{
  "command":"NluResult",
  "domain":"AliGenie.Text",
  "param":{
    "domain":"通常为小程序名称",
    "intent":"意图的名称，skill.json方式的commands配置的名称",
    "query":"用户的原始话术",
    "slots":[]
  }
}

回调字段说明

param说明

slots说明

6.2 播报 TTS

API：my.tg.playTTS

入参说明：

reponse：

使用示例：

my.tg.playTTS({
  content: '请问你要选第几个', 
  openMic: true,
  success: function(res) {
    console.log("playTTS complete " + JSON.stringify(res))
  },
  fail: function(res) {
    console.log("playTTS fail " + JSON.stringify(res))
  }
});

6.3 模拟语音请求

API：my.tg.nlpRequest

入参说明：

使用示例：

my.tg.nlpRequest({text: "今天天气"});

6.4 getGenieDeviceInfo

API:  my.call("getGenieDeviceInfo")

功能：获取设备信息

使用示例:

my.call('getGenieDeviceInfo', function(result) {
  my.alert({
    content: JSON.stringify(result);
  })
})

返回示例：

{
  "code":"0",
  "data":{
      "openUUID":"混淆后的设备唯一ID"
  },
  "msg":"Success"
}

6.5 其他

API：my.call

使用示例：

//隐藏顶部导航栏
my.call('hideNavigationBar');
//显示顶部导航栏
my.call('showNavigationBar');
//模拟物理按键，当前仅支持BACK、HOME两种键值
my.call("sendKeyEvent", {"keyCode": "BACK"});

七、小程序发布

7.1 纯触控小程序

请至小程序列表页，点击需要发布的小程序，在开发管理中点击天猫精灵标签，完成提审，并在审核完成后发布

7.2 智能应用小程序发布

1. 小程序智能应用在发布前，需要在智能应用平台应用发布页面填写应用的发布信息，参考【发布内容】。
2. 填写完发布内容后，不需要在应用发布页面提交审核。而是去支付宝开放平台发布小程序。
3. 如果语音交互模型有修改，也是去支付宝开放平台重新发布小程序。

附录

小程序真机预览对账号的要求：

• 平台开发者账号和支付宝开发者账号绑定
• 平台开发者账号登录天猫精灵APP，用于给测试使用的带屏天猫精灵设备配网
• 首次推送真机测试时，使用平台开发者账号登录天猫精灵APP，再次扫码授权应用
• 支付宝小程序IDE登录的账号为绑定的支付宝开发者账号
• IDE中的项目与支付宝开发者账号创建的小程序相绑定
• IDE中的项目从未绑定过其他小程序ID

屏幕适配：

横屏或竖屏之间的适配可以通过rpx来实现。在所有天猫精灵带屏设备中，750rpx等于100%全宽。所以按照天猫精灵CC/CCL的全宽1024px来说，1px = 750/1024 = 0.732rpx

rpx原理可以参考：https://docs.alipay.com/mini/framework/acss