harmony 鸿蒙JS语法参考

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

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  赞