谈谈你对网站开发的理解,自己怎么做商城网站,重庆建个网站需要多少钱?,wordpress分类首页调用目录
1 - HML语法
1.1 - 页面结构
1.2 - 数据绑定
1.3 - 普通事件绑定
1.4 - 冒泡事件绑定5
1.5 - 捕获事件绑定5
1.6 - 列表渲染
1.7 - 条件渲染
1.8 - 逻辑控制块
1.9 - 模板引用
2 - CSS语法
2.1 - 尺寸单位
…目录
1 - HML语法
1.1 - 页面结构
1.2 - 数据绑定
1.3 - 普通事件绑定
1.4 - 冒泡事件绑定5
1.5 - 捕获事件绑定5
1.6 - 列表渲染
1.7 - 条件渲染
1.8 - 逻辑控制块
1.9 - 模板引用
2 - CSS语法
2.1 - 尺寸单位
2.2 - 样式导入
2.3 - 声明样式
2.4 - 选择器
2.5 - 选择器优先级
2.6 - 伪类
2.7 - 样式预编译
2.8 - CSS样式继承6
3 - JS语法
3.1 - 语法
3.2 - 对象
3.3 - 方法
3.4 - 获取DOM元素
3.5 - 获取ViewModel 1 - HML语法
HML(HarmonyOS Markup Language)是一套类HTML的标记语言通过组件事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。
1.1 - 页面结构
!-- test.hml --div classitem-containertext classitem-titleImage Show/textdiv classitem-contentimage src/common/xxx.png classimage/image/div/div
1.2 - 数据绑定
!-- test.hml --div onclickchangeTexttext {{content[1]}} /text/div
/*test.css*/
.container{margin: 200px;
}
// test.js
export default {data: {content: [Hello World!, Welcome to my world!]},changeText: function() {this.content.splice(1, 1, this.content[0]);}
} 说明 针对数组内的数据修改请使用splice方法生效数据绑定变更。 hml文件中的js表达式不支持ES6语法。
1.3 - 普通事件绑定
事件通过on或者绑定在组件上当组件触发事件时会执行JS文件中对应的事件处理函数。
事件支持的写法有 funcNamefuncName为事件回调函数名(在JS文件中定义相应的函数实现)。 funcName(a,b)函数参数例如ab可以是常量或者是在JS文件中的data中定义的变量(前面不用写this.)。 示例
!-- test.hml --div classcontainertext classtitle{{count}}/textdiv classboxinput typebutton classbtn valueincrease onclickincrease /input typebutton classbtn valuedecrease clickdecrease /!-- 传递额外参数 --input typebutton classbtn valuedouble clickmultiply(2) /input typebutton classbtn valuedecuple clickmultiply(10) /input typebutton classbtn valuesquare clickmultiply(count) //div/div
/* test.css */
.container {display: flex;flex-direction: column;justify-content: center;align-items: center;left: 0px;top: 0px;width: 454px;height: 454px;
}
.title {font-size: 30px;text-align: center;width: 200px;height: 100px;
}
.box {width: 454px;height: 200px;justify-content: center;align-items: center;flex-wrap: wrap;
}
.btn {width: 200px;border-radius: 0;margin-top: 10px;margin-left: 10px;
}
// test.js
export default {data: {count: 0},increase() {this.count;},decrease() {this.count--;},multiply(multiplier) {this.count multiplier * this.count;}
};1.4 - 冒泡事件绑定5
冒泡事件绑定包括 绑定冒泡事件on:{event}.bubble。on:{event}等价于on:{event}.bubble。 绑定并阻止冒泡事件向上冒泡grab:{event}.bubble。grab:{event}等价于grab:{event}.bubble。 示例
!-- test.hml --div!-- 使用事件冒泡模式绑定事件回调函数。5 --;
div on:touchstart.bubbletouchstartfunc/divdiv on:touchstarttouchstartfunc/div!-- 绑定事件回调函数但阻止事件向上传递。5 --div grab:touchstart.bubbletouchstartfunc/divdiv grab:touchstarttouchstartfunc/div!-- 使用事件冒泡模式绑定事件回调函数。6 --div on:click.bubbleclickfunc/divdiv on:clickclickfunc/div!-- 绑定事件回调函数但阻止事件向上传递。6 --div grab:click.bubbleclickfunc/divdiv grab:clickclickfunc/div/div
// test.js
export default {clickfunc: function(e) {console.log(e);},touchstartfuc: function(e) {console.log(e);},
}
说明
采用旧写法(onclick)的事件绑定在最小API版本6以下时采用不冒泡处理在最小API版本为6及6以上时采用冒泡处理。
1.5 - 捕获事件绑定5
Touch触摸类事件支持捕获捕获阶段位于冒泡阶段之前捕获事件先到达父组件然后达到子组件。
捕获事件绑定包括 绑定捕获事件on:{event}.capture。 绑定并阻止事件向下传递grab:{event}.capture。 示例
!-- test.hml --div!-- 使用事件捕获模式绑定事件回调函数。5 --div on:touchstart.capturetouchstartfunc/div!-- 绑定事件回调函数但阻止事件向下传递。5 --div grab:touchstart.capturetouchstartfunc/div/div// xxx.js
export default {touchstartfuc: function(e) {console.log(e);},
}
1.6 - 列表渲染
!-- test.hml --div classarray-container styleflex-direction: column;margin: 200px;!-- div列表渲染 --!-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 --div for{{array}} tidid onclickchangeTexttext{{$idx}}.{{$item.name}}/text/div!-- 自定义元素变量名称 --div for{{value in array}} tidid onclickchangeTexttext{{$idx}}.{{value.name}}/text/div!-- 自定义元素变量、索引名称 --div for{{(index, value) in array}} tidid onclickchangeTexttext{{index}}.{{value.name}}/text/div/div
// test.js
export default {data: {array: [{id: 1, name: jack, age: 18},{id: 2, name: tony, age: 18},],},changeText: function() {if (this.array[1].name tony){this.array.splice(1, 1, {id:2, name: Isabella, age: 18});} else {this.array.splice(2, 1, {id:3, name: Bary, age: 18});}},
}
tid属性主要用来加速for循环的重渲染旨在列表中的数据有变更时提高重新渲染的效率。tid属性是用来指定数组中每个元素的唯一标识如果未指定数组中每个元素的索引为该元素的唯一id。例如上述tidid表示数组中的每个元素的id属性为该元素的唯一标识。for循环支持的写法如下 forarray其中array为数组对象array的元素变量默认为$item。 forv in array其中v为自定义的元素变量元素索引默认为$idx。 for(i, v) in array其中元素索引为i元素变量为v遍历数组对象array。
说明 数组中的每个元素必须存在tid指定的数据属性否则运行时可能会导致异常。 数组中被tid指定的属性要保证唯一性如果不是则会造成性能损耗。比如示例中只有id和name可以作为tid字段因为它们属于唯一字段。 tid不支持表达式。
1.7 - 条件渲染
条件渲染分为2种if/elif/else和show。两种写法的区别在于第一种写法里if为false时组件不会在vdom中构建也不会渲染而第二种写法里show为false时虽然也不渲染但会在vdom中构建另外当使用if/elif/else写法时节点必须是兄弟节点否则编译无法通过。实例如下
!-- test.hml --div classcontainerbutton classbtn typecapsule valuetoggleShow onclicktoggleShow/buttonbutton classbtn typecapsule valuetoggleDisplay onclicktoggleDisplay/buttontext if{{visible}} Hello-world1 /texttext elif{{display}} Hello-world2 /texttext else Hello-World /text/div
/* test.css */
.container{flex-direction: column;align-items: center;
}
.btn{width: 280px;font-size: 26px;margin: 10px 0;
}
// test.js
export default {data: {visible: false,display: true,},toggleShow: function() {this.visible !this.visible;},toggleDisplay: function() {this.display !this.display;}
}
优化渲染优化show方法。当show为true时节点正常渲染当为false时仅仅设置display样式为none。
!-- test.hml --div classcontainerbutton classbtn typecapsule valuetoggle onclicktoggle/buttontext show{{visible}} Hello World /text/div
/* test.css */
.container{flex-direction: column;align-items: center;
}
.btn{width: 280px;font-size: 26px;margin: 10px 0;
}
// test.js
export default {data: {visible: false,},toggle: function() {this.visible !this.visible;},
}
说明
禁止在同一个元素上同时设置for和if属性。
1.8 - 逻辑控制块
block控制块使得循环渲染和条件渲染变得更加灵活block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。
!-- test.hml --listblock forglasseslist-item typeglassestext{{$item.name}}/text/list-itemblock for$item.kindslist-item typekindtext{{$item.color}}/text/list-item/block/block/list
// test.js
export default {data: {glasses: [{name:sunglasses, kinds:[{name:XXX,color:XXX},{name:XXX,color:XXX}]},{name:nearsightedness mirror, kinds:[{name:XXX,color:XXX}]},],},
} 1.9 - 模板引用
!-- template.hml --
div classitem textName: {{name}}/texttextAge: {{age}}/text
/div
!-- index.hml --
element namecomp src../../common/template.hml/element
divcomp nameTony age18/comp
/div
2 - CSS语法
CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式也可在页面CSS样式文件中对组件、页面自定义不同的样式。
2.1 - 尺寸单位 逻辑像素px(文档中以length表示) 默认屏幕具有的逻辑宽度为720px实际显示时会将页面布局缩放至屏幕实际宽度如100px在实际宽度为1440物理像素的屏幕上实际渲染为200物理像素(从720px向1440物理像素所有尺寸放大2倍)。额外配置autoDesignWidth为true时逻辑像素px将按照屏幕密度进行缩放如100px在屏幕密度为3的设备上实际渲染为300物理像素。应用需要适配多种设备时建议采用此方法。 百分比(文档中以percentage表示)表示该组件占父组件尺寸的百分比如组件的width设置为50%代表其宽度为父组件的50%。
2.2 - 样式导入
为了模块化管理和代码复用CSS样式文件支持 import 语句导入css文件。
2.3 - 声明样式
每个页面目录下存在一个与布局hml文件同名的css文件用来描述该hml页面中组件的样式决定组件应该如何显示。
1. 内部样式支持使用style、class属性来控制组件的样式。例如
!-- index.hml --
div classcontainertext stylecolor: redHello World/text
/div
/* index.css */
.container {justify-content: center;
}
2. 文件导入合并外部样式文件。例如在common目录中定义样式文件style.css并在index.css文件首行中进行导入
/* style.css */
.title {font-size: 50px;
}
/* index.css */
import ../../common/style.css;
.container {justify-content: center;
}
2.4 - 选择器
css选择器用于选择需要添加样式的元素支持的选择器如下表所示
选择器样例样例描述.class .container 用于选择classcontainer的组件。#id#titleld用于选择idtitleId的组件。tagtext用于选择text组件。,.title, .content用于选择classtitle和classcontent的组件。#id .class tag#containerld .content text非严格父子关系的后代选择器选择具有idcontainerId作为祖先元素classcontent作为次级祖先元素的所有text组件。如需使用严格的父子关系可以使用“”代替空格如#containerId.content。
示例
!-- 页面布局test.hml --
div idcontainerId classcontainertext idtitleId classtitle标题/textdiv classcontenttext idcontentId内容/text/div
/div
/* 页面样式test.css */
/\* 对所有div组件设置样式 \*/
div {flex-direction: column;
}
/* 对classtitle的组件设置样式 */
.title {font-size: 30px;
}
/* 对idcontentId的组件设置样式 */
#contentId {font-size: 20px;
}
/* 对所有classtitle以及classcontent的组件都设置padding为5px */
.title, .content {padding: 5px;
}
/\* 对classcontainer的组件下的所有text设置样式 \*/
.container text {color: \#007dff;
}
/\* 对classcontainer的组件下的直接后代text设置样式 \*/
.container gt; text {color: \#fa2a2d;
}
以上样式运行效果如下 其中“.container text”将“标题”和“内容”设置为蓝色而“.container text”直接后代选择器将“标题”设置为红色。2者优先级相同但直接后代选择器声明顺序靠后将前者样式覆盖。
2.5 - 选择器优先级
选择器的优先级计算规则与w3c规则保持一致(只支持内联样式idclasstag后代和直接后代)其中内联样式为在元素style属性中声明的样式。
当多条选择器声明匹配到同一元素时各类选择器优先级由高到低顺序为内联样式 id class tag。
2.6 - 伪类
css伪类是选择器中的关键字用于指定要选择元素的特殊状态。例如:disabled状态可以用来设置元素的disabled属性变为true时的样式。
除了单个伪类之外还支持伪类的组合例如:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示按照优先级降序排列
名称支持组件描述:diaabled支持disabled属性的组件表示disabled属性变为true时的元素(不支持动画样式的设置)。:active支持click事件的组件表示被用户激活的元素如被用户按下的按钮、被激活的tab-bar页签(不支持动画样式的设置)。:waitingbutton表示waiting属性为true的元素(不支持动画样式的设置)。:checkedinput[typecheckbox、type“radio”]、switch表示checked属性为true的元素(不支持动画样式的设置)。
伪类示例如下设置按钮的:active伪类可以控制被用户按下时的样式
!-- index.hml --
div classcontainerinput typebutton classbutton valueButton/input
/div
/* index.css */
.button:active {background-color: #888888;/*按钮被激活时背景颜色变为#888888 */
}
说明
针对弹窗类组件及其子元素不支持伪类效果包括popup、dialog、menu、option、picker。
2.7 - 样式预编译
预编译提供了利用特有语法生成css的程序可以提供变量、运算等功能令开发者更便捷地定义组件样式目前支持less、sass和scss的预编译。使用样式预编译时需要将原css文件后缀改为less、sass或scss如index.css改为index.less、index.sass或index.scss。 当前文件使用样式预编译例如将原index.css改为index.less
/* index.less */
/* 定义变量 */
colorBackground: #000000;
.container {background-color: colorBackground; /* 使用当前less文件中定义的变量 */
}
引用预编译文件例如common中存在style.scss文件将原index.css改为index.scss并引入style.scss
/* style.scss */
/* 定义变量 */
$colorBackground: #000000;
在index.scss中引用
/* index.scss */
/* 引入外部scss文件 */
import ../../common/style.scss;
.container {background-color: $colorBackground; /* 使用style.scss中定义的变量 */
}
说明
引用的预编译文件建议放在common目录进行管理。
2.8 - CSS样式继承6
css样式继承提供了子节点继承父节点样式的能力继承下来的样式在多选择器样式匹配的场景下优先级排最低当前支持以下样式的继承 font-family font-weight font-size font-style text-align line-height letter-spacing color visibility
3 - JS语法
JS文件用来定义HML页面的业务逻辑支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力可以使应用更加富有表现力具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。
3.1 - 语法
支持ES6语法。 模块声明 使用import方法引入功能模块
import router from system.router;
代码引用 使用import方法导入js代码
import utils from ../../common/utils.js;
3.2 - 对象
应用对象
属性类型描述$defObject 使用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;}
}
页面对象
属性类型描述dataObject/Function 页面的数据模型类型是对象或者函数如果类型是函数返回值必须是对象。属性名不能以$或_开头不要使用保留字for, if, show, tid。 data与private和public不能重合使用。 $refsObject持有注册过ref 属性的DOM元素或子组件实例的对象。privateObject页面的数据模型private下的数据属性只能由当前页面修改。publicObject页面的数据模型public下的数据属性的行为与data保持一致。propsArray/Objectprops用于组件之间的通信可以通过tag xxxxvalue方式传递给组件props名称必须用小写不能以$或_开头不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。computedObject用于在读取或设置进行预先处理计算属性的结果会被缓存。计算属性名不能以$或_开头不要使用保留字。
3.3 - 方法
数据方法
方法参数描述$setkey: string, value:any 添加新的数据属性或者修改已有数据属性。 用法 this.$set(key,value)添加数据属性。 $deletekey: string 删除数据属性。 用法 this.$delete(key)删除数据属性。
示例代码
// index.js
export default {data: {keyMap: {OS: HarmonyOS,Version: 2.0,},},getAppVersion() {this.$set(keyMap.Version, 3.0);console.info(keyMap.Version this.keyMap.Version); // keyMap.Version 3.0this.$delete(keyMap);console.info(keyMap.Version this.keyMap); // log print: keyMap.Version undefined}
}
公共方法
方法参数描述$elementid: string 获得指定id的组件对象如果无指定id则返回根组件对象。 用法 div idxxx/div - this.$element(xxx)获得id为xxx的组件对象。 - this.$element()获得根组件对象。 $rootElement无 获取根组件对象。 用法this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。 $root无获得顶级ViewModel实例。$parent无获得父级ViewModel实例。$childid: string 获得指定id的子级自定义组件的ViewModel实例。 用法 this.$child(xxx) 获取id为xxx的子级自定义组件的ViewModel实例。
事件方法
方法参数描述$watchdata: string, callback: string | Function 观察data中的属性变化如果属性值改变触发绑定的事件。 用法 this.$watch(key, callback)
页面方法
方法参数描述scrollTo6scrollPageParam: ScrollPageParam将页面滚动到目标位置可以通过ID选择器指定或者滚动距离指定。 表1 ScrollPageParam6 名称类型默认值描述positionnumber-指定滚动位置。idstring-指定需要滚动到的元素id。durationnumber300指定滚动时长单位为毫秒。timingFunctionstringease指定滚动动画曲线可选值。complete() void-指定滚动完成后需要执行的回调函数。
示例
this.$rootElement().scrollTo({position: 0})
this.$rootElement().scrollTo({id: id, duration: 200, timingFunction: ease-in, complete: ()void})
3.4 - 获取DOM元素
1. 通过$refs获取DOM元素
!-- index.hml --
div classcontainerimage-animator classimage-player refanimator images{{images}} duration1s onclickhandleClick/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();}},
};
2. 通过$element获取DOM元素
!-- index.hml --
div classcontainerimage-animator classimage-player idanimator images{{images}} duration1s onclickhandleClick/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();}},
};
3.5 - 获取ViewModel
根节点所在页面
!-- root.hml --
element nameparentComp src../../common/component/parent/parent.hml/element
div classcontainerdiv classcontainertext{{text}}/textparentComp/parentComp/div
/div
// root.js
export default {data: {text: I am root!,},
}
自定义parent组件
!-- parent.hml --
element namechildComp src../child/child.hml/element
div classitem onclicktextClickedtext classtext-style onclickparentClickedparent component click/texttext classtext-style if{{showValue}}hello parent component!/textchildComp 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 classitem onclicktextClickedtext classtext-style onclickchildClickedchild component clicked/texttext classtext-style if{{show}}hello child component/text
/div
// child.js
export default {data: {show: false,text: I am child component!,},childClicked () {this.show !this.show;console.info(child component get parent text);console.info(${this.$parent().text});console.info(child component get root text);console.info(${this.$root().text});},
} 感谢各位大佬支持
互三啦
