1.快应用脚手架 hap-toolkit 搭建
npm i hap-toolkit -g 全局搭建
检查版本 hap-v
2.创建工程
hap init <工程名称>不能使用中文字符
npm i 来装依赖
3.工程目录
（1）src 源代码
（2）sign 签名文件 ****
（3）build 编译临时文件
（4）dist 产出文件（rpk文件） 运用手机调试器 打开rpk文件 可以查看快应用
4.开发调试器
npm run server
npm run watch 自动编译 监视代码改变 随时推送
5.manifest.json
快应用配置文件
1.package - 应用包名
2.name 应用名称
3.router -页面路由
manifest的修改需要 重新 build 才能修改 watch命令不会监听manifest的改变
5.页面
（1）快应用程序由无数个页面组成，
（2）ux文件
<1>template
<2>style
<3>script
三部分组成 ux文件
6.调试
谷歌自带调试器
运用console.log进行输出调试
但是运用console.log进行调试需要对manifest.json中的config文件进行配置
将 其配置为
{
"config": {
"logLevel": "debug"
}
}
只有这样才能 进行console.log输出不然console.log无法使用
7.快应用模版
template
由组件组成
原声组件，不是htmlelement
（1）容器组件 -div list stack ...
（2）基础组件 -a image text ...
（3）表单组件 -input select switch ...
（4）其他组件 -video web canvas ...
官方文档
(https://doc.quickapp.cn/widgets/common-events.html)
8.组建的嵌套
每一个标签是一个DOM节点
9.自定义组件
（1）用于模块化管理
（2）也是基于ux文件
（3）包含了独立的模版、样式、脚本
引入方式
（1）
src 指定ux文件地址
name属性指定自定义组件的名称
***组件中也可以调用组件****
****注意事项
文本内容只能放在 text a span组件中 否则无法显示
10.样式介绍
类css语言
只提供的部分css属性的支持
（1）常见样式
width height margin padding color ...... 等等
选择器 id class tag 后代 多元素选择器(,) 后代直接选择器(>)
（2）选择器优先级
与css一致
父子组件不支持父子组件的继承
11.尺寸单位
（1）百分比
（2） px
不支持 rem em
快应用的自适应方式：
****基准宽度 默认（750px）
在 manifest.json的 config的 designWidth进行修改基准宽度，如果config中没有designWidth，则默认 基准宽度 为750px。
设计稿尺寸实现
1.直接修改基准宽度
2.换算尺寸
设计稿尺寸/设计稿宽度=样式尺寸/基准宽度
例子 基准宽度 ：750
设计稿宽度：1080
设计稿尺寸：800
样式尺寸：800/1080*750约等于556
支持预编译样式
1.sass
2.less
npm i node-sass --save
npm i sass-loader --save
12.盒模型
（1）border-box模型
（2）尺寸包含border宽度
（3）不支持content-box模型 和 box-sizing 属性
13.定位
（1）position属性只支持 none/fixed
（2）如果想使用absolute定位 只能使用stack标签组件
stack组件的子组件都是相对stack本身定位叠加在一起的
14.布局
（1）不支持float
（2）flex布局
（3）display：none/flex
15.脚本
实现程序逻辑
es6标准
可调用接口
但是调用接口前 需要在manifest的feature字段中声明，然后通过import导入
16.viewModel（vm）
（1）Model-View-ViewModel(MVVM)
（2）每个ux对应一个VM实例
（3）以模版为View在脚本中构建
（4）通过脚本中的export default输出实例并运行
17.页面组件与自定义组件
（1）都有各自的VM实例
（2）VM可以嵌套
18.VM的API
（1）this.child('id')-获取指定自定义组件VM
（3）this.root()-获取顶层VM
。。。
19.页面生命周期回调
1.onlnit-数据驱动完成
2.onReady-渲染完成
3.onDestroy-跳转离开
。。。等等
页面对象（page.setTitleBar()-修改标题栏
页面对象属性
1.this.$valid - 页面对象是否可用
2.this.$visible -页面对象是否可见
- app.ux文件
（1）不能改名、移动或者删除
（2）不包含模版和样式，只有脚本
（3）不构建VM实例
（4）用来存放应用中的公共对象
应用对象（app.app.$data - manifest.json 的 config.data
应用生命周期回调
1.onCreate -应用创建的回调
2.onDestroy -应用退出销毁时的回调
21.声明 绑定数据
（1）声明数据模型
在 private:{
title:'Hello,world!'
}
中声明数据
（2）绑定输出
条件输出
if 是直接移除 配套 else；else if
show 相当于注释
列表渲染
（1）for="{{arrayData}}" 默认 value=item index=idx
（2）for="{{value in arrayData}}" -自定义元素名
（3）for="{{(index,value) in arrayData}}" -自定义索引名和元素名
22.页面跳转与数据传递
(1)跳转方式
<1>a标签 href可以用来进行跳转，可以直接把要传对参数写在 href对属性值中，(?key=value)
<2>router.push
uri跳转路径
params参数
例子：router.push ({
uri: '/DemoDetail',
params:''
})
(2)跳转路径
1.页面名称
2.页面路径
3.斜杠（/）如果路由表中没有配置这个路径，会跳转到首页
4.包含schema对完整uri
带有schema的uri会首先使用默认策略
（1）默认策略（http、https、internal）
http、https会打开外部网页，但是要接入webvue接口
（2）internal会根据文件类型调用系统中的应用打开文件
如果默认策略不好用，会尝试系统应用来打开文件，如果还是不行，则会自动抛弃此文件
23.页面栈
（1）通过页面跳转打开新页面旧页面不会关闭
（2）压入栈中
如果使用 router.push进行页面跳转，则可以使用router.back（）跳回上一个页面；
也可以使用router.replace方法替换掉当前页面方式来打开新页面；
router.clear()强行关闭页面栈。
24.页面跳转参数
（1）新页面中接收参数时，构建VM声明要接收的参数名称
（2）需要使用合适的数据模型来接收参数
页面数据模型
影响传入数据的覆盖机制
（1）public - 允许被应用外请求时的数据覆盖
（2）protected - 只允许被应用内请求时的数据覆盖
（3）private - 只允许在VM内部操作
有三种模型的原因：
（1）页面级组件可以接受来自引用外部数据
（2）提高数据安全性
25.自定义组件数据传递
自定义组件数据模型 只有 data一种属性
自定义组件接收参数 props
父组件向子组件传递数据：
父级：
子级：export default{
props:[
"prop1",
"prop2object"
]
}
26.事件监听
（1）原生组件事件
原生组件上的用户行为反馈到脚本里的方式
如何监听组件事件
原生组件事件
1.click-点击 2.longpress -长按 3.appear -出现 等等
触发事件时 响应的函数不管有没有指定参数 都会在参数列表末尾加上 event参数
除了手动触发 也可以通过在VM中 使用
this.emitElement('click') 来主动触发
ViewModel事件
vm中用户自定义的事件
监听
可以通过this.on('customEvent1',this.fnHandler1)
当customEvent1触发时，会执行this.fnHandler1
触发
this.off('customEvent1',this.fnHandler1')
可以移除 this.fnHandler1响应
由于VM存在嵌套关系
所有
可以使用 this.broadcast("customEvent1")向子级发送事件