天貓精靈小程式開發（二）

阿新 • • 發佈：2021-09-15

天貓精靈小程式

開發須知

編寫流程

建立賬號

在支付寶小程式中建立支付寶小程式
並開通天貓精靈，建立天貓精靈小程式
1. 在 控制檯 進入小程式設定頁面，在 多端釋出支援 分頁中，開通 天貓精靈 業務。

建立天貓精靈開放平臺賬號，在 使用者中心 --> 小程式開發者賬號 繫結在支付寶開發平臺上註冊的賬號

IDE 下載

小程式開發中者工具下載頁

建立天貓精靈小程式

此時若沒有登入，會彈出登入二維碼，請通過建立 小程式

的 支付寶賬號 掃碼並完成登入。

進入專案開發，若專案從未繫結過小程式，則會自動彈出 關聯應用 彈窗，點選下拉框，選擇要關聯的小程式，完成關聯，就可以開始程式碼開發了。

頁面開發

小程式的開發，請參考支付寶小程式的官方文件。

設計規範

真機除錯

下載天貓精靈 app，繫結裝置，繫結裝置的賬號為支付寶開放平臺建立小程式的賬號
點選 請選擇裝置，在裝置列表中 新增裝置，根據頁面指導輸入天貓精靈裝置上播報的驗證碼，點選確認即可完成除錯裝置的新增。
點選預覽, 點選推送 ,即可將頁面推送至天貓精靈裝置上, 進行除錯

如果輸入驗證碼後，沒有成功繫結裝置，可嘗試先上傳一個小程式的版本，再重試一次。

小程式真機預覽對賬號的要求：

平臺開發者賬號和支付寶開發者賬號繫結
平臺開發者賬號登入天貓精靈 APP，用於給測試使用的帶屏天貓精靈裝置配網
首次推送真機測試時，使用平臺開發者賬號登入天貓精靈 APP，再次掃碼授權應用
支付寶小程式 IDE 登入的賬號為繫結的支付寶開發者賬號
IDE 中的專案與支付寶開發者賬號建立的小程式相繫結
IDE 中的專案從未繫結過其他小程式 ID

語音互動

語音 API

天貓精靈 api： https://www.aligenie.com/doc/357834/gtr434

語音 api 配置互動

示例：

Page({
  onShow() {
   my.call('useSystemSkill', {
    skillName: 'chat',
   })
  },
  //預設的語音指令回撥
  onVoiceEvent(event){
   my.alert({content: "onVoiceEvent = " + JSON.stringify(event)}); 
  },
});

useSystemSkill 詳細：https://www.aligenie.com/doc/357834/gtr434

onVoiceEvent 詳細：https://www.aligenie.com/doc/357834/fft03z

語音互動檔案配置方式

1. mini.project.json檔案配置

{
 "includes": [
  "app.json",
  "skill.json"
  ]
}

2. app.js 同級下新增檔案 skill.json

command ：意圖將 voice 中的語音，轉換為 command
voice：語音操作的語料語料中可以有引數，如 @{index:Number} 表示引數名是 index，型別為數字。目前引數型別支援：String, Number, Date, Time等
tips：當用戶語音未完全滿足當前語料時的語音操作提示資訊預留的可選欄位：語音操作提示資訊，給使用者的操作引導。後續的容器版本，將會自動提取該欄位內容，以輪播的方式展示操作引導。

例子：

  {
   "skill": [
    {
     "command": "pagechage",
     "voice": [
      "開啟@{dish:String}頁",
      "開啟@{dish:String}也",
      "開啟@{dish:String}葉",
      "開啟@{dish:String}耶",
      "開啟@{dish:String}野",
      "開啟@{dish:String}夜",
      "開啟@{dish:String}爺",
      "開啟@{dish:String}",
      "開啟@{dish:String}業",
      "跳轉@{dish:String}野",
      "去@{dish:String}",
      "到@{dish:String}",
      "去到@{dish:String}",
      "來對@{dish:String}",
      "返回@{dish:String}"
     ],
     "tips":["開啟首頁"]
    },
    {
     "command": "onNeed",
     "voice": [
      "@{dish:String}",
      "我想看看我的@{dish:String}有哪些",
      "我有哪些@{dish:String}是要做的"  
     ],
     "tips":["我想看看我的待辦事項有哪些","開啟點餐頁"]   
    }
   ]
  }

3. 在頁面的配置檔案 json 中配置

commands：Array 型別

當前頁面配置的意圖，語音指令名列表，需在skill.json中有配置。

onVoice：

語音command對應的 js 響應函式。onVoice中的引數名，需與skill.json中對應的語料引數名相同。

  {
    "skill": [  
    {
     "commands": ["pagechage"],    
     "onVoice": "onpagechange(dish)"
    }
   ]
  }

4.在頁面的 js 檔案中配置

例子：

  Page({
   onpagechange(dish) {//此函式為配置檔案中onVoice的屬性值
    let strArr = ["待辦", "代辦", "帶辦", "帶半", "待半"];
    if (strArr.includes(dish)) {
     this.toPage("../need/need")
    } else {
     my.tg.playTTS({ text: '您好，您可以說：開啟待辦頁', openMic: true });
    }
   },
   toPage(pageUrl) {
    my.redirectTo({
     url: pageUrl
    })
   },
  });

技能應用平臺配置互動模型

官方文件: https://www.aligenie.com/doc/357834/ewa2ga

https://www.aligenie.com/doc/357834/yg08kg

配置完意圖後 ,在頁面的 xxx.js 下 onShow 方法中增加語音能力註冊，示例如下：

my.call('useCustomSkill', {
  skillName: '支付寶小程式Id（小程式應用基本資訊裡的 MiniAPP_ID）',
  secretKey: '從基本資訊頁面獲得',
  pageId: '語音互動模型-->配置頁面意圖 中建立的頁面地址'
})

會呼叫 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":[]
  }
}

其他

API：my.call 使用示例：

//隱藏頂部導航欄
my.call('hideNavigationBar');
//顯示頂部導航欄
my.call('showNavigationBar');
//模擬物理按鍵，當前僅支援BACK、HOME兩種鍵值
my.call("sendKeyEvent", {"keyCode": "BACK"});