HormonyOS_JS培训

bioioid_song

已于 2022-06-15 23:02:15 修改

阅读量205

点赞数

文章标签： javascript json

于 2022-06-13 21:56:02 首次发布

本文链接：https://blog.csdn.net/m0_49786709/article/details/125268391

版权

config.json文件中
deviceType:启动应用的对应设备
js:
pages:用来存放路由
default文件夹

app.js
onCreate()：应用创建的时候触发的生命周期钩子函数
onDestroy()：应用销毁的时候触发的
这两个是应用级别，应用级别结束后就会进入页面级别，即index.html下

进入i18n文件夹下，zh-CN.json

{
    "string":{
        "hello":"您好",
        "world":"世界"
    }
}

<div class="container">
	<text class="title">
	 	{{ $t('string.hello')}} {{ title }}
		<!--使用&t就可以直接渲染-->
        <!--title是通过index.js下的data部分的title值进行-->
	</text>
</div>

//index.js
export default{
    data:{
        title:""
    },
    //页面初始化的时候触发的生命周期子函数，这是页面周期的
    onInit(){
        this.title = this.$t('strings.world');
    }
}

文件使用规则

1.文件访问规则

应用资源可通过绝对路径或相对路径的方式进行访问，对开发框架中绝对路径以"/“开头，相对路径以“./”或”…/"，具体访问规则如下：

引用代码文件，需使用相对路径，比如：…/common/utils.js
引用资源文件，推荐使用绝对路径。比如：/common/xxx.png
公共代码文件和资源文件推荐放在common下，通过以上两条规则进行访问
css样式文件中通过 url()函数创建数据类型，如：url(/common/xxx.png)。
如果代码文件A和文件B位于同一目录，则代码文件B引用资源文件时可使用相对路径，也可使用绝对路径。
如果代码文件A和代码文件B位于不同目录，则代码文件B引用资源文件时必须使用绝对路径。因为Webpack打包时，代码文件B的目录会发生变化

common文件夹下还会放datas文件夹，其中放有js格式的文件用于初始化，uerinfo.js。要在index.js中引用userinfo.js

import users from "../../common/datas/userinfo.js"
//使用相对路径会有提示

第四节、基础组件介绍以及Chart组件使用

1.鸿蒙系统组件介绍

2.chart组件体验使用

封装了一个chart组件，图表组件，用于呈现线性图、柱状量规图界面

第一个坑“创建新的页面后，要在config.json中配置新的路由
第二个坑，新页面的名字在其文件夹下hml,css,js文件都要命名为index，因为pages下必须使用index
第三个坑：配置的路由更改后，刷新是无效的，必须重新启动预览

文件不是一定命名index？我这里试了不行

鸿蒙引入图片路径错误不会报错？
可以先用相对路径补全，再去掉前面的…

使用image-animator组件构建多图帧动画

创建一个新的Ability，新起一个抽象能力的应用服务，不同的Ability之可以通过PA进行调用。
PA是应用的一个底层能力的抽象服务。Ability是应用所具备能力的抽象，也是应用程序的重要组成部分。Ability由一个或多个FA（Feature Ability）或 PA(Particle Ability)组成。其中，FA有UI界面，提供与用户交互的能力，而PA无UI界面，提供后台运行任务的能力以及统一的数据访问抽象。

创建Ability后，在config.json中会又多出一个同级的pages，而不是像前面那样是在已有的pags内新添加。

大坑：通过js引入图标文件的时候，一定要使用绝对路径

TodeList应用构建

1.页面结构注意事项

页面结构使用HTML相同的标签进行嵌套，最外层是div容器
文本内容放在标签中才能呈现，否则不会呈现文本内容
可以直接调用鸿蒙JS 封装好的组件，这里我们使用的是switch组件

2.页面样式设计注意事项

页面CSS支持id、class、tag选择器建议使用class选择器
页面样式系统基于flex弹性布局进行设置，默认就是flex布局，需要注意：弹性布局会自动的拉升和压缩内部元素模块高度，宽度
鸿蒙封装的JS组件有一个专门的样式说明，这个和我们传统的CSS写法有很大差异，这个尤其需要注意。

数据可以存放在同名js文件中，从index,js中拿走放到datas下的与被拿走数据同名的js文件中

失去焦点时，鸿蒙会自动帮我们保存代码

<div class="container">
<div class="item">
     <text class="todo">9点开始开发工作</text>
     <switch showtext="true" checked="false" texton="完成" textoff="待办"class="switch"></switch>
     <button class="remove" onclick="remove($idx)">删除</button>
</div>
<div class="info">
        <text class="info-text">您还有</text>
        <text class="info-num">2</text>
        <text class="info-text">件事情待办，加油！</text>
</div>
<div class="add-todo">
    <input class="plan-input" type="text"></input>
    <button class="plan-btn" onclick="addTodo">添加待办</button>
</div>
</div>

.container {
    flex-direction: column;    /*纵向排列*/
    justify-content: flex-start;/*flex布局*/
    align-items: center;/*文本放中间*/
    padding-bottom: 100px;
}
.title {
    font-size: 25px;
    margin-top: 20px;
    margin-bottom: 20px;
    color: #000000;
    opacity: 0.9;
    font-size: 28px;
}
.item{
    width: 325px;
    padding: 10px 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    border-bottom: 1px solid #eee;
}
.todo{
    color: #000;
    width: 180px;
    font-size: 18px;
}
.switch{
    font-size: 12px;
    texton-color: green;
    textoff-color:red;
    text-padding: 5px;
    width: 100px;
    height: 24px;
    allow-scale: false;
}
.remove {
    font-size: 12px;
    margin-left: 10px;
    width: 50px;
    height: 22px;
    color: #fff;
    background-color: red;
}
.info{
    width: 100%;
    margin-top: 10px;
    justify-content: center;
}
.info-text {
    font-size: 18px;
    color: #AD7A1B;
}
.info-num{
    color: orangered;
    margin-left: 10px;
    margin-right: 10px;
}
.add-todo {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60px;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    background-color: #ddd;
}

.plan-input {
    width: 240px;
    height: 40px;
    background-color: #fff;
}
.plan-btn {
    width: 90px;
    height: 35px;
    font-size: 15px;
}

以下是datas/todoList.js文件的内容

export default [
        info: '给老王打个电话',
        status: true
    },
    {
        info: '输出工作计划',
        status: false
    },
    {
        info: '和小王对接需求',
        status: true
    },
    {
        info: '整理客户资料',
        status: false
    },
    {
        info: '和朋友一起聚餐',
        status: false
    }
]
import todoList from "../../common/datas/todoList.js"

自定义组件

定义一个专门存放自定义组件的文件夹 components.tabbar 并设置3个基础文件 tabbar.hml、tabbar.js、tabbar.css，需要注意的是：3个文件的文件名必须保持一致，不然会存在找不到文件的情况。该自定义组件的目的是给页面底部配置一个 tabbar 选项卡体验。
设置底部选项卡对应的 json 数据源，用来保存 icon 图片、标题，以及点击选中后的 icon 图片。

自定义组件调用

自定义组件通过element引入到宿主页面，使用方法：

<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
    <text class="title">
        首页
    </text>
    <comp></comp>
</div>

事件绑定：自定义组件中绑定子组件事件使用 (on|@)child1 语法，子组件中通过 this.$emit(‘child1’, { params: ‘传递参数’ }) 触发事件并进行传值，父组件执行 bindParentVmMethod 方法并接收子组件传递的参数。

父子组件通信使用

父组件通过 props 向子组件传值

props 自定义组件可以通过 props 声明属性，父组件通过设置属性向子组件传递参数，camelCase（驼峰命名法）的 prop 名，在外部父组件传递参数时需要使用 kebab-case （短横线分隔命名）形式，即当属性compProp 在父组件引用时需要转换为 comp-prop。
添加默认值，子组件可以通过固定值 default 设置默认值，当父组件没有设置该属性时，将使用其默认值。此情况下 props 属性必须为对象形式，不能用数组形式。
数据单向性，父子组件之间数据的传递是单向的，只能从父组件传递给子组件，子组件不能直接修改父组件传递下来的值，可以将 props 传入的值用 data 接收后作为默认值，再对 data 的值进行修改。