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

目录

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.0this.$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.mzph.cn/web/67582.shtml

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

相关文章

Python的那些事第五篇：数据结构的艺术与应用

Python的那些事第五篇：数据结构的艺术与应用

新月人物传记&#xff1a;人物传记之新月篇-CSDN博客 目录 一、列表&#xff08;List&#xff09;&#xff1a;动态的容器 二、元组&#xff08;Tuple&#xff09;&#xff1a;不可变的序列 三、字典&#xff08;Dict&#xff09;&#xff1a;键值对的集合 四、集合&#xf…
阅读更多...
【AI】DeepSeek 概念/影响/使用/部署

【AI】DeepSeek 概念/影响/使用/部署

在大年三十那天&#xff0c;不知道你是否留意到&#xff0c;“deepseek”这个词出现在了各大热搜榜单上。这引起了我的关注&#xff0c;出于学习的兴趣&#xff0c;我深入研究了一番&#xff0c;才有了这篇文章的诞生。 概念 那么&#xff0c;什么是DeepSeek&#xff1f;首先百…
阅读更多...
MapReduce简单应用(一)——WordCount

MapReduce简单应用(一)——WordCount

目录 1. 执行过程1.1 分割1.2 Map1.3 Combine1.4 Reduce 2. 代码和结果2.1 pom.xml中依赖配置2.2 工具类util2.3 WordCount2.4 结果 参考 1. 执行过程 假设WordCount的两个输入文本text1.txt和text2.txt如下。 Hello World Bye WorldHello Hadoop Bye Hadoop1.1 分割 将每个文…
阅读更多...
Dest1ny漏洞库：用友 U8 Cloud ReleaseRepMngAction SQL 注入漏洞（CNVD-2024-33023）

Dest1ny漏洞库：用友 U8 Cloud ReleaseRepMngAction SQL 注入漏洞（CNVD-2024-33023）

大家好&#xff0c;今天是Dest1ny漏洞库的专题&#xff01;&#xff01; 会时不时发送新的漏洞资讯&#xff01;&#xff01; 大家多多关注&#xff0c;多多点赞&#xff01;&#xff01;&#xff01; 0x01 产品简介 用友U8 Cloud是用友推出的新一代云ERP&#xff0c;主要聚…
阅读更多...
2.1.2 Bayer阵列与去马赛克

2.1.2 Bayer阵列与去马赛克

文章目录 Bayer阵列去马赛克方法 Bayer阵列 由于传感器只能感受到光的强度&#xff0c;而无法感知颜色&#xff0c;所以需要用红、绿、蓝颜色的滤光片将光中的R、G、B亮度滤出&#xff0c;再通过R、G、B的组合得到各种色彩。Bayer阵列是使用一个传感器获得彩色图像的方法&#…
阅读更多...
红黑树的学习

红黑树的学习

红黑树的概念 红黑树&#xff0c;是一种二叉搜索树&#xff0c;但在每个结点上增加一个存储位表示结点的颜色&#xff0c;可以是Red或 Black。 通过对任何一条从根到叶子的路径上各个结点着色方式的限制&#xff0c;红黑树确保没有一条路径会比其他路径长出俩倍&#xff0c;因…
阅读更多...
2025年01月31日Github流行趋势

2025年01月31日Github流行趋势

项目名称&#xff1a;Qwen2.5项目地址url&#xff1a;https://github.com/QwenLM/Qwen2.5项目语言&#xff1a;Shell历史star数&#xff1a;13199今日star数&#xff1a;459项目维护者&#xff1a;jklj077, JustinLin610, bug-orz, huybery, JianxinMa项目简介&#xff1a;Qwen…
阅读更多...
人工智能|基本概念|人工智能相关重要概念---AI定义以及模型相关知识

人工智能|基本概念|人工智能相关重要概念---AI定义以及模型相关知识

一、 前言&#xff1a; 最近deepseek&#xff08;深度求索&#xff09;公司的开源自然语言处理模型非常火爆。 本人很早就对人工智能比较感兴趣&#xff0c;但由于种种原因没有过多的深入此领域&#xff0c;仅仅是做了一点初步的了解&#xff0c;借着这个deepseek&#xff0…
阅读更多...
Python GIL（全局解释器锁）机制对多线程性能影响的深度分析

Python GIL（全局解释器锁）机制对多线程性能影响的深度分析

在Python开发领域&#xff0c;GIL&#xff08;Global Interpreter Lock&#xff09;一直是一个广受关注的技术话题。在3.13已经默认将GIL去除&#xff0c;在详细介绍3.13的更亲前&#xff0c;我们先要留了解GIL的技术本质、其对Python程序性能的影响。本文将主要基于CPython&am…
阅读更多...
Git 版本控制：基础介绍与常用操作

Git 版本控制：基础介绍与常用操作

目录 Git 的基本概念 Git 安装与配置 Git 常用命令与操作 1. 初始化本地仓库 2. 版本控制工作流程 3. 分支管理 4. 解决冲突 5. 回退和撤销 6. 查看提交日志 前言 在软件开发过程中&#xff0c;开发者常常需要在现有程序的基础上进行修改和扩展。但如果不加以管理&am…
阅读更多...
（笔记+作业）书生大模型实战营春节卷王班---L0G2000 Python 基础知识

（笔记+作业）书生大模型实战营春节卷王班---L0G2000 Python 基础知识

学员闯关手册&#xff1a;https://aicarrier.feishu.cn/wiki/QtJnweAW1iFl8LkoMKGcsUS9nld 课程视频&#xff1a;https://www.bilibili.com/video/BV13U1VYmEUr/ 课程文档&#xff1a;https://github.com/InternLM/Tutorial/tree/camp4/docs/L0/Python 关卡作业&#xff1a;htt…
阅读更多...
仿真设计|基于51单片机的高速路口货车称重系统仿真

仿真设计|基于51单片机的高速路口货车称重系统仿真

目录 具体实现功能 设计介绍 51单片机简介 资料内容 仿真实现&#xff08;protues8.7&#xff09; 程序&#xff08;Keil5&#xff09; 全部内容 资料获取 具体实现功能 &#xff08;1&#xff09;LCD1602液晶第一行显示当前的车辆重量&#xff0c;第二行显示车辆重量…
阅读更多...
Ubuntu Server 安装 XFCE4桌面

Ubuntu Server 安装 XFCE4桌面

Ubuntu Server没有桌面环境&#xff0c;一些软件有桌面环境使用起来才更加方便&#xff0c;所以我尝试安装桌面环境。常用的桌面环境有&#xff1a;GNOME、KDE Plasma、XFCE4等。这里我选择安装XFCE4桌面环境&#xff0c;主要因为它是一个极轻量级的桌面环境&#xff0c;适合内…
阅读更多...
2025：影刀RPA使用新实践--CSDN博客下载

2025：影刀RPA使用新实践--CSDN博客下载

文章目录 一键CSDN博客下载器程序说明指导说明使用步骤 获取方法 一键CSDN博客下载器 程序说明 配置信息&#xff1a;CSDN账号&#xff08;手机号/邮箱/用户名&#xff09;、密码、博客文件类型支持markdown格式、html格式&#xff08;默认值markdown格式&#xff09;、博客保…
阅读更多...
深度学习的应用

深度学习的应用

目录 一、机器视觉 1.1 应用场景 1.2 常见的计算机视觉任务 1.2.1 图像分类 1.2.2 目标检测 1.2.3 图像分割 二、自然语言处理 三、推荐系统 3.1 常用的推荐系统算法实现方案 四、图像分类实验补充 4.1 CIFAR-100 数据集实验 实验代码 4.2 CIFAR-10 实验代码 深…
阅读更多...
前端js高级25.1.30

前端js高级25.1.30

原型&#xff1a;函数的组成结构 通过这个图我们需要知道。 假设我们创建了一个Foo函数。 规则&#xff1a;Function.protoType是函数显示原型。__proto__是隐式对象。 Function、Object、Foo函数的__proto__指向了Function.protoType说明。这三个都依托function函数来创建。…
阅读更多...
为AI聊天工具添加一个知识系统 之80 详细设计之21 符号逻辑 之1

为AI聊天工具添加一个知识系统 之80 详细设计之21 符号逻辑 之1

本文要点 要点 前面我们讨论了本项目中的正则表达式。现在我们将前面讨论的正则表达式视为狭义的符号文本及其符号规则rule&#xff08;认识的原则--认识上认识对象的约束&#xff09;&#xff0c;进而在更广泛的视角下将其视为符号逻辑及其符号原则principle&#xff08;知识…
阅读更多...
.NET Core缓存

.NET Core缓存

目录 缓存的概念 客户端响应缓存 cache-control 服务器端响应缓存 内存缓存&#xff08;In-memory cache&#xff09; 用法 GetOrCreateAsync 缓存过期时间策略 缓存的过期时间 解决方法&#xff1a; 两种过期时间策略&#xff1a; 绝对过期时间 滑动过期时间 两…
阅读更多...
自动驾驶---苏箐对智驾产品的思考

自动驾驶---苏箐对智驾产品的思考

1 前言 对于更高级别的自动驾驶&#xff0c;很多人都有不同的思考&#xff0c;方案也好&#xff0c;产品也罢。最近在圈内一位知名的自动驾驶专家苏箐发表了他自己对于自动驾驶未来的思考。 苏箐是地平线的副总裁兼首席架构师&#xff0c;同时也是高阶智能驾驶解决方案SuperDri…
阅读更多...
Sklearn 中的逻辑回归

Sklearn 中的逻辑回归

逻辑回归的数学模型 基本模型 逻辑回归主要用于处理二分类问题。二分类问题对于模型的输出包含 0 和 1&#xff0c;是一个不连续的值。分类问题的结果一般不能由线性函数求出。这里就需要一个特别的函数来求解&#xff0c;这里引入一个新的函数 Sigmoid 函数&#xff0c;也成…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023