快应用开发最基础学习笔记

一.使用hap-toolkit脚手架初始化一个快应用的项目

1.创建一个文件夹，然后打开快应用的终端，在终端中输入
hap init helloworld

2.接着取他的名称进行确定

3.安装依赖
npm install
4.安装完依赖，目录中会多一个node_modules的包

5.编译项目
npm run build 会生成一个rpk的文件在dist中 可以传到手机中进行测试
6.自动编译修改项目（每次修改完自动编译）
npm run watch

7.启动http服务器。（在终端中新建一个窗口，输入命令）
npm run server
也会生成一个二维码，然后可以用手机调试器进行扫码 也有一个web的预览地址

二.快应用目录结构

1.src是源代码目录，包括所有编码

2.manifest.json 是配置文件

3…ux的后缀名类似于跟.vue的文件
但是app.ux的作用
（1）用于给全局所有页面提供共享成员
（2）应用生命周期的事件（订阅 钩子函数hook）

4.about 是页面文件夹（复杂的页面组件单独）

5.common 是页面与页面之间共享的组件或图片样式

三.应用的配置的修改

在manifest.json中去修改配置的文件
1.通过更改dispaly（展示）为首页进去上方栏的文字和样式。 修改页面的基本样式

如修改titlebartext 或者color 都可以修改

ps：快应用只有两个大小单位 %和px px是相对配置文件中designWidth单位

ps:样式没有继承的概念，必须设置到应用的元素上

四.快应用的轮播图制作

1.轮播图的配置
在标签下放两张图片进行轮播图滚动
for=“{ {xxxx}}”为循环xxxx数组的图片

2.在data的数据存放中 分别存放两个数组（一个是轮播图slides的数组，另一个是九宫格分类中categories的数组）因为有2张轮播图和9个标题宫格。所以通过for进行循环 for="{ {slides}}". for="{ {categories}}"
for这个指令是通过遍历一个数组，生成多个元素！！！

标签：通过indicator控制图中的小圆点
通过autoplay控制自否自动轮播
通过interval控制自动播放的时间
通过样式属性设置小圆点的颜色高亮

<div class="home-page">
    <swiper class="swiper" indicator="true" autoplay="true" interval="5000">
      <image class="swiper-item" for="{
   {slides}}" src="{
   {$item.image}}"></image>
    </swiper>
<div>
<div class="grid">
      <div class="grid-item" for="{
   {categories}}" onclick="navigateTo($item.id)"