本文转载至CSDN博主「小卡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代码:
本文转载至CSDN博主「小卡tut」的原创文章,原文链接如下
https://blog.csdn.net/weixin_44166364/article/details/122474306