【HarmonyOS之旅】基于ArkTS开发(三) -＞ 兼容JS的类Web开发(二)

news2025/2/2 21:17:44

目录

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 class="item-container">
  <text class="item-title">Image Show</text>
  <div class="item-content">
  <image src="/common/xxx.png" class="image"></image>
  </div>
  </div>

1.2 -> 数据绑定

<!-- test.hml -->
  <div onclick="changeText">
  <text> {
  
  {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文件中对应的事件处理函数。

事件支持的写法有：

  • "funcName"：funcName为事件回调函数名(在JS文件中定义相应的函数实现)。

  • "funcName(a,b)"：函数参数例如a，b可以是常量，或者是在JS文件中的data中定义的变量(前面不用写this.)。

  • 示例

<!-- test.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="decrease" @click="decrease" />
  <!-- 传递额外参数 -->
  <input type="button" class="btn" value="double" @click="multiply(2)" />
  <input type="button" class="btn" value="decuple" @click="multiply(10)" />
  <input type="button" class="btn" value="square" @click="multiply(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.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>
// 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.capture="touchstartfunc"></div>
  <!-- 绑定事件回调函数，但阻止事件向下传递。5+ -->
  <div grab:touchstart.capture="touchstartfunc"></div>
  </div>

// xxx.js
export default {
  touchstartfuc: function(e) {
    console.log(e);
  },
}

1.6 -> 列表渲染

<!-- test.hml -->
  <div class="array-container" style="flex-direction: column;margin: 200px;">
  <!-- 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>
// 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。例如上述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不支持表达式。

1.7 -> 条件渲染

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

<!-- test.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-world1 </text>
  <text elif="{
  
  {display}}"> Hello-world2 </text>
  <text 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 class="container">
  <button class="btn" type="capsule" value="toggle" onclick="toggle"></button>
  <text 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 -->
  <list>
  <block for="glasses">
  <list-item type="glasses">
  <text>{
  
  {$item.name}}</text>
  </list-item>
  <block for="$item.kinds">
  <list-item type="kind">
  <text>{
  
  {$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 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>

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

2.4 -> 选择器

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

选择器样例样例描述
.class

.container

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

示例：

<!-- 页面布局test.hml -->
<div id="containerId" class="container">
  <text id="titleId" class="title">标题</text>
  <div class="content">
    <text id="contentId">内容</text>
  </div>
</div>
/* 页面样式test.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 &gt; text {
  color: \#fa2a2d;
}

以上样式运行效果如下：

其中“.container text”将“标题”和“内容”设置为蓝色，而“.container > text”直接后代选择器将“标题”设置为红色。2者优先级相同，但直接后代选择器声明顺序靠后，将前者样式覆盖。

2.5 -> 选择器优先级

选择器的优先级计算规则与w3c规则保持一致(只支持：内联样式，id，class，tag，后代和直接后代)，其中内联样式为在元素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[type="checkbox"、type=“radio”]、switch表示checked属性为true的元素(不支持动画样式的设置)。

伪类示例如下，设置按钮的: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。

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 xxxx='value'>方式传递给组件；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.0

    this.$delete('keyMap');
    console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined
  }
}
  • 公共方法
方法参数描述
$elementid: string

获得指定id的组件对象，如果无指定id，则返回根组件对象。

用法：

<div id='xxx'></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)

  • 页面方法
方法参数描述
scrollTo6+scrollPageParam: 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 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();
    }
  },
};

2. 通过$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();
    }
  },
};

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

自定义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="{
  
  {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}');
  },
}

感谢各位大佬支持！！！

互三啦！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2290946.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

当WebGIS遇到智慧文旅-以长沙市不绕路旅游攻略为例

当WebGIS遇到智慧文旅-以长沙市不绕路旅游攻略为例

目录 前言 一、旅游数据组织 1、旅游景点信息 2、路线时间推荐 二、WebGIS可视化实现 1、态势标绘实现 2、相关位置展示 三、成果展示 1、第一天旅游路线 2、第二天旅游路线 3、第三天旅游路线 4、交通、订票、住宿指南 四、总结 前言 随着信息技术的飞速发展&…
阅读更多...
使用Pygame制作“吃豆人”游戏

使用Pygame制作“吃豆人”游戏

本篇博客展示如何使用 Python Pygame 编写一个简易版的“吃豆人&#xff08;Pac-Man&#xff09;” 风格游戏。这里我们暂且命名为 Py-Man。玩家需要控制主角在一个网格地图里移动、吃掉散布在各处的豆子&#xff0c;并躲避在地图中巡逻的幽灵。此示例可帮助你理解网格地图、角…
阅读更多...
SQL入门到精通 理论+实战 -- 在 MySQL 中学习SQL语言

SQL入门到精通 理论+实战 -- 在 MySQL 中学习SQL语言

目录 一、环境准备 1、MySQL 8.0 和 Navicat 下载安装 2、准备好的表和数据文件&#xff1a; 二、SQL语言简述 1、数据库基础概念 2、什么是SQL 3、SQL的分类 4、SQL通用语法 三、DDL&#xff08;Data Definition Language&#xff09;&#xff1a;数据定义语言 1、操…
阅读更多...
x86-64数据传输指令

x86-64数据传输指令

关于汇编语言一些基础概念的更详细的介绍&#xff0c;可移步MIPS指令集&#xff08;一&#xff09;基本操作_mips指令 sw-CSDN博客 该指令集中一个字2字节。 该架构有16个64位寄存器&#xff0c;名字都以%r开头&#xff0c;每个寄存器的最低位字节&#xff0c;低1~2位字节&…
阅读更多...
【ESP32】ESP-IDF开发 | WiFi开发 | TCP传输控制协议 + TCP服务器和客户端例程

【ESP32】ESP-IDF开发 | WiFi开发 | TCP传输控制协议 + TCP服务器和客户端例程

1. 简介 TCP&#xff08;Transmission Control Protocol&#xff09;&#xff0c;全称传输控制协议。它的特点有以下几点&#xff1a;面向连接&#xff0c;每一个TCP连接只能是点对点的&#xff08;一对一&#xff09;&#xff1b;提供可靠交付服务&#xff1b;提供全双工通信&…
阅读更多...
算法基础学习——快排与归并（附带java模版）

算法基础学习——快排与归并（附带java模版）

快速排序和归并排序是两种速度较快的排序方式&#xff0c;是最应该掌握的两种排序算法&#xff0c; &#xff08;一&#xff09;快速排序&#xff08;不稳定的&#xff09; 基本思想&#xff1a;分治 平均时间复杂度&#xff1a;O(nlogn) / 最慢O(n^2) / 最快O(n) 步骤&…
阅读更多...
指针的进化—sizeof和strlen对比(字符串和字符数组的区分)

指针的进化—sizeof和strlen对比(字符串和字符数组的区分)

1.前言 如果你对各个数组的内容存放是什么没有个清晰的概念&#xff0c;对指针偏移之后的数量算不出来或者模棱两可&#xff0c;那么本篇就来详细介绍sizeof和strlen来具象化的显示数组的内容存放了多少内容&#xff0c;偏移量变化后的变化&#xff0c;这个数组进行运算后会不会…
阅读更多...
TensorFlow简单的线性回归任务

TensorFlow简单的线性回归任务

如何使用 TensorFlow 和 Keras 创建、训练并进行预测 1. 数据准备与预处理 2. 构建模型 3. 编译模型 4. 训练模型 5. 评估模型 6. 模型应用与预测 7. 保存与加载模型 8.完整代码 1. 数据准备与预处理 我们将使用一个简单的线性回归问题&#xff0c;其中输入特征 x 和标…
阅读更多...
【memgpt】letta 课程1/2：从头实现一个自我编辑、记忆和多步骤推理的代理

【memgpt】letta 课程1/2：从头实现一个自我编辑、记忆和多步骤推理的代理

llms-as-operating-systems-agent-memory llms-as-operating-systems-agent-memory内存 操作系统的内存管理
阅读更多...
6-图像金字塔与轮廓检测

6-图像金字塔与轮廓检测

文章目录 6.图像金字塔与轮廓检测（1）图像金字塔定义（2）金字塔制作方法（3）轮廓检测方法（4）轮廓特征与近似（5）模板匹配方法6.图像金字塔与轮廓检测 （1）图像金字塔定义 高斯金字塔拉普拉斯金字塔 高斯金字塔：向下采样方法(缩小) 高斯金字塔：向上采样方法(放大)…
阅读更多...
深入理解Java引用传递

深入理解Java引用传递

先看一段代码&#xff1a; public static void add(String a) {a "new";System.out.println("add: " a); // 输出内容&#xff1a;add: new}public static void main(String[] args) {String a null;add(a);System.out.println("main: " a);…
阅读更多...
925.长按键入

925.长按键入

目录 一、题目二、思路三、解法四、收获 一、题目 你的朋友正在使用键盘输入他的名字 name。偶尔&#xff0c;在键入字符 c 时&#xff0c;按键可能会被长按&#xff0c;而字符可能被输入 1 次或多次。 你将会检查键盘输入的字符 typed。如果它对应的可能是你的朋友的名字&am…
阅读更多...
【Rust自学】15.2. Deref trait Pt.1：什么是Deref、解引用运算符*与实现Deref trait

【Rust自学】15.2. Deref trait Pt.1：什么是Deref、解引用运算符*与实现Deref trait

喜欢的话别忘了点赞、收藏加关注哦&#xff0c;对接下来的教程有兴趣的可以关注专栏。谢谢喵&#xff01;(&#xff65;ω&#xff65;) 15.2.1. 什么是Deref trait Deref的全写是Dereference&#xff0c;就是引用的英文reference加上"de"这个反义前缀&#xff0c…
阅读更多...
吴恩达深度学习——超参数调试

吴恩达深度学习——超参数调试

内容来自https://www.bilibili.com/video/BV1FT4y1E74V&#xff0c;仅为本人学习所用。 文章目录 超参数调试调试选择范围 Batch归一化公式整合 Softmax 超参数调试 调试 目前学习的一些超参数有学习率 α \alpha α&#xff08;最重要&#xff09;、动量梯度下降法 β \bet…
阅读更多...
【赵渝强老师】K8s中Pod探针的ExecAction

【赵渝强老师】K8s中Pod探针的ExecAction

在K8s集群中&#xff0c;当Pod处于运行状态时&#xff0c;kubelet通过使用探针&#xff08;Probe&#xff09;对容器的健康状态执行检查和诊断。K8s支持三种不同类型的探针&#xff0c;分别是&#xff1a;livenessProbe&#xff08;存活探针&#xff09;、readinessProbe&#…
阅读更多...
如何对系统调用进行扩展?

如何对系统调用进行扩展?

扩展系统调用是操作系统开发中的一个重要任务。系统调用是用户程序与操作系统内核之间的接口，允许用户程序执行内核级操作（如文件操作、进程管理、内存管理等）。扩展系统调用通常包括以下几个步骤： 一、定义新系统调用 扩展系统调用首先需要定义新的系统调用的功能。系统…
阅读更多...
安卓(android)订餐菜单【Android移动开发基础案例教程（第2版）黑马程序员】

安卓(android)订餐菜单【Android移动开发基础案例教程（第2版）黑马程序员】

一、实验目的&#xff08;如果代码有错漏&#xff0c;可查看源码&#xff09; 1.掌握Activity生命周的每个方法。 2.掌握Activity的创建、配置、启动和关闭。 3.掌握Intent和IntentFilter的使用。 4.掌握Activity之间的跳转方式、任务栈和四种启动模式。 5.掌握在Activity中添加…
阅读更多...
Python安居客二手小区数据爬取(2025年)

Python安居客二手小区数据爬取(2025年)

目录 2025年安居客二手小区数据爬取观察目标网页观察详情页数据准备工作&#xff1a;安装装备就像打游戏代码详解&#xff1a;每行代码都是你的小兵完整代码大放送爬取结果 2025年安居客二手小区数据爬取 这段时间需要爬取安居客二手小区数据&#xff0c;看了一下相关教程基本…
阅读更多...
happytime

happytime

happytime 一、查壳 无壳&#xff0c;64位 二、IDA分析 1.main 2.cry函数 总体&#xff1a;是魔改的XXTEA加密 在main中可以看到被加密且分段的flag在最后的循环中与V6进行比较&#xff0c;刚好和上面v6数组相同。 所以毫无疑问密文是v6. 而与flag一起进入加密函数的v5就…
阅读更多...
深度学习 DAY3：NLP发展史

深度学习 DAY3：NLP发展史

NLP发展史 NLP发展脉络简要梳理如下&#xff1a; (远古模型&#xff0c;上图没有但也可以算NLP&#xff09; 1940 - BOW&#xff08;无序统计模型&#xff09; 1950 - n-gram&#xff08;基于词序的模型&#xff09; (近代模型&#xff09; 2001 - Neural language models&am…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023