开发者学堂课程【AI语音技能云开发实践-1024程序员节创造营公益课：【有屏更有趣 】以天气小助手技能，教开发者如何开发出一个TPL页面】学习笔记与课程紧密联系，让用户快速学习知识
课程地址：https://developer.aliyun.com/learning/course/897/detail/14311
【有屏更有趣 】以天气小助手技能，教开发者如何开发出一个TPL页面
目录：
一、如何去创建一个 屏显模板
二.如何打开调试面板
三.如何将开发好的屏显模板跟语音技能关联起来
四、TPL相互交流
五、页面逻辑写法
六、Page 开发示意
一、如何去创建一个 屏显模板
在开发过程中会使用到一个叫 waft 的一个开发框架。
"name" : "my-demo"，
"version": "0.6.2"，
"description": "waft project example"
Debug
"start": "waft start"
'build": "waft build",
"build – aot ": "waft build -- aot ",
"push": "waft push"
},
"author": "aligenie-skill"，
"license": "MIT" ，
”dependencies": {
"waft": "^0.6.x"，
"waft- json": "^1.1.10"
}，
”devDependencies": {"@typescript-eslint /eslint-plugin": "^4. 13.0"
"@typescript-eslint/parser": "^4.13. 0 "，
'eslint": "A7.17.0"，
"eslint- plugin-waftaslint": "^1.0.0" ，
"stylelint": "^13.13.1",
"stylelint-config-standard": "^22.0.0"，
注（start这个命令是进入一个开发模式，
然后是两个 build 的目录一个是带着 aot 的一个参数
（在 aot 下可以更好的性能表现）最后一个是 push 命令这个命令是用于在本地开发过程中把代码推送到真机设备上，去做预览调试的功能）
二、如何打开调试面板
在系统设置页找到升级更新快速点击系统版本号5下进入开发者模式打开 waft 调试，就可以了
三、如何将开发好的屏显模板跟语音技能关联起来
创建一个屏显模板将构建的代码上传。
通过后端服务打开一个技能回复逻辑，替换模板标识
四、TPL 相互交流
TPL 是为面向有屏音箱的技能开发者在实现了自定义技能的完整语音对话功能后，可以创建一个 TPL 模板为技能增加全屏的屏息交互体验
TPL 交互流程
用户————天猫精灵————智能运用平台————开发者服务
WAFT 前端前端框架介绍
waft 是基于 AssemblyScript 语言开发的前端框架。可以通过它来进行开发waft项目。项目通过编译构建后，
产出后缆为. wasm 的 bundle 包，可以在 web 或装有 waft 容器的设备上，动态的跨端运行。
waft 采用渲染和逻辑分离的架构，通过定义模板视图和页面执行逻辑，两者会通过 state 进行数据绑定。执行逻辑通过更新state,从而触发渲染更新。
五、页面逻辑写法
1. Function 写法
import { JSON, JSONArray, JSONObject }from "waft-json" ;
import { getDataSource, log, FuncPage }from "waft";
let thisPage: FuncPage;
export function Index(page: FuncPage): void{
thisPage = page;
//设置默认 state
page.setState(getDatasource(). toString());
page.onload = function (query: string) {
Log('--> a onload:'+query);
};
page.onshow = function (event: string) {
log('--> onshow:' + event);
};
page.onhide = function (event: string) {
Log('--> onhide:' + event);
};
page. onunload = function (event: string) {
Log('--> onunload:' + event);
}；
page. addEventListener (tapTitle', function (event: string) {
Log('-> tapTitle event:' + event);
thisPage.setStatel(' {"title":"Hello Waft"}' );
});
六、Page 开发示意
1. 根据模板创建页面
在 src/pages 下新建页面demo,包含了demo. axml, demo acss, demo.ts, demo json4个文件
2.在 app.json 中配置页面
{
"pages"; 【
"pages/demo/deno"
】，
"window": {
"defaultTitle": "Hello Waft"
}
}
3. [可选]在 app.json 配置页面渲染基准:
waft 支持配置 viewport, viewport 代表了视觉布局的卡片总宽度基准(手机上都按750px布局) .
如果你的页面设计宽度总像素是按1024px 布局，那只要设置viewport 为1024, css 即可按照1024rpx 来写。 (可以不配置，默认waft 会 按1024px来布局)
{
"pages": [
“pages/demo/demo"
]，
"window": {
"defaultTitle": "Hello Waft"
}
"viewport": 1024
}
4. [可选]在 mock.json 中配 置页面 mock 启动参数:
启动参数包含了以下值
Path：启动页面路径：
Query：启动 query 参数
技能指令
渲染指令
发布成功后，您可以在服务端的回复逻辑中指定-条渲染指令用于唤起屏显模板，
指令内容如下示例:
{
"commandDomain": "ALiGenle.Screen",
"commandName": "Render",
"payload": {
"pageType":“TPL .RenderDocument"。//表示该清染指令为模板演染模式
"data": {
"pageTitle":“TPL2.0屏显示例”，// 真机直染时显示在顶部导航栏的标题
'template': " tpl _code"，//模板的唯一标识
"dataSource": { // 渲染模板所需的数据
“imageUrl": "https://img. alicdn. com/tfs/TB1FHUFLqL 7gK0jSZFBXXXZZ2PXa-
"title":“模板标题”。
"detail":“模板描述"
)，
"config": { //金局配置
"header": ( // 标题栏配置。没有该字段。 则表示不展示 native 的标题栏。
"enabled": true，11 是否显示标题栏， 默认为 false
"height": "100rpx",
"foregroundColor":“#FF7383A2"。//指定标题栏的文字和箭头 icon 颜色，
"backgroundColor": FFFFFF // 指定标题栏的背景格式:# AARRGGBB
)，
"body": {
//卡片加载前的背景色:支持纯色和渐变色，默认灰白色#D4E0F0
"backgroundColor":"Linear-gradient(180deg, #5B07CD 0%，#3DBAD3:
}
}
}
}
}
