• 鸿蒙应用开发之Hello World-1(续)


    引言

    本文首先通过一个简单HAP(HarmonyOS Ability Package)包的开发,展示了采用JS扩展的类Web开发范式(简称“类Web开发范式”)进行鸿蒙应用前端开发的基本流程;然后将开发出来的HAP安装到小熊派BearPi-HM_Micro_small开发板上,对应用进行了测试。


    续前一节《鸿蒙应用开发之Hello World-1》


    3.2 index.css

    CSS文件用于对页面中所包含的各个组件的样式进行描述,比如:组件的尺寸、颜色、排列方式、对齐方式等等。每一个组件都有一个系统默认的样式,也可在页面CSS样式文件中对组件、页面自定义不同的样式。

    CSS语法参考

    https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/ui/js-framework-syntax-css.md/
    
    https://www.runoob.com/css/css-tutorial.html 
    
    https://www.runoob.com/cssref/css-reference.html
    
    • 1
    • 2
    • 3
    • 4
    • 5

    原代码:

    .container {
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
    }
    
    .title {
        width: 200px;
        font-size: 30px;
        text-align: center;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

    原代码解析:

    (1).container.title都是对页面中的组件所使用的样式类型的描述。

    (2)样式类型container

    widthheight都是通用样式参数(所有的组件都可以使用的样式参数):

    通用样式
    https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md/
    样式参数的类型说明
    https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md/
    
    • 1
    • 2
    • 3
    • 4

    justify-contentalign-items是组件div可以支持的样式参数:

    组件div
    https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-container-div.md/
    
    • 1
    • 2

    (3)样式类型title

    font-sizetext-align是组件text可以支持的样式参数:

    组件text
    https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md/
    
    • 1
    • 2

    修改原代码:

    修改组件div的样式container,增加一个样式参数flex-direction

    .container {
        width: 100%;
        height: 100%;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7

    flex-direction是组件div可以支持的样式参数。

    接下来,我们添加对input组件的样式说明:

    .btn {
        width: 40%;
        height: 5%;
        margin-top: 20px;
    	font-size: 60px;
        font-weight: bold;
        text-align: center;
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    (1)widthheightmargin-top都是通用样式参数。

    通用样式
    https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-common-styles.md/
    样式参数的类型说明
    https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-appendix-types.md/
    
    • 1
    • 2
    • 3
    • 4

    (2)font-sizefont-weightinput组件可以支持的样式参数。

    组件input
    https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-basic-input.md/
    https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/ui/ui-js-components-input.md/
    
    • 1
    • 2
    • 3

    (3)text-align是文本的对齐方式。

    https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/reference/arkui-js/js-components-basic-text.md/
    
    • 1

    页面的预览效果如下图所示:

    在这里插入图片描述

    3.3 index.js

    JS文件用来定义HML页面的业务逻辑。在JavaScript程序中,向上通过图形界面与用户进行交互;向下通过调用JS接口与应用程序的后端进行交互。

    JS语法参考

    https://docs.openharmony.cn/pages/v3.1/zh-cn/application-dev/ui/js-framework-syntax-js.md/
    
    https://www.runoob.com/js/js-tutorial.html
    
    • 1
    • 2
    • 3

    原代码:

    export default {
        data: {
            title: 'World'
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5

    原代码解析:

    一个独立的js文件就是一个模块。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量,也就是向外部暴露改变量。

    default也是JS语言中的一个关键字,表示模块默认输出变量,每个模块只能有这样一个默认输出变量。默认输出变量default后面是变量的值,在这里是一个JS对象(用花括号包起来的键值对的集合)。

    注:模板中自带的js程序非常简单,只是定义并向外暴露了一个变量title,不存在与应用程序后端的交互。

    修改原代码:

    import app from '@system.app';
    export default {
        data: {
            title: 'World'
        },
        exit(e){
            app.terminate()
        }
    }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

    (1)import语句用于从模块@system.app导入一个app类。本文中的例子使用的SDK是HarmonyOS Legacy SDK(API Version6)(JS),在之前准备开发环境的时候,这个SDK已经被下载到了:C:\Users\ASUS\AppData\Local\Huawei\Sdk\js\2.2.0.3,在文件夹\api\smartVision下有一个名为@system.app.d.ts的文件,对应的就是模块@system.app

    (2)exit(e)是用户点击按钮这个事件发生时执行的函数,在这个函数中调用了类app中的函数terminate结束应用。函数的形参e在这里代表捕获到的点击按钮这个事件对象,而实际上,在这个函数里并没有使用这个事件对象。

    四、将代码编译成HAP包

    1、点击DevEco Studio最左下角的OhosBuild Varilants,打开编译模式选择视图,编译模式分debug和release,这里我们选择debug模式。

    在这里插入图片描述

    2、在DevEco Studio的Build菜单中选择Build Hap(s)/APP(s) -> Build Hap(s),开始编译。

    在这里插入图片描述

    3、编译完成后,按下图所示可找到生成的HAP包。

    在这里插入图片描述

    在这里插入图片描述

    4、建议将生成的HAP包改一个有意义的名字,如:hello.hap。

    五、在开发板上安装并运行HAP包

    参考文章:《在小熊派BearPi-HM_Micro_small开发板上安装HAP》

  • 相关阅读:
    用大白话从宏观的角度聊一聊asm技术和class字节码文件和动态代理的关系,绝对通俗易懂
    【代码随想录】day45
    Shell编程规范与变量-01
    HDLbits exercises 2 (MODULES节选题)
    使用 GitHub Actions 通过 CI/CD 简化 Flutter 应用程序开发
    数据预处理之数据缩放
    LeetCode精选200道--栈与队列篇
    Python中的正则表达式(Regex匹配,贪婪匹配Greedy Matching)
    集合Set
    电脑上使用的备忘记事软件哪一款好用点?
  • 原文地址:https://blog.csdn.net/u013819452/article/details/126706923