系列
前言
这个应该算是入门的一个Demo模板,后面的不管去做什么应用,基本都可以基于这个模板去做自己的代码逻辑扩展,实现自己的功能。
演示视频:HarmonyOS鸿蒙系统北向HAP开发——多页面图片显示及手势事件的处理
工程源代码获取:留言邮箱,私发代码。
说明
如果是第一、二批 Hi3516DV300 用户,建议先去官方库 git clone 一份新的代码。
因为北向关于 BUNDLENAME 这里判断有BUG。
如果不想下载新代码,可以跟着我下面这篇文章去修改源文件然后重新编译烧录。
Hi3516DV300开发板——8. 为HarmonyOS鸿蒙Debug贡献代码——修复了因bundleName无法识别下划线(_)导致安装Hap包失败
准备
先要有一个基本工程,包括一些设置,这个可以看我这一篇文章,先完成一个工程的创建:
Hi3516DV300开发板——7.1 HarmonyOS鸿蒙系统北向HAP开发——编译第一个触摸版本Hello Wold
同时基本掌握以下内容:
- HTML
- JavaScript(JS)
- CSS
思路
相关技术:
- 基本的按键触发功能
- 多页面跳转
- 滑动手势判断
多页面
- 第一页:事件触发功能
- 第二页:实现上下页切换
- 第三页:实现图片显示、手势判断识别
实现功能
- 点击按钮实现相应的功能 —— 点击后文字变化
- 点击按钮跳转下一页 —— 从一个页面跳转到另一个页面
- 上下左右手势的滑动判断
- 向上滑动——上一页
- 向下滑动——下一页
- 向左滑动——上一页
- 向右滑动——下一页
实现
教程所有资料都来自官方文档:JS API 概述
第一页
按键触发功能
HML
<!-- 文本显示 -->
<text class="title" onclick="Change"> Hello {{title}} </text>
- onclick:点击跳转到
Change
函数
JS
export default {
data: {
title: "HarmonyOS",
width: 200,
height: 200,
flag: false,
},
// 实现点击通过Flag标志位 文字转变
Change() {
(this.flag == false) ? this.title = '鸿蒙' : this.title = 'HarmonyOS';
this.flag = !this.flag;
},
实现点击通过Flag标志位 文字转变
演示:
第二页
实现上下页切换
HML
<!-- 跳转到第一页 -->
<input type="button" class="but-style" value="上一页" onclick="Pre_Page"></input>
<!-- 跳转到第三页 -->
<input type="button" class="but-style" value="下一页" onclick="Next_PicPage"></input>
- value: 页面显示的内容
- onclick:点击跳转到
Pre_Page
函数
JS
// 导入模块
import router from '@system.router';
// 跳转到第一页
Pre_Page() {
router.replace({
uri: 'pages/index/index',
});
},
// 跳转到第三页
Next_PicPage() {
router.replace({
uri: 'pages/pic_show/pic_show',
});
},
通过 route
下的replace
方法进行跳转,url
指向绝对路径下的页面
演示:
第三页
滑动手势判断
HML
<!-- 文本显示 -->
<image class="img" onswipe="Pic_show" onclick="Detail_Page" src="{{Image}}"></image>
- onclick:点击跳转到
Detail_Page
函数 - onswipe:点击跳转到
Pic_show
函数 - src:图片源
JS
var time = 0;
export default {
data: {
width: 200,
height: 200,
<!-- src="{{Image}} 图片源 -->
Image: '/common/sky.png'
},
// 点击:跳转到第二页
Detail_Page() {
router.replace({
uri: 'pages/detail/detail',
});
},
// 进行页面逻辑判断
Pic_show(e) {
//如果页面大于4,这说明在最后一张图片处了,则回到首页
if(time > 4)
{
router.replace({
uri: '/',
});
}
//如果页面大于0,说明在第一张图片了,则回到第二页
else if(time < 0)
{
router.replace({
uri: 'pages/detail/detail',
});
}
// 判断在第几次,然后进行相应图片显示
switch(time)
{
case 0:
this.Image = '/common/sky.png';
break;
case 1:
this.Image = '/common/aaa.png';
break;
case 2:
this.Image = '/common/bbb.png';
break;
case 3:
this.Image = '/common/ccc.png';
break;
case 4:
this.Image = '/common/ddd.png';
break;
}
// 判断手势动作,进行相应的页面增加或者变动
switch(e.direction)
{
case 'left':
time--;
break;
case 'right':
time++;
break;
case 'up':
time--;
break;
case 'down':
time++;
break;
}
},
- 手势动作识别,进行相应的time参值变换
- 对参值进行判断,显示想用的图片
- 对time参值 进行对应的首张、末尾图片判断,完成循环
演示: