harmony 鸿蒙JS语法参考

  • 2022-08-09
  • 浏览 (1549)

JS语法参考

JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。

语法

支持ES6语法。

  • 模块声明 使用import方法引入功能模块：
  import router from '@ohos.router';
  • 代码引用 使用import方法导入js代码：
  import utils from '../../common/utils.js';

对象

  • 应用对象 |属性|类型 |描述 | |—-|——|————————————————————| |$def|Object|使用this.$app.$def获取在app.js中暴露的对象。
    > 说明：
    > 应用对象不支持数据绑定，需主动触发UI更新。|

示例代码

  // app.js
  export default {
    onCreate() {
      console.info('Application onCreate');
    },
    onDestroy() {
      console.info('Application onDestroy');
    },
    globalData: {
      appData: 'appData',
      appVersion: '2.0',
    },
    globalMethod() {
      console.info('This is a global method!');
      this.globalData.appVersion = '3.0';
    }
  };

  // index.js页面逻辑代码
  export default {
    data: {
      appData: 'localData',
      appVersion:'1.0',
    },
    onInit() {
      this.appData = this.$app.$def.globalData.appData;
      this.appVersion = this.$app.$def.globalData.appVersion;
    },
    invokeGlobalMethod() {
      this.$app.$def.globalMethod();
    },
    getAppVersion() {
      this.appVersion = this.$app.$def.globalData.appVersion;
    }
  }
  • 页面对象 |属性 |类型 |描述 | |——–|—————|—————————————-| |data |Object/Function|页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。
    data与private和public不能重合使用。| |$refs |Object |持有注册过ref 属性的DOM元素或子组件实例的对象。示例见获取DOM元素。| |private|Object |页面的数据模型，private下的数据属性只能由当前页面修改。 | |public |Object |页面的数据模型，public下的数据属性的行为与data保持一致。 | |props |Array/Object |props用于组件之间的通信，可以通过<tag xxxx=‘value’>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见自定义组件。| |computed|Object |用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。示例见自定义组件。|

方法

  • 数据方法 |方法 |参数 |描述 | |——-|————————————–|—————————————-| |$set |key: string, value: any|添加新的数据属性或者修改已有数据属性。
    用法：
    this.$set(‘key’,value)：添加数据属性。| |$delete|key: string |删除数据属性。
    用法：
    this.$delete(‘key’)：删除数据属性。|

示例代码

  // index.js
  export default {
    data: {
      keyMap: {
        OS: 'OpenHarmony',
        Version: '2.0',
      },
    },
    getAppVersion() {
      this.$set('keyMap.Version', '3.0');
      console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0
  
      this.$delete('keyMap');
      console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined
    }
  }

  • 公共方法 |方法 |参数 |描述 | |————|—————|—————————————-| |$element |id: string|获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见获取DOM元素。
    用法：
    <div id=‘xxx’></div>
    - this.$element(‘xxx’)：获得id为xxx的组件对象。
    - this.$element()：获得根组件对象。| |$rootElement|无 |获取根组件对象。
    用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。| |$root |无 |获得顶级ViewModel实例。获取ViewModel示例。| |$parent |无 |获得父级ViewModel实例。获取ViewModel示例。| |$child |id: string|获得指定id的子级自定义组件的ViewModel实例。获取ViewModel示例。
    用法：
    this.$child(‘xxx’) ：获取id为xxx的子级自定义组件的ViewModel实例。|

  • 事件方法 |方法 |参数 |描述 | |—————————————-|—-|—-| |$watch|data: string, callback: string | Function|观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见自定义组件。
    用法：
    this.$watch(‘key’, callback)| | |

  • 页面方法 |方法 |参数 |描述 | |———————|——————————–|——————————-| |scrollTo6+|scrollPageParam: ScrollPageParam|将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。|

表1 ScrollPageParam6+

名称 类型 默认值 描述
position number - 指定滚动位置。
id string - 指定需要滚动到的元素id。
duration number 300 指定滚动时长，单位为毫秒。
timingFunction string ease 指定滚动动画曲线，可选值参考
动画样式animation-timing-function。
complete () => void - 指定滚动完成后需要执行的回调函数。

示例：

  this.$rootElement().scrollTo({position: 0})
  this.$rootElement().scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void})

获取DOM元素

  1. 通过$refs获取DOM元素 html <!-- index.hml --> <div class="container"> <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator> </div> 
   // index.js
   export default {
     data: {
       images: [
         { src: '/common/frame1.png' },
         { src: '/common/frame2.png' },
         { src: '/common/frame3.png' }
       ]
     },
     handleClick() {
       const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素
       const state = animator.getState();
       if (state === 'paused') {
         animator.resume();
       } else if (state === 'stopped') {
         animator.start();
       } else {
         animator.pause();
       }
     },
   };
  1. 通过$element获取DOM元素 html <!-- index.hml --> <div class="container" style="width:500px;height: 700px; margin: 100px;"> <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator> </div> 
   // index.js
   export default {
     data: {
       images: [
         { src: '/common/frame1.png' },
         { src: '/common/frame2.png' },
         { src: '/common/frame3.png' }
       ]
     },
     handleClick() {
       const animator = this.$element('animator'); // 获取id属性为animator的DOM元素
       const state = animator.getState();
       if (state === 'paused') {
         animator.resume();
       } else if (state === 'stopped') {
         animator.start();
       } else {
         animator.pause();
       }
     },
   };

zh-cn_image_0000001118642007

获取ViewModel

根节点所在页面：

<!-- root.hml -->
<element name='parentComp' src='../../common/component/parent/parent.hml'></element>
<div class="container">
  <div class="container">
    <text>{{text}}</text>
    <parentComp></parentComp>
  </div>
</div>

// root.js
export default {
  data: {
    text: 'I am root!',
  },
}

zh-cn_image_0000001118642008

自定义parent组件：

<!-- parent.hml -->
<element name='childComp' src='../child/child.hml'></element>
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="parentClicked">parent component click</text>
  <text class="text-style" if="{{showValue}}">hello parent component!</text>
  <childComp id = "selfDefineChild"></childComp>
</div>

// parent.js
export default {
  data: {
    showValue: false,
    text: 'I am parent component!',
  },
  parentClicked () {
    this.showValue = !this.showValue;
    console.info('parent component get parent text');
    console.info(`${this.$parent().text}`);
    console.info("parent component get child function");
    console.info(`${this.$child('selfDefineChild').childClicked()}`);
  },
}

自定义child组件：

<!-- child.hml -->
<div class="item" onclick="textClicked">
  <text class="text-style" onclick="childClicked">child component clicked</text>
  <text class="text-style" if="{{isShow}}">hello child component</text>
</div>

// child.js
export default {
  data: {
    isShow: false,
    text: 'I am child component!',
  },
  childClicked () {
    this.isShow = !this.isShow;
    console.info('child component get parent text');
    console.info('${this.$parent().text}');
    console.info('child component get root text');
    console.info('${this.$root().text}');
  },
}

zh-cn_image_0000001118642009

你可能感兴趣的鸿蒙文章

harmony 鸿蒙UI开发

harmony 鸿蒙动画衔接

harmony 鸿蒙动画概述

harmony 鸿蒙属性动画接口说明

harmony 鸿蒙属性动画概述

harmony 鸿蒙模糊

harmony 鸿蒙色彩

harmony 鸿蒙按钮（Button）

harmony 鸿蒙自定义弹窗（CustomDialog）

harmony 鸿蒙进度条（Progress）

0  赞
  • 所属分类： 后端技术
  • 本文标签： 鸿蒙 软件
  • 版权声明： 原创文章如转载，请注明本文链接: https://www.seaxiang.com/blog/d3d9fb3943854e61a140a7d1a7f7e9a4
热门推荐
标签云
Linux Java Spring Spring Boot docker 大数据 前端 生活 maven golang 软件 spring cloud fintech mac vscode 其他 区块链 以太坊 V神 开发者 技术 股票 git greenplum 分布式事务 chrome mysql flink kafka 设计模式 原理 鸿蒙 seo
最新文章
本文目录