
HarmonyOS Developer 兼容JS的类Web开发范式
JS语法参考
JS文件用来定义HML页面的业务逻辑,支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力,可以使应用更加富有表现力,具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。
语法
支持ES6语法。
- 模块声明
使用import方法引入功能模块:
- 代码引用
使用import方法导入js代码:
对象
- 应用对象
属性 | 类型 | 描述 |
$def | Object | 使用this.$app.$def获取在app.js中暴露的对象。 > 说明: > 应用对象不支持数据绑定,需主动触发UI更新。 |
示例代码
- 页面对象
属性 | 类型 | 描述 |
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'):删除数据属性。 |
示例代码
- 公共方法
方法 | 参数 | 描述 |
$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 | 指定滚动动画曲线,可选值参考 |
complete | () => void | - | 指定滚动完成后需要执行的回调函数。 |
示例:
获取DOM元素
- 通过$refs获取DOM元素
- 通过$element获取DOM元素
获取ViewModel
根节点所在页面:
自定义parent组件:
自定义child组件:
