整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

「华为鸿蒙应用程序开发 13」JavaScript

「华为鸿蒙应用程序开发 13」JavaScript UI之HML,CSS,JS语法介绍

章内容

  • HML语法
  • CSS语法
  • JavaScript

HML、CSS、JavaScript在前面的章节中一直在用,现在就来专门介绍它们。

一 HML语法

HML(HarmonyOS Markup Language)是一套类HTML的标记语言,通过组件,事件构建出页面的内容。页面具备数据绑定、事件绑定、列表渲染、条件渲染和逻辑控制等高级能力。

关于页面结构我们这里就不再介绍了,前面我们一直在用组件构建页面。数据绑定我们也在前面章节中用到了很多次,现在我们就来看看。

1 数据绑定

通过在HML页面中用双大括号语法来声明数据,然后在JS文件中通过data对象进行赋值,下面是典型示例

<!-- xxx.hml -->
<div onclick="changeText">
  <text> {{content[1]}} </text>
</div>
// xxx.js
export default {
  data: {
    content: ['Hello World!', 'Welcome to my world!']
  },
  changeText: function() {
    this.content.splice(1, 1, this.content[0]);
  }
}

2 事件

通过‘on'或者‘@’将事件绑定在组件上,当组件触发事件时会执行JS文件中对应的事件处理函数。事件绑定的典型示例:

<!-- xxx.hml -->
<div class="container">
    <text class="title">{{count}}</text>
    <div class="box">
        <!-- 没有参数的事件处理函数 -->
        <input type="button" class="btn" value="increase" onclick="increase" />        
        <!-- 传递参数 -->
        <input type="button" class="btn" value="double" @click="multiply(2)" />
        <input type="button" class="btn" value="square" @click="multiply(count)" />
    </div>
</div>
// xxx.js
export default {
  data: {
    count: 0
  },
  increase() {
    this.count++;
  },
  multiply(multiplier) {
    this.count=multiplier * this.count;
  }
};

HML组件还支持冒泡事件绑定。冒泡事件绑定包括:

  • 绑定冒泡事件:on:{event}.bubble。on:{event}等价于on:{event}.bubble。
  • 绑定并阻止冒泡事件向上冒泡:grab:{event}.bubble。grab:{event}等价于grab:{event}.bubble。

典型示例如下:

<!-- xxx.hml -->
<div>
   <!-- 使用事件冒泡模式绑定事件回调函数。5+ -->
    <div on:touchstart.bubble="touchstartfunc"></div>
    <div on:touchstart="touchstartfunc"></div>
    <!-- 绑定事件回调函数,但阻止事件向上传递。5+ -->
    <div grab:touchstart.bubble="touchstartfunc"></div>
    <div grab:touchstart="touchstartfunc"></div>
    <!-- 使用事件冒泡模式绑定事件回调函数。6+ -->
    <div on:click.bubble="clickfunc"></div>
    <div on:click="clickfunc"></div>
    <!-- 绑定事件回调函数,但阻止事件向上传递。6+ -->
    <div grab:click.bubble="clickfunc"></div>
    <div grab:click="clickfunc"></div>
</div>
// xxx.js
export default {
    clickfunc: function(e) {
        console.log(e);
    },
    touchstartfuc: function(e) {
        console.log(e);
    },
}

Touch触摸类事件支持捕获,捕获阶段位于冒泡阶段之前,捕获事件先到达父组件然后达到子组件。

捕获事件绑定包括:

  • 绑定捕获事件:on:{event}.capture。
  • 绑定并阻止事件向下传递:grab:{event}.capture。

示例如下:

<!-- xxx.hml -->
<div>
    <!-- 使用事件捕获模式绑定事件回调函数。5+ -->
    <div on:touchstart.capture="touchstartfunc"></div>
    <!-- 绑定事件回调函数,但阻止事件向下传递。5+ -->
    <div grab:touchstart.capture="touchstartfunc"></div>
</div>
// xxx.js
export default {
    touchstartfuc: function(e) {
        console.log(e);
    },
}

3 列表渲染

在「华为鸿蒙应用程序开发 12」JavaScript UI常用基础组件Image这个章节中,我们显示多张图片时有用到列表渲染。列表渲染就是通过组件的for属性,循环构建组件,示例如下:

<!-- xxx.hml -->
<div class="array-container">
  <!-- div列表渲染 -->
  <!-- 默认$item代表数组中的元素, $idx代表数组中的元素索引 -->
  <div for="{{array}}" tid="id" onclick="changeText">
    <text>{{$idx}}.{{$item.name}}</text>
  </div>
  <!-- 自定义元素变量名称 -->
  <div for="{{value in array}}" tid="id" onclick="changeText">    
    <text>{{$idx}}.{{value.name}}</text>
  </div>
  <!-- 自定义元素变量、索引名称 -->
  <div for="{{(index, value) in array}}" tid="id" onclick="changeText">    
    <text>{{index}}.{{value.name}}</text>
  </div>
</div>
// xxx.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。例如上述tid="id"表示数组中的每个元素的id属性为该元素的唯一标识。for循环支持的写法如下:

  • for="array":其中array为数组对象,array的元素变量默认为$item。
  • for="v in array":其中v为自定义的元素变量,元素索引默认为$idx。
  • for="(i, v) in array":其中元素索引为i,元素变量为v,遍历数组对象array。

说明

  • 数组中的每个元素必须存在tid指定的数据属性,否则运行时可能会导致异常。
  • 数组中被tid指定的属性要保证唯一性,如果不是则会造成性能损耗。比如,示例中只有id和name可以作为tid字段,因为它们属于唯一字段。
  • tid不支持表达式。

HML中的条件渲染分为2种:if/elif/else和show。两种写法的区别在于:第一种写法里if为false时,组件不会在vdom中构建,也不会渲染,而第二种写法里show为false时虽然也不渲染,但会在vdom中构建;另外,当使用if/elif/else写法时,节点必须是兄弟节点,否则编译无法通过。实例如下:

<!-- xxx.hml -->
<div class="container">
  <button class="btn" type="capsule" value="toggleShow" onclick="toggleShow"></button>
  <button class="btn" type="capsule" value="toggleDisplay" onclick="toggleDisplay"></button>
  <text if="{{visible}}"> Hello-TV </text>
  <text elif="{{display}}"> Hello-Wearable </text>
  <text else> Hello-World </text>
</div>
/* xxx.css */
.container{
  flex-direction: column;
  align-items: center;
}
.btn{
  width: 280px;
  font-size: 26px;
  margin: 10px 0;
}
// xxx.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。示例如下:

<!-- xxx.hml -->
<div class="container">
  <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
  <text show="{{visible}}" > Hello World </text>
</div>
/* xxx.css */
.container{
  flex-direction: column;
  align-items: center;
}
.btn{
  width: 280px;
  font-size: 26px;
  margin: 10px 0;
}
// xxx.js
export default {
  data: {
    visible: false,
  },
  toggle: function() {
    this.visible=!this.visible;
  },
}

说明

禁止在同一个元素上同时设置for和if属性

4 逻辑控制块<block></block>

它使得循环渲染和条件渲染变得更加灵活;block在构建时不会被当作真实的节点编译。注意block标签只支持for和if属性。示例:

<!-- xxx.hml -->
<list>
  <block for="">
    <list-item type="students">
      <text>{{$item.name}}</text>
    </list-item>
    <block for="$item.kinds">
      <list-item type="kind">
        <text>{{$item.age}}</text>
      </list-item>
    </block>
  </block>
</list>
// xxx.js
export default {
  data: {
    glasses: [
      {name:'sunglasses', kinds:[{name:'XXX',color:'XXX'},{name:'XXX',color:'XXX'}]},
      {name:'nearsightedness mirror', kinds:[{name:'XXX',color:'XXX'}]},
    ],
  },
}

5 模板引用

HML可以通过element引用模板文件,在自定义组件时会很有用。示例:

<!-- template.hml -->
<div class="item"> 
  <text>Name: {{name}}</text>
  <text>Age: {{age}}</text>
</div>
<!-- index.hml -->
<element name='comp' src='../../common/template.hml'></element>
<div>
  <comp name="Tony" age="18"></comp>
</div>

二 CSS语法

CSS是描述HML页面结构的样式语言。所有组件均存在系统默认样式,也可在页面CSS样式文件中对组件、页面自定义不同的样式。

1 尺寸单位

  • 逻辑像素px(文档中以<length>表示): 默认屏幕具有的逻辑宽度为720px(配置见配置文件中的window小节),实际显示时会将页面布局缩放至屏幕实际宽度,如100px在实际宽度为1440物理像素的屏幕上,实际渲染为200物理像素(从720px向1440物理像素,所有尺寸放大2倍)。 额外配置autoDesignWidth为true时(配置见配置文件中的window小节),逻辑像素px将按照屏幕密度进行缩放,如100px在屏幕密度为3的设备上,实际渲染为300物理像素。应用需要适配多种设备时,建议采用此方法。
  • 百分比(文档中以<percentage>表示):表示该组件占父组件尺寸的百分比,如组件的width设置为50%,代表其宽度为父组件的50%。

2 样式导入

为了模块化管理和代码复用,CSS样式文件支持 @import 语句,导入css文件。

3 声明样式

每个页面目录下存在一个与布局hml文件同名的css文件,用来描述该hml页面中组件的样式,决定组件应该如何显示。

(1)内部样式,支持使用style、class属性来控制组件的样式。例如:

<!-- index.hml -->
<div class="container">
  <text style="color: red">Hello 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;
}

4 选择器

css选择器用于选择需要添加样式的元素,支持的选择器如下表所示:

选择器

样例

样例描述

.class

.container

用于选择class="container"的组件。

#id

#titleId

用于选择id="titleId"的组件。

tag

text

用于选择text组件。

,

.title, .content

用于选择class="title"和class="content"的组件。

#id .class tag

#containerId .content text

非严格父子关系的后代选择器,选择具有id="containerId"作为祖先元素,class="content"作为次级祖先元素的所有text组件。如需使用严格的父子关系,可以使用“>”代替空格,如:#containerId>.content。

示例:

<!-- 页面布局xxx.hml -->
<div id="containerId" class="container">
  <text id="titleId" class="title">标题</text>
  <div class="content">
    <text id="contentId">内容</text>
  </div>
</div>
/* 页面样式xxx.css */
/* 对所有div组件设置样式 */
div {
  flex-direction: column;
}
/* 对class="title"的组件设置样式 */
.title {
  font-size: 30px;
}
/* 对id="contentId"的组件设置样式 */
#contentId {
  font-size: 20px;
}
/* 对所有class="title"以及class="content"的组件都设置padding为5px */
.title, .content {
  padding: 5px;
}
/* 对class="container"的组件下的所有text设置样式 */
.container text {
  color: #007dff;
}
/* 对class="container"的组件下的直接后代text设置样式 */
.container > text {
  color: #fa2a2d;
}

5 选择器优先级

选择器的优先级计算规则与w3c规则保持一致(只支持:内联样式,id,class,tag,后代和直接后代),其中内联样式为在元素style属性中声明的样式。

当多条选择器声明匹配到同一元素时,各类选择器优先级由高到低顺序为:内联样式 > id > class > tag。

6 伪类

css伪类是选择器中的关键字,用于指定要选择元素的特殊状态。例如,:disabled状态可以用来设置元素的disabled属性变为true时的样式。

除了单个伪类之外,还支持伪类的组合,例如,:focus:checked状态可以用来设置元素的focus属性和checked属性同时为true时的样式。支持的单个伪类如下表所示,按照优先级降序排列:

名称

支持组件

描述

:disabled

支持disabled属性的组件

表示disabled属性变为true时的元素(不支持动画样式的设置)。

:focus

支持focusable属性的组件

表示获取focus时的元素(不支持动画样式的设置)。

:active

支持click事件的组件

表示被用户激活的元素,如:被用户按下的按钮、被激活的tab-bar页签(不支持动画样式的设置)。

:waiting

button

表示waiting属性为true的元素(不支持动画样式的设置)。

:checked

input[type="checkbox"、type="radio"]、 switch

表示checked属性为true的元素(不支持动画样式的设置)。

:hover6+

支持mouseover事件的组件

表示鼠标悬浮时的元素。

伪类示例如下,设置按钮的:active伪类可以控制被用户按下时的样式:

<!-- index.hml -->
<div class="container">
  <input type="button" class="button" value="Button"></input>
</div>
/* index.css */
.button:active {
  background-color: #888888;/*按钮被激活时,背景颜色变为#888888 */
}

说明

针对弹窗类组件及其子元素不支持伪类效果,包括popup、dialog、menu、option、picker

7 样式预编译

预编译提供了利用特有语法生成css的程序,可以提供变量、运算等功能,令开发者更便捷地定义组件样式,目前支持less、sass和scss的预编译。使用样式预编译时,需要将原css文件后缀改为less、sass或scss,如index.css改为index.less、index.sass或index.scss。

(1)当前文件使用样式预编译,例如将原index.css改为index.less:

/* index.less */
/* 定义变量 */
@colorBackground: #000000;
.container {
  background-color: @colorBackground; /* 使用当前less文件中定义的变量 */
}

(2)引用预编译文件,例如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目录进行管理。

8 CSS样式继承

css样式继承提供了子节点继承父节点样式的能力,继承下来的样式在多选择器样式匹配的场景下,优先级排最低,当前支持以下样式的继承:

  • font-family
  • font-weight
  • font-size
  • font-style
  • text-align
  • line-height
  • letter-spacing
  • color
  • visibility

三 JavaScript语法

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

1 语法

支持ES6(EMACScript 6)语法。

  • 模块声明

使用import方法引入功能模块:

import router from '@system.router';
  • 代码引用

使用import方法导入js代码:

import utils from '../../common/utils.js';

2 对象

(1)应用对象$def

使用this.$app.$def获取在app.js中暴露的对象。

说明

应用对象不支持数据绑定,需主动触发UI更新。

示例代码

// app.js
export default {
  onCreate() {
    console.info('AceApplication onCreate');
  },
  onDestroy() {
    console.info('AceApplication 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;
  }
}

(2)页面对象

属性

类型

描述

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

用于在读取或设置进行预先处理,计算属性的结果会被缓存。计算属性名不能以$或_开头,不要使用保留字。示例见自定义组件。

其中data对象我们在前面章节的例子中用到过很多次。

3 方法

(1)数据方法

方法

参数

描述

$set

key: string, value: any

添加新的数据属性或者修改已有数据属性。

用法:

this.$set('key',value):添加数据属性。

$delete

key: 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.0

    this.$delete('keyMap');
    console.info("keyMap.Version=" + this.keyMap); // log print: keyMap.Version=undefined
  }
}

(2)公共方法

方法

参数

描述

$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实例。

(3)事件方法

方法

参数

描述

$watch

data: string, callback: string | Function

观察data中的属性变化,如果属性值改变,触发绑定的事件。示例见自定义组件。

用法:

this.$watch('key', callback)

(4)页面方法

方法

参数

描述

scrollTo

scrollPageParam: ScrollPageParam

将页面滚动到目标位置,可以通过ID选择器指定或者滚动距离指定。

scrollPageParam有如下取值

名称

类型

默认值

描述

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
});

(5)获取DOM元素

  • 通过$refs获取DOM元素
<!-- index.hml -->
<div class="container">
  <image-animator 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();
    }
  },
};
  • 通过$element获取DOM元素,这在前面的章节已经用到过。示例:
<!-- index.hml -->
<div class="container">
  <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();
    }
  },
};

(6)获取ViewMode

根节点所在页面:

<!-- 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!',
  },

自定义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="{{show}}">hello parent component!</text>
  <childComp id="selfDefineChild"></childComp>
</div>
// parent.js
export default {
  data: {
    show: false,
    text: 'I am parent component!',
  },
  parentClicked () {
    this.show=!this.show;
    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="{{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}');
  },
}

至此,关于华为鸿蒙应用开发中HML、CSS、JavaScript语法部分的介绍就讲完了,本章尽量用实例对每个知识点进行了直观地呈现,大家可以先都熟悉下,然后在以后的开发中不记得的可以回过头查看。

最后,老规矩,敲黑板:多动手,多思考!代码一定要亲自动手敲出来![呲牙][比心]

开始本章正式内容之前先补充讲一下前面章节没有讲到的一个小细节问题。

在我们每次关闭DevEco Studio不要直接点击右上角的关闭按钮,而是选择菜单“文件 > 关闭项目”

这样我们就回到了欢迎界面

当我们下次启动程序的时候显示的就是欢迎界面,而不是直接进入上次编辑的项目界面。

本章目标:

了解华为鸿蒙应用开发的JavaScript UI


启动DevEco Studio,打开我们在「鸿蒙开发 2」第一个华为鸿蒙(HarmonyOS)应用程序(App)章节中创建的项目HelloWorld。


然后展开 pages 目录下的两个页面对应的目录,我们可以看到每个页面都包含了三个文件。

这就是JavaScript UI所包含的结构(HML)、表现(CSS)和逻辑(JavaScript)共3个主要部分:

(1)HML:鸿蒙标记语言(HarmonyOS Markup Language),用于定义用户界面的结构。通过HML编写的界面结构文件后缀名为.hml,因此HML既是一门语言,也是一种文件类型。要特别注意,虽然HML与HTML语法相似,但是仍然存在很多区别。

(2)CSS:层叠样式表(Cascading Style Sheets),用于定义如何显示HML组件。

(3)JavaScript:一种解释性脚本语言,用于处理用户界面的简单业务逻辑,支持ECMAScript 6语法。

简言之,就是HML用于构建页面,CSS用于美化页面,JavaScript用于处理用户与页面的交互。

这里和Web开发的html,css,javascript很类似,但不完全一样。

JavaScript UI支持手机(Phone)、平板(Tablet)、智慧屏(TV)或智能穿戴(Wearable)等设备的应用开发。

我们在第2章中用于跳转页面时用到了JavaScript UI的router模块

<!-- index.js -->
import router from '@system.router';

export default {
    launch() {
        router.push({
            uri: 'pages/details/details'
        })
    }
}

router模块主要包含以下方法:

(1)push(obj:IForwardPara):跳转到另外一个页面,而且原先的页面仍然存在,只是被遮盖而已。通过IForwardPara可以定义跳转的页面和传递的数据,分别通过其URL属性和params属性定义。

(2)replace(obj:IForwardPara):跳转到另外一个页面,并销毁当前页面。通过IForwardPara可以定义跳转的页面和传递的数据,分别通过其URL属性和params属性定义。

(3)back(obj?:IBackPara):返回上一个页面。通过IBackPara可以定义返回的页面路径(可选),通过该对象内的path属性定义。

(4)clear():清除被遮盖的页面,仅保留当前显示的页面。

(5)getLength():获取当前页面栈长度,即栈内页面数量。

(6)getState():获取当前页面栈状态,返回IRouterState对象,该对象包括index、name和path共3个变量。index变量为整型,表示当前页面所在页面栈的位置,从底层到顶层是从1开始计数的。name为字符串,表示当前页面文件名。path为字符串,表示当前页面的路径。

还有我们在launch()方法中用router模块的push方法调用的uri地址是哪里来的呢?

我们打开“Main > config.json”文件,定位到“js”字段

这是我们创建页面时DecEco Studio为我们自动添加的。

现在我们可以修改一下第二个页面,添加一个按钮,点击按钮后可以回到第一个页面,以便更好地理解这些知识。

1 选择“entry > src > main > js > default > pages >detail”,打开detail.hml文件,添加一个按钮

<div class="container">
    <text class="text">
        Hi, I'm always here.
    </text>
<!-- 添加一个按钮 -->
    <button class="button" type="capsule" value="Back" onclick="back"></button>
</div>

2 打开detail.css文件,添加按钮的样式

/* class选择器,在hml文件中定义的class属性,这里就是class="button" */
.button{
    width: 240px;
    height: 60px;
    background-color: #007dff;
    font-size: 30px;
    text-color: white;
    margin-top: 20px;
}

3 打开detail.js,实现返回第一个页面的跳转

// detail.js
import router from '@system.router';

export default {
    back() {
        router.push({
            uri: 'pages/index/index'    // 这里的地址是在config.json中已经定义好的
        });
    }
}

注:其实这里我们可以直接使用router.back();就可以实现返回的功能了。

4 打开预览器Previewer,点击Back按钮,我们可以看到功能已经实现了。

篇目录

  • 本篇目录

  • 什么是HTML

  • HTML的作用

  • HTML发展史

    • IETF简介

    • W3C简介

  • 网页的固定格式

    • html标签

    • head标签

    • title标签

    • body标签

  • head内部标签

    • meta标签

  • HTML标签

    • HTML标签分类

    • HTML标签关系分类

  • DTD文档声明

  • HTML和XHTML、HTML5区别

  • htm 和 .html扩展名区别


什么是HTML

  • HTML其实是HyperText Markup Language的缩写, 超文本标记语言

HTML的作用

  • 1.首先利用记事本保存了一个标题和两段描述, 然后修改纯文本文件的扩展名为.html, 然后再利用浏览器打开

  • 2.打开之后发现显示的格式不对, 不对的原因是因为在纯文本文件中所有文字都是同级别的, 浏览器不知道哪些文字代表什么意思. 也就是浏览器不知道哪些文字是标题, 哪些文字是段落…., 所以导致了显示的格式不正确

  • 正是因为如此, 所以HTML应用而生. HTML就只有一个作用, 它是专门用来描述文本的语义的. 也就是说我们可以利用HTML来告诉浏览器哪些是标题, 哪些是段落.

    • 这些用于描述其它文本语义的文本, 我们称之为标签. 并且这些用于描述文本语义的标签将来在浏览器中是不会被显示出来

    • 所以正是因为HTML的这些标签是专门用来描述其它文本语义的, 并且在浏览器中不会被显示出来, 所以我们称这些文本为"超文本", 而这些文本又叫做标签, 所以HTML被称之为"超文本标记语言"

  • 注意事项:

    • 虽然我们利用H1标签描述一段文本之后, 这段文本在浏览器中显示出来会被放大和加粗, 看上去我们是利用HTML的标签修改了被描述的那段文本的样式. 但是一定要记住, HTML只有一个作用, 它是专门用来给文本添加语义的, 而不是用来修改文本的样式的

  • H1标签它的作用是什么?

    • 错误: H1标签可以用来修改文字的大小, 并且还可以将文字加粗

    • 正确: H1标签的作用是用来告诉浏览器, 哪些文字是标题. 也就是H1标签是专门用于给指定的文字添加标题语义

HTML发展史

IETF简介

  • IETF是英文Internet Engineering Task Force的缩写, 翻译过来就是”互联网工程任务组”

  • IETF负责定义并管理因特网技术的所有方面。包括用于数据传输的IP协议、让域名与IP地址匹配的域名系统(DNS)、用于发送邮件的简单邮件传输协议(SMTP)等

W3C简介

  • W3C是英文World Wide Web Consortium的缩写, 翻译过来就是W3C理事会或万维网联盟, W3C是全球互联网最具权威的技术标准化组织.

  • W3C于1994年10月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者Tim Berners-Lee

  • W3C负责web方面标准的制定,像HTML、XHTML、CSS、XML的标准就是由W3C来定制的。

Tim Berners-Lee(蒂姆·伯纳斯-李),万维网之父、html设计者、w3c创始人

百度百科

网页的固定格式

  • 1.编写网页和写信一样都有一套规范和要求, 这套规范和要求中规定了写信的固定格式

  • 2.写信基本结构

  • 3.编写网页的步骤:

    3.1.新建一个文本文档

    3.2.利用记事本打开

    3.3.编写THML代码

    3.4.保存并且修改纯文本文档的扩展名为.html

    3.5.利用浏览器打开编写好的文件

  • 4.网页基本结构:

    5.通过观察我们发现, HTML基本结构中所有的标签都是成对出现的, 这些成对出现的标签中有一个带/有一个不带/, 那么这些不带/的标签我们称之为开始标签, 这些带/的我们称之为结束标签

html标签

  • 作用:

    • 用于告诉浏览器这是一个网页, 也就是说告诉浏览器我是一个HTML文档

  • 注意点:

    • 其它所有的标签都必须写在html标签里面, 也就是写在html开始标签和结束标签中间

head标签

  • 作用:

    • 指定网站的标题 / 指定网站的小图片

    • 添加网站的SEO相关的信息(指定网站的关键字/指定网站的描述信息)

    • 外挂一些外部的css/js文件

    • 添加一些浏览器适配相关的内容

    • 用于给网站添加一些配置信息

    • 例如:

  • 注意点:

    • 一般情况下, 写在head标签内部的内容都不会显示给用户查看, 也就是说一般情况下写在head标签内部的内容我们都看不到

title标签

  • 作用:

    • 专门用于指定网站的标题, 并且这个指定的标题将来还会作为用户保存网站的默认标题

  • 注意点:

    • title标签必须写在head标签里面

body标签

  • 作用:

    • 专门用于定义HTML文档中需要显示给用户查看的内容(文字/图片/音频/视频)

  • 注意点:

    • 虽然说有时候你可能将内容写到了别的地方在网页中也能看到, 但是千万不要这么干, 一定要将需要显示的内容写在body中

    • 一对html标签中(一个html开始标签和一个html结束标签)只能有一对body标签

head内部标签

meta标签

  • 1.为什么会有乱码现象?

    • 因为我们在编写网页的时候没有指定字符集

  • 2.如何解决乱码现象?

    • 在head标签中添加<meta charset="GBK" />, 指定字符集

  • 3.什么是字符集

    • 字符集就是字符的集合, 也就是很多字符堆在一起. 其实字符集很像我们古代的”活字印刷术”, 在活字印刷术中就是将很多刻有汉字的小章放到一个盒子中, 然后需要印刷文字的时候再去盒子中取这个小章出来用, 正是因为如此, 所以导致了乱码问题

    • 假设北方人和南方人都拥有装满小章的盒子, 但是南方人和北方人在盒子中存储小章的顺序不太一样, 那么这个时候如果北方人和南方人都需要去取”李”字, 在南方人记忆中李字在第6个盒子的第6行的第6列中(666), 在北方人的记忆中李字在第8个盒子的第8行的第8列中(888). 那么此时如果让一个南方人去北方人的盒子中取”李”字的小章, 必然找不到,, 所以就导致了乱码问题

    • 这个地方北方人的存储小章的盒子和南方人存储小章的盒子就对应网页中指定的字符集, 在网页中我们常见的字符集有两个GBK/UTF-8, GBK就对应北方人存储的盒子, UTF-8就对应南方人存储的盒子

    • 所以在网页中指定字符集的意义就在于告诉浏览器我用的是哪个盒子, 你应该如何去查找才能找到对应的正确的内容

  • 4.GBK(GB2312)和UTF-8区别

    • 提交比较大

    • 体积比较小

    • GBK(GB2312)里面存储的字符比较少, 仅仅存储了汉字和一些常用外文

    • UTF-8里面存储的世界上所有的文字

  • 5.那么在企业开发中我们应该使用GBK(GB2312)还是UTF-8呢?

    • 如果你的网站仅仅包含中文, 那么推荐使用GB2312, 因为它的体积更小, 访问速度更快

    • 如果你的网站除了中文以外, 还包含了一些其它国家的语言 , 那么推荐使用UTF-8

    • 懒人推荐: 不管三七二十一, 一律写UTF-8即可

  • 6.注意点:

    • 在HTML文件中指定的字符集必须和保存这个文件的字符集一致, 否则还是会出现乱码

    • 所以仅仅指定字符集不一定能解决乱码问题, 还需要保存文件的时候, 文件的保存格式必须和指定的字符集一致才能保证没有乱码问题

HTML标签

HTML标签分类

  • 单标签

    • 只有开始标签没有结束标签, 也就是由一个<>组成的



  • 双标签

    • 有开始标签和结束标签, 也就是由一个<>和一个</>组成的

      HTML标签关系分类

  • 并列关系(兄弟/平级)



  • 嵌套关系(父子/上下级)



DTD文档声明

  • 什么是DTD文档声明?

    • 由于HTML有很多个版本的规范, 每个版本的规范之间又有一定的差异. 所以为了让浏览器能够正确的编译/解析/渲染我们的网页, 我们需要在HTML文件的第一行告诉浏览器, 我们当前这个网页是用哪一个版本的HTML规范来编写的. 浏览器只要知道了我们是用哪一个版本的规范来编写之后, 它就能够正确的编译/解析/渲染我们的网页

  • DTD文档声明格式:



  • 注意事项:

    • 不写也能运行

    • H5网页里面用H4也能运行

    • <!DOCTYPE>声明必须是 HTML 文档的第一行,位于 <html> 标签之前

    • <!DOCTYPE> 声明不是 HTML 标签

    • <!DOCTYPE> 声明没有结束标签

    • <!DOCTYPE> 声明对大小写不敏感

    • 这个声明浏览器会看, 但是并不是完全依赖于这个声明, 浏览器有一套自己的默认的处理机制

  • HTML5之前2大种规范, 每种规范中又有3小种规范

大规范小规范
HTMLStrict (严格的)
HTMLTransitional(过度的,普通的,宽松的)
HTMLFrameset(带有框架的页面)
XHTMLStrict (严格的)
XHTMLTransitional(过度的,普通的,宽松的)
XHTMLFrameset(带有框架的页面)
  • HTML的DTD文档声明和XHTML的DTD文档声明有何区别?

    • XHTML本身规定比如标签必须小写、必须严格闭合、必须使用引号引起属性等等, 而HTML会更加松散没有这么严格

  • Strict表示严格的, 这种模式里面的要求更为严格.这种严格主要体现在有一些标签不能使用

    • 例如font标签/u标签等

    • font标签可以修改一个文本的字号、颜色、字体,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而font标签是用于修改样式的,所以在Strict中是不能使用font标签

    • u标签可以给一个文本加上下划线,但这和HTML的本质有冲突,因为HTML只能负责语义,不能负责样式,而u标签是用于添加下划线是样式.所以在Strict中是不能使用u标签

  • Transitional表示普通的, 这种模式是没有一些别的要求

    • 例如可以使用font标签、u标签等

    • 但是在企业开发中不会使用这些标签,因为这违背了HTML的本质, 而是将这些标签作为css的钩子使用

  • Frameset表示框架, 在框架的页面使用

    • 后面学到框架/NodeJS 再做详细了解

  • 常见的DOCTYPE有如下几种

  • 有这么多规范我们学习过程中到底使用哪一种比较合适呢?

    • www.baidu.com (B)

    • www.taobao.com (A)

    • www.qq.com (T)

    • www.sohu.com(大奇葩)

    • 无论是HTML还是XHTML,过去企业级开发中用的比较多的大部分都是Transitional类型的文档声明

    • 但是HTML5的时代已经到来,以上6中规范仅仅作为了解, 以后都用HTML5类型的文档声明, HTML5向下兼容(求此刻WC3心里阴影面积)

    • 目前国内一线网站都更新到了HTML5的文档声明, 所以后续授课也是全程使用HTML5的文档声明

HTML和XHTML、HTML5区别

  • 在HTML的早期发展中,大部分标准都是所谓的retro-spec,即先有实现后有标准。在这种情况下,HTML标准不是很规范浏览器也对HTML页面中的错误相当宽容。这反过来又导致了HTML开发者写出了大量含有错误的HTML页面

  • html语言本身有一些缺陷(例如: 内容和形式不能分离;标签单一;数据不能复用等等),随着xml的兴起人们希望xml来弥补html的不足,但是目前有成千上万的网页都是用html编写的,所以完全使用xml来替代html还为时过早,于是W3C在2000年推出了xhtml1.0, 建立xhtml的目的就是实现从html向xml的过度

  • 为了规范HTML,W3C结合XML制定了XHTML 1.0标准,这个标准没有增加任何新的标签,只是按照XML的要求来规范HTML,并定义了一个新的MIME type application/xhtml+xml。W3C的初衷是要求浏览器对这个MIME type实行强错误检查,如果页面有HTML错误,就要显示错误信息。但是由于已有的web页面中已经有了大量的错误,很多开发者拒绝使用新的MIME type。W3C不得已,在XHTML 1.0的标准之后增加了一个附录C允许开发者使用XHTML语法来写页面,同时使用旧的MIME type,application/html,来分发页面

  • W3C随后在XHTML 1.1中取消了附录C,即使用XHTML 1.1标准的页面必须用新的MIME type来分发。于是这个标准并没有很多人采用

  • 有了XHTML的教训,W3C在制定下一代HTML标准时(HTML5),就将向后兼容作为了一个很重要的原则。HTML5确实引入了许多新的特性,但是它最重要的一个特性是,不会break已有的网页。你可以将任何已有的网页的第一行改成<!DOCTYPE html>,它就成也一个HTML5页面,并且可以照样在浏览器里正常的展示。

  • 简而言之

    • HTML语法非常宽松容错性强;

    • XHTML更为严格,它要求标签必须小写、必须严格闭合、标签中的属性必须使用引号引起等等;

    • HTML5是HTML的下一个版本所以除了非常宽松容错性强以外,还增加许多新的特性

.htm 和 .html扩展名区别

  • DOS操作系统(win95或win98)下只能支持长度为3的后缀名,所以是htm

  • 但在windows后缀长度可以大于3位,所以windows下无所谓htm与html,html是为长文件的格式命名的

  • 所以htm是为了兼容过去的DOS命名格式存在的

关于课程的疑问和讨论,可以登录http://bbs.520it.com/forum.php?mod=viewthread&tid=2423。