系列

前言

这个应该算是入门的一个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

思路

相关技术：

1. 基本的按键触发功能
2. 多页面跳转
3. 滑动手势判断

多页面

• 第一页：事件触发功能
• 第二页：实现上下页切换
• 第三页：实现图片显示、手势判断识别

实现功能

1. 点击按钮实现相应的功能 —— 点击后文字变化
2. 点击按钮跳转下一页 —— 从一个页面跳转到另一个页面
3. 上下左右手势的滑动判断
   • 向上滑动——上一页
   • 向下滑动——下一页
   • 向左滑动——上一页
   • 向右滑动——下一页

实现

教程所有资料都来自官方文档：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 指向绝对路径下的页面

来源：HarmonyOS概念：页面路由

演示：

第三页

滑动手势判断

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;
        }

    },

1. 手势动作识别，进行相应的time参值变换
2. 对参值进行判断，显示想用的图片
3. 对time参值 进行对应的首张、末尾图片判断，完成循环

演示：