<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[清辞的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/hccccccccccccc</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; hccccccccccccc]]></copyright><item><title><![CDATA[HarmonyOS之JS的组件基础]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/121160197</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/121160197</guid><author>hccccccccccccc</author><pubDate>Fri, 05 Nov 2021 20:06:02 +0800</pubDate><description><![CDATA[基础组件
组件是构建页面的核心，我们简单把组件分为以下基础组件，容器组件，媒体组件和画布组件。


Text组件


用于展示文本，可以设置不同的属性和样式，文本内容需要写在标签内容区。需要注意的是跟HTML的不同之处，我们只能在text中定义相关文字，不能写在span中，所以在鸿蒙开发中，我们得抛弃一些传统思想。使用方式就比如

&lt;text class="title_text"&gt;{{headTitle}}&lt;/text&gt;

然后我们在Index.js中定义自己需要的变量，其实组件的布]]></description><category></category></item><item><title><![CDATA[字体图标iconfont的使用]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/121154182</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/121154182</guid><author>hccccccccccccc</author><pubDate>Fri, 05 Nov 2021 00:30:55 +0800</pubDate><description><![CDATA[什么是iconfont

Iconfont-国内功能很强大且图标内容很丰富的矢量图标库,提供矢量图标下载、在线存储、格式转换等功能。阿里巴巴体验团队倾力打造,设计和前端开发的便捷工具

所以作为一名合格的前端程序员，一定要熟练使用iconfont
为什么要使用iconfont

简单点来说根据以往开发项目的经验，通常是下载img图片，并且直接插入到html中，说实话这个方法比较简单粗暴。但是却有很大的缺点。就是需要浏览器加载资源，降低浏览器性能。所以我找了一篇写的比较好的文章，是关于前端图片的处理技术，可以]]></description><category></category></item><item><title><![CDATA[Javascript高级知识之移动端和本地存储]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/121089998</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/121089998</guid><author>hccccccccccccc</author><pubDate>Thu, 04 Nov 2021 00:49:52 +0800</pubDate><description><![CDATA[移动端触屏事件
移动端常见特效
移动端开发插件框架
window.sessionStorage
window.localStorage

]]></description><category></category></item><item><title><![CDATA[Javascript高级知识之PC端]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/121078536</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/121078536</guid><author>hccccccccccccc</author><pubDate>Mon, 01 Nov 2021 15:22:52 +0800</pubDate><description><![CDATA[offset

offset 翻译过来就是偏移量，我们使用offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。
获得元素距离带有定位父元素的位置
获得元素自身的大小（宽度高度）
注意：返回的数值都不带单位


offset和style的区别

offset 可以得到任意样式表中的样式值
offset 系列获得的数值是没有单位的
offsetWidth 包含padding+border+width
offsetWidth 等属性是只读属性，只能获取不能赋值
所以，我们想要获取元素大小位置，用]]></description><category></category></item><item><title><![CDATA[Javascript进阶知识之BOM]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/121046230</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/121046230</guid><author>hccccccccccccc</author><pubDate>Sat, 30 Oct 2021 14:50:22 +0800</pubDate><description><![CDATA[BOM概述

BOM（Browser Object Model）即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是window。BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性。

那我DOM和BOM的区别是什么呢？

DOM是文档对象模型
DOM 就是把「文档」当做一个「对象」来看待
DOM 的顶级对象是document
DOM 主要学习的是操作页面元素
DOM 是W3C 标准规范


BOM浏览器对象模型
把「浏览器」当做一个「对象」来看待
BOM 的顶级对象]]></description><category></category></item><item><title><![CDATA[Javascript进阶知识之事件高级]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/121009608</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/121009608</guid><author>hccccccccccccc</author><pubDate>Fri, 29 Oct 2021 01:10:42 +0800</pubDate><description><![CDATA[注册事件
两种方式，传统方式onclick和方法监听注册方式addEventListener

利用 on 开头的事件 onclick
&lt;button οnclick=“alert(‘hi~’)”&gt;&lt; /button&gt;
btn.onclick = function() {}
特点： 注册事件的唯一性
同一个元素同一个事件只能设置一个处理函数，最
后注册的处理函数将会覆盖前面注册的处理函数


w3c 标准 推荐方式
addEventListener() 它是一个方法
IE9 之前的 ]]></description><category></category></item><item><title><![CDATA[Javascript进阶知识之DOM]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120934462</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120934462</guid><author>hccccccccccccc</author><pubDate>Sun, 24 Oct 2021 23:23:43 +0800</pubDate><description><![CDATA[WebAPI

在以前的文章中，我已经记录了关于ECMAScript的相关基础，当然讲的是基于ES6以前的内容，关于ES6的进阶内容会在后面的文章中写到。本节文章主要把重心放在WebAPI中的DOM知识上。上图是它们之间的关系。

Web API 是浏览器提供的一套操作浏览器功能和页面元素的API(BOM和DOM)。
Web API 主要是针对于浏览器提供的接口，主要针对于浏览器做交互效果
Web API 一般都有输入和输出（函数的传参和返回值），Web API 很多都是方法（函数）
比如我们想要浏览器弹出]]></description><category></category></item><item><title><![CDATA[Javascript基础知识（3）]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120843227</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120843227</guid><author>hccccccccccccc</author><pubDate>Tue, 19 Oct 2021 14:37:21 +0800</pubDate><description><![CDATA[内置对象

内置对象介绍


JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器对象（详见内置对象的官网）
前面两种对象是JS 基础内容，属于ECMAScript；第三个浏览器对象属于我们JS 独有的
内置对象就是指JS 语言自带的一些对象，这些对象供开发者使用，并提供了一些常用的或是最基本而必要的功能（属性和方法）
内置对象最大的优点就是帮助我们快速开发JavaScript 提供了多个内置对象：Math、Date 、Array、String等


Math对象


Math 对象不是构]]></description><category></category></item><item><title><![CDATA[Javascript基础知识（2）]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120834172</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120834172</guid><author>hccccccccccccc</author><pubDate>Tue, 19 Oct 2021 11:36:57 +0800</pubDate><description><![CDATA[操作符

算术运算符



浮点数的最高精度是17位小数，因此不要直接判断两个浮点数是否相等

var result = 0.1 + 0.2;    // 结果不是0.3，而是：0.30000000000000004
console.log(0.07 * 100);   // 结果不是7，而是：7.000000000000001


递增递减运算符


前置递增和后置递增运算符可以简化代码的编写，让变量的值+ 1 比以前写法更简单
单独使用时，运行结果相同
与其他代码联用时，执行结果会不同
后置：先原值运算]]></description><category></category></item><item><title><![CDATA[Javascript基础知识]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120832028</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120832028</guid><author>hccccccccccccc</author><pubDate>Mon, 18 Oct 2021 20:29:02 +0800</pubDate><description><![CDATA[变量

基本语法

var age=10;//声明一个名称为age的变量，并且为它赋值，称为变量的初始化


var是一个JS关键字，用来声明变量。我们也可以按照其他编程语言的思路，给变量进行更新，并且可以同时声明多个变量，此时只需要使用一个var 多个变量名之间使用英文逗号来隔开。


命名规范


由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和var App; 是两个变量
不能以数字开头并且]]></description><category></category></item><item><title><![CDATA[Javascrip相关概念与认知]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120818682</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120818682</guid><author>hccccccccccccc</author><pubDate>Mon, 18 Oct 2021 13:11:48 +0800</pubDate><description><![CDATA[JavaScript相关概念

是一种运行在客户端的脚本语言，并且不需要编译，运行过程由js解释器（js引擎）逐行来进行解释并执行。现在也可以基于Node.js技术进行服务器编程。（详情见Node.js入门基础）
Javascript的作用（广泛应用于各个领域，说明其的重要性）


表单动态校验
网页特效
基于Node.js的服务器开发
桌面程序
App
控制硬件-物联网
游戏开发


浏览器分为渲染引擎和JS引擎


渲染引擎：用来解析HTML与CSS，俗称内核，比如Chrome浏览器的blink和web]]></description><category></category></item><item><title><![CDATA[Bug—行内块元素的显示问题]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120709310</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120709310</guid><author>hccccccccccccc</author><pubDate>Mon, 11 Oct 2021 19:17:18 +0800</pubDate><description><![CDATA[发现Bug

今天在做flex布局的时候，我在父元素中引入了四个行内元素span，想测试flex的相关属性，代码如下所示。我本来是想在box这个盒子中放四个span，因为按理说应该正好放下四个span,但实际效果却不是这样。

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device]]></description><category></category></item><item><title><![CDATA[CSS的flex布局]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120695040</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120695040</guid><author>hccccccccccccc</author><pubDate>Mon, 11 Oct 2021 16:52:06 +0800</pubDate><description><![CDATA[传统盒模型布局方式

CSS常见的布局方式如下图所示。传统布局方式就是通过盒子模型，使用display+postion+float属性完成布局。详见参考文章


文档流布局
display布局方式，按照文档的顺序一个一个的显示出来，块元素独占一行，行内元素共享一行
浮动布局
浮动方式布局就是使用 float 属性，使元素脱离文档流，浮动起来。
定位布局
通过 position 属性来进行定位
flex布局


2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面]]></description><category></category></item><item><title><![CDATA[HarmonyOS之Java事件模块]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120669582</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120669582</guid><author>hccccccccccccc</author><pubDate>Sat, 09 Oct 2021 19:30:28 +0800</pubDate><description><![CDATA[事件的介绍

事件就是可以被识别的操作。常见的事件有单击双击长按和触摸事件
我们可以给本文，按钮等添加不同的事件，这样就可以实现交互功能

单击事件

ClickedListener有四种写法


自己编写实现类

public class MainAbilitySlice extends AbilitySlice {
Text text1 = null;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.]]></description><category></category></item><item><title><![CDATA[编写简单的鸿蒙入门应用]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120658244</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120658244</guid><author>hccccccccccccc</author><pubDate>Sat, 09 Oct 2021 12:15:07 +0800</pubDate><description><![CDATA[入门应用HelloWorld

当新建完毕一个鸿蒙项目之后，自带有HelloWorld的代码


页面中的包含关系


如下图所示，MainAbility（界面）包含一个或多个MainAbilitySlice（子界面）
MainAbilitySlice（子界面）包含要显示的内容



MainAbility是项目启动的第一个界面，在界面里面不是直接显示内容的。在界面里面展示的是子界面，我们也称之为切片slice。在子界面里面才是显示内容的，这也正是为什么我们的逻辑代码都要写在slice文件中


配置文件c]]></description><category></category></item><item><title><![CDATA[鸿蒙应用开发准备]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120657643</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120657643</guid><author>hccccccccccccc</author><pubDate>Fri, 08 Oct 2021 19:10:22 +0800</pubDate><description><![CDATA[鸿蒙开发使用语言
JAVA C/C++ JS

JAVA JS适用于手机应用的开发
C/C++适用于硬件的开发

鸿蒙开发完整流程

开发的准备工作

下载和安装node.js
下载和安装DevEco Studio 并且修改相关配置


修改字体大小



取消注释斜体并修改注释颜色



自动提示忽略大小写



自动导包


项目结构介绍

最外面的结构


MyApplication：整个项目的项目名
External Libraries：项目中要导入的第三方jar包



展开MyApplicati]]></description><category></category></item><item><title><![CDATA[鸿蒙系统的概述]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120656584</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120656584</guid><author>hccccccccccccc</author><pubDate>Fri, 08 Oct 2021 17:42:53 +0800</pubDate><description><![CDATA[系统全场景战略

华为的1+8+N战略

1是指手机 8是指平板 PC 眼镜 智慧屏 AI音响 耳机 手表 车机
从手机的优势向外延展，N是指由生态系统合作伙伴提供的智能设备，基于用户为中心的家庭场景，提供全场景的娱乐社交。（初衷是解决在5G万物互联时代，各个系统间的连接问题）

鸿蒙操作系统技术特征

分布式设计


分布式软总线，分布式数据管理和分布式安全

分布式软总线在设备间搭建一条无形的总线，具备自发现，自组网，高带宽，低时延的特点。
开发者是需聚焦于业务逻辑的实现，无须关注组网方式与底层协议

]]></description><category></category></item><item><title><![CDATA[项目背景介绍]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120635071</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120635071</guid><author>hccccccccccccc</author><pubDate>Thu, 07 Oct 2021 13:48:10 +0800</pubDate><description><![CDATA[CSS样式补充

精灵图


项目章将多张小图片，合并成一张大图片，这张大图片称之为精灵图。
精灵图的优点是减少服务器发送次数，减轻服务器压力，提高页面加载速度。
比如需要在网页中展示8张小图片，8张小图片分别发送，需要发送8次请求。
合成一张精灵图发送，只需要发送1次


这种小图片就是一张精灵图上的图标（自取，可以用在下面的代码中）


使用步骤：创建一个盒子，设置盒子大小为小图片大小，设置精灵图为盒子的背景图片，将小图片左上角坐标取负值，设置给盒子

&lt;!DOCTYPE html&gt;
&lt]]></description><category></category></item><item><title><![CDATA[CSS布局进阶]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120631911</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120631911</guid><author>hccccccccccccc</author><pubDate>Thu, 07 Oct 2021 13:11:49 +0800</pubDate><description><![CDATA[定位
装饰
选择器扩展
CSS样式补充
项目前置知识
项目结构搭建

]]></description><category></category></item><item><title><![CDATA[CSS布局初级]]></title><link>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120629683</link><guid>https://blog.youkuaiyun.com/hccccccccccccc/article/details/120629683</guid><author>hccccccccccccc</author><pubDate>Thu, 07 Oct 2021 00:58:21 +0800</pubDate><description><![CDATA[结构伪类选择器
伪元素
标准流
浮动
清除浮动

]]></description><category></category></item></channel></rss>