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

本文转载至优快云博主「小卡tut」的原创文章

Part.

1

• • •

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

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

❷ 接着取他的名称进行确定

❸ 安装依赖 npm install

❹ 安装完依赖，目录中会多一个node_modules的包

❺ 编译项目

npm run build 会生成一个rpk的文件在dist中，可以传到手机中进行测试

❻ 自动编译修改项目（每次修改完自动编译）

npm run watch

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

Part.

2

• • •

快应用目录结构

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

❷ manifest.json 是配置文件

❸ …ux的后缀名类似于跟.vue的文件

但是app.ux的作用

（1）用于给全局所有页面提供共享成员

（2）应用生命周期的事件（订阅 钩子函数hook）

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

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

Part.

3

• • •

应用的配置的修改

在manifest.json中去修改配置的文件

❶ 通过更改dispaly（展示）为首页进去上方栏的文字和样式。修改页面的基本样式

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

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

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

Part.

4

• • •

快应用的轮播图制作

❶ 轮播图的配置

在标签下放两张图片进行轮播图滚动

for=“{{xxxx}}”为循环xxxx数组的图片

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

for这个指令是通过遍历一个数组，生成多个元素！！！

标签：通过indicator控制图中的小圆点

通过autoplay控制自否自动轮播

通过interval控制自动播放的时间

通过样式属性设置小圆点的颜色高亮

Part.

5

• • •

请求接口的数据请求fetch

在配置文件manifest.json中的features添加上

{ “name”: “system.fetch” }

❶ 首先导入请求数据的包 import fetch from ‘@system.fetch’

❷ 请求数据的执行代码

fetch.fetch({

url:‘https://locally.uieee.com/slides’,

success:res =>{

const data = JSON.parse(res.data)

this.slides = data

}

})

首先url填接口的地址 接着把数据data转换成json的格式 用箭头函数直接绑定this的指向。这样就可以直接拿到数据。

Part.

6

• • •

Data页面级组件数据模型将data差分得更细了

目的是为了控制数据的读写权限

public ：全部的 公开的。通过其他应用中可以互相传递参数
protected：通过别的页面给它传递参数。内部可访问的数据模型
private ：私有的。内定义的属性不许被覆盖。页面内部自己操作

Part.

7

• • •

绑定事件的方法

❶ 通过onclick来绑定事件

❷ 通过router来使其点击跳转到详细页 导入router包，然后通过
router.push

❸ 新建一个即将要导航过去的页面。然后在配置文件中的路由进行配置。

❹ 通过params传递参数 其也是一个对象

❺ 组件卡的制作，可以从官网的代码复制下来，在进行修改。详细见快应用的官网。
使用tabs

Part.

8

• • •

如何找到点击后对应的下标的方法

❻ 通过tabs标签的onchange事件来判断当前选中的项 选中的下标先默认为0 即currentIndex:0

❼ 再通过e.index这个拿到当前的下标去跟所有的坐标做对比

❽ 通过find函数去找到制定函数中所需要的元素的id所对应的分类

❾ 通过在tabs标签页上去绑定index属性设置默认下标，因为之前的默认下标永远都是0，所以设置一个index属性后就是点哪里就到哪个页面。index="{{currentIndex}}"

this.currentIndex = e.index //设置index属性后得到的下标就是默认下标

Part.

9

• • •

上拉加载更多需求的完成

❶ 首先通过data传递参数_page=1和_limitß=5 一页五条数据

❷ 当列表滚到最低层的时候 触发上拉加载更过。首先要判断它是否触底

❸ 用到触底事件onscrollbottom =”loadmore“

❹ 定义一loadmore函数，设置一个变量

currentPage来判断页数

❺ 这时候的data中的page要改成

this.currentPage. 但是这时候把页面拉到底部后，还是在底部，没办法触发上拉加载更多

这样的原因是因为之前直接给shop赋值data

❻ 所以解决这个原因就可以往里面去追加，通过concat的方法去追加。然后记得还要重新赋值在this.shops上

❼ 然后接着实现加载更多就很简单了，在列表项（list-item）中数据的下面在加一个列表项，在这个列表上只放一个type为loading，然后在里面放上text标签里写上加载更多就可以了

❽ 然后但是这样当我们数据拉完的时候，下面还是会显示加载更多，所以我们还是要去解决一下当数据拉完后显示没有更多数据了

❾ 解决这个问题要先在数据模型中定义一个属性noMore：false 默认false，一旦当你的res.data的数据为空时，就默认为数据全被加载完了，然后在loadmore上判断其data.length为空的时候吧noMore:设置为true

template代码：

数据模型：

js代码：

本文转载至优快云博主「小卡tut」的原创文章，原文链接如下

https://blog.youkuaiyun.com/weixin_44166364/article/details/122474306