天猫精灵小程序开发（二）

川卉發表於 2021-9-15 16:47:00

<h2 class="md-end-block md-heading">天猫精灵小程序</h2>
<h3 class="md-end-block md-heading">开发须知</h3>
<ul class="ul-list" data-mark="-">
<li class="md-list-item md-focus-container">
支付宝小程序编写
</li>
<li class="md-list-item">
天猫精灵语音接入
</li>
<li class="md-list-item">
自定义小程序应用快速入门
</li>
<li class="md-list-item">
语音小程序开发流程
</li>
<li class="md-list-item">
AliGenie 开发者答疑交流钉钉群： 31630820
</li>
</ul>
<h3 class="md-end-block md-heading">编写流程</h3>
<h4 class="md-end-block md-heading">创建账号</h4>
<ol class="ol-list" start="">
<li class="md-list-item">
在 支付宝小程序 中创建支付宝小程序
</li>
<li class="md-list-item">
并开通天猫精灵，创建天猫精灵小程序
<ol class="ol-list" start="">
<li class="md-list-item">
在 控制台 进入小程序 设置 页面，在 多端发布支持 分页中，开通 天猫精灵 业务。
</li>
</ol></li>
</ol>
<img src="https://cdn.nlark.com/yuque/0/2020/png/452262/1600152011179-8e2e4c4f-62bf-4da3-a75d-ace85b93fd9a.png">
<ol class="ol-list" start="3">
<li class="md-list-item">
创建 天猫精灵开放平台 账号，在 用户中心 --> 小程序开发者账号 绑定在支付宝开发平台上注册的账号
</li>
</ol>
<h4 class="md-end-block md-heading">IDE 下载</h4>
 小程序开发中者工具 下载页
<h4 class="md-end-block md-heading">创建天猫精灵小程序</h4>
<img src="https://cdn.nlark.com/yuque/0/2020/png/452262/1587627473107-338b82a1-f68f-42a4-b548-cace66172013.png">
此时若没有登录，会弹出登录二维码，请通过创建 小程序 的 支付宝账号 扫码并完成登录。
<img src="https://cdn.nlark.com/yuque/0/2020/png/452262/1587627473195-242e17e4-b802-447c-820f-d9f3fcab429a.png">
进入项目开发，若项目从未绑定过小程序，则会自动弹出 关联应用 弹窗，点击下拉框，选择要关联的小程序，完成关联，就可以开始代码开发了。
<img src="https://cdn.nlark.com/yuque/0/2020/png/452262/1587627473241-96b58605-5317-4d81-b3dc-f304d285cbbb.png">
 
<h4 class="md-end-block md-heading">页面开发</h4>
 小程序的开发，请参考支付宝小程序的 官方文档。
 设计规范
<h4 class="md-end-block md-heading">真机调试</h4>
<ol class="ol-list" start="">
<li class="md-list-item">
下载天猫精灵 app，绑定设备，绑定设备的账号为支付宝开放平台创建小程序的账号
</li>
<li class="md-list-item">
点击 请选择设备，在设备列表中 添加设备，根据页面指导输入天猫精灵设备上播报的验证码，点击确认即可完成调试设备的添加。
</li>
<li class="md-list-item">
点击预览, 点击推送 ,即可将页面推送至天猫精灵设备上, 进行调试
</li>
</ol>
如果输入验证码后，没有成功绑定设备，可尝试先上传一个小程序的版本，再重试一次。
<img src="https://cdn.nlark.com/yuque/0/2020/gif/452262/1587627473291-f9507b1a-e0f8-402b-a9ae-35b9156648a6.gif">
小程序真机预览对账号的要求：
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
平台开发者账号和支付宝开发者账号绑定
</li>
<li class="md-list-item">
平台开发者账号登录天猫精灵 APP，用于给测试使用的带屏天猫精灵设备配网
</li>
<li class="md-list-item">
首次推送真机测试时，使用平台开发者账号登录天猫精灵 APP，再次扫码授权应用
</li>
<li class="md-list-item">
支付宝小程序 IDE 登录的账号为绑定的支付宝开发者账号
</li>
<li class="md-list-item">
IDE 中的项目与支付宝开发者账号创建的小程序相绑定
</li>
<li class="md-list-item">
IDE 中的项目从未绑定过其他小程序 ID
</li>
</ul>
<h4 class="md-end-block md-heading">语音交互</h4>
<h5 class="md-end-block md-heading">语音 API</h5>
 天猫精灵 api： https://www.aligenie.com/doc/357834/gtr434
<h5 class="md-end-block md-heading">语音 api 配置交互</h5>
示例：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">Page({ onShow() {  my.call('useSystemSkill', {    skillName: 'chat',  }) }, //默认的语音指令回调 onVoiceEvent(event){  my.alert({content: "onVoiceEvent = " + JSON.stringify(event)}); }, });</pre>
 <code>useSystemSkill</code> 详细：https://www.aligenie.com/doc/357834/gtr434
 <code>onVoiceEvent</code> 详细：https://www.aligenie.com/doc/357834/fft03z
<h5 class="md-end-block md-heading">语音交互文件配置方式</h5>
 1. <code>mini.project.json</code>文件配置
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">{  "includes": [    "app.json",    "skill.json" ] }</pre>
 2. <code>app.js</code> 同级下添加文件 <code>skill.json</code>
<ul class="ul-list" data-mark="-">
<li class="md-list-item">
<code>command</code> ：意图 将 <code>voice</code> 中的语音，转换为 <code>command</code>
</li>
<li class="md-list-item">
<code>voice</code>：语音操作的语料 语料中可以有参数，如 <code>@{index:Number}</code> 表示参数名是 index，类型为数字。 目前参数类型支持：String, Number, Date, Time等
</li>
<li class="md-list-item">
<code>tips</code>：当用户语音未完全满足当前语料时的语音操作提示信息 预留的可选字段：语音操作提示信息，给用户的操作引导。 后续的容器版本，将会自动提取该字段内容，以轮播的方式展示操作引导。
</li>
</ul>
 例子：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">   {     "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":["我想看看我的待办事项有哪些","打开点餐页"]             }     ]   }</pre>
 3. 在页面的配置文件 json 中配置
 <code>commands</code>：Array 类型 
 当前页面配置的意图，语音指令名列表，需在<code>skill.json</code>中有配置。
 <code>onVoice</code>：
 语音<code>command</code>对应的 js 响应函数。<code>onVoice</code>中的参数名，需与<code>skill.json</code>中对应的语料参数名相同。
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">   {    "skill": [         {         "commands": ["pagechage"],                 "onVoice": "onpagechange(dish)"       }     ]   }</pre>
 4.在页面的 js 文件中配置
 例子：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">   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       })     },   });   </pre>
 
<h5 class="md-end-block md-heading">技能应用平台 配置交互模型</h5>
 官方文档: https://www.aligenie.com/doc/357834/ewa2ga
 https://www.aligenie.com/doc/357834/yg08kg
配置完意图后 ,在页面的 <code>xxx.js</code> 下 <code>onShow</code> 方法中增加语音能力注册，示例如下：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">my.call('useCustomSkill', { skillName: '支付宝小程序Id（小程序应用基本信息里的 MiniAPP_ID）', secretKey: '从基本信息页面获得', pageId: '语音交互模型-->配置页面意图中创建的页面地址' }) </pre>
会调用 <code>page</code> 内的 <code>onVoiceEvent()</code> 方法
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">Page({   onVoiceEvent(event){  my.alert({content: "onVoiceEvent = " + JSON.stringify(event)}); }, });</pre>
示例数据：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">{ "command":"NluResult", "domain":"AliGenie.Text", "param":{  "domain":"通常为小程序名称",  "intent":"意图的名称，skill.json方式的commands配置的名称",  "query":"用户的原始话术",  "slots":[] } }</pre>
<h5 class="md-end-block md-heading">其他</h5>
API：<code>my.call</code> 使用示例：
<pre class="md-fences mock-cm md-end-block">//隐藏顶部导航栏
my.call('hideNavigationBar');
//显示顶部导航栏
my.call('showNavigationBar');
//模拟物理按键，当前仅支持BACK、HOME两种键值
my.call("sendKeyEvent", {"keyCode": "BACK"});</pre>
<h5 class="md-end-block md-heading"> </h5>
<h3 class="md-end-block md-heading">小程序发布</h3>
<ol class="ol-list" start="">
<li class="md-list-item">
语音小程序开发完成后,您就可以在 IDE 中上传小程序 ;
</li>
<li class="md-list-item">
如果是语音小程序则需要在智能应用平台应用发布页面填写应用的发布信息，参考【发布内容】；
</li>
<li class="md-list-item">
填写完发布内容后，去 支付宝开放平台 将需要发布的版本提交审核，提交审核时请注意, 是提交到天猫精灵；
</li>
<li class="md-list-item">
如果审核通过，需要去 支付宝开放平台 将审核通过的版本进行发布，发布后天猫精灵的用户就可以在天猫精灵带屏设备上使用这个小程序了。
</li>
</ol>
<blockquote>
小程序提审、发布与运营
小程序审核规范
</blockquote>
<h3 class="md-end-block md-heading">注意事项</h3>
<h4 class="md-end-block md-heading">1.发布须知</h4>
<img src="http://dbp-resource.cdn.bcebos.com/40dbceda-05ff-8446-3580-c7d9a24f0d76/image-20210908163741455.png">
 2.建议使用 v1.17 稳定版小程序开发天猫精灵小程序，用ide 2.0以上上传天猫精灵小程序，天猫精灵技能应用平台 不展示已发布的天猫精灵小程序;
 3. <code>sill.json</code> 出现过服务链接终端的情况, 建议在 天猫精灵技能应用平台 配置意图。 
来源：https://www.cnblogs.com/wxyblog/p/15272941.html

頁: [1]

琼殿技术论坛's Archiver

天猫精灵小程序开发（二）