微信小程序开发的基础学习

news2024/9/22 3:37:29

回顾上篇内容

1、小程序核心理念:

在小程序里面,会把每一个标签看作一个矩阵,该矩阵的宽高会平行x轴、y轴

那么我们只需要知道该矩阵一个左上角的坐标,即可确定该矩阵的位置

2、题外话🧐

(1)会写word文档==》就会做网页开发==》就会做小程序开发

(2)开发的逻辑是跟着写word文档来的

(3)给word文档的一段字加粗步骤

  1. 选中字段
  2. 点击加粗按钮

目录

一、常识

1、各个文件的作用

2、语言转换

3、wxml语言

4、文档流

5、块级标签、行内标签

6、分割思想

二、常用标签

1、text标签

 2、view标签

三、wxss的编写

1、设置属性

2、格式

3、将wxml与wxss相连

4、完整例子

四、float浮动

1、概念

2、问题例子1

3、问题例子2

五、盒子模型

1、概念

2、content:内容

3、padding:内边距

4、border:边框

 5、margin:外间距

六、补充

1、text-align

 2、margin:auto

3、line-height

七、聊天框代码例子

1、界面大框架

 2、头部标题

 3、中间内容【分割思想】

  4、底部内容

5、完整代码


一、常识

1、各个文件的作用

wxml:页面显示的内容
wxss:页面显示内容的属性
js:页面显示内容的逻辑
json:页面的配置

2、语言转换

编程语言==转变==》机器语言【0 / 1组成】==转变==》操作电脑

3、wxml语言

(1)超文本标记语言

①超文本:文本【文字内容】+非文本【图片,视频】

②标记:即标签

(2)wxml标签格式

<标签></标签>:双标签
<标签>:上标签
</标签>:下标签
<标签>内容</标签>:标签中间放内容
<标签 属性1=值1 属性2=值2>:上标签放属性

完整格式:
<标签 属性1=值1 属性2=值2>内容</标签>

注意:属性与值用=,属性与属性用空格

4、文档流

(1)适用于网站,小程序

(2)每一个标签都会占据一定的网页位置,这个位置大小即文档流大小

(3)遵循从左到右、从上到下的排列原则

(4)由 width * height 组成

5、块级标签、行内标签

(1)块级标签:宽度占据页面的一整行,高度由内容自动撑大

(2)行内标签:宽高由内容决定,无法手动改变

6、分割思想

将一个页面尽可能的切割成你能够解决的最小单元


二、常用标签

1、text标签

(1)文字标签,本身没有任何效果

(2)行内标签

 2、view标签

(1)容器标签

(2)块级标签:宽度占据页面的一整行,高度默认由内容自动撑大

<view>你们好</view>
<view>我是申小兮</view>

(3)默认文档流大小 = 宽度100% * 文字高度

<view class="text1">你们好你们好你们好你们好你们好你们好</view>
<view class="text2">我是申小兮</view>
.text1{
  font-size: 70rpx;/* 字体大小 */
  color: red;/* 字体颜色 */
  background-color: black;
}
.text2{
  font-size: 100rpx;
  color: blue;
}

 (4)如果手动设定了标签的高度height,则默认的文字高度就会失效

文档流大小 = 宽度100% * 300rpx

<view class="text1">你们好我是申小兮你们好我是申小兮你们好我是申小兮你们好我是申小兮你们好我是申小兮你们好我是申小兮你们好我是申小兮</view>
.text1{
  font-size: 70rpx;/* 字体大小 */
  color: red;/* 字体颜色 */
  background-color: black;
  height: 300rpx;
}

(5)注意

①文档流规则:从左到右排,排到排不下才会换行

<view class="text1"></view>
12345
.text1{
  background-color: gray;
  width: 300rpx;
  height: 300rpx;
}

注意:该例子的文档流 = 宽度100% * 300rpx,而不是300rpx * 300rpx

③块级标签文档流的大小:宽度一定是占满整行的,而高度有两种情况:一种是手写的,另一种是由内容撑大的

(6)再来一个例子

<view class="view0">
  <view class="view1"></view>
  <view class="view2"></view>
</view>
.view0{
  background-color: palegoldenrod;
}
.view1{
  background-color: gainsboro;
  width: 300rpx;
  height: 300rpx;
}
.view2{
  background-color: orange;
  width: 300rpx;
  height: 300rpx;
}

view0的文档流大小 =  宽度100% * 600rpx


三、wxss的编写

1、设置属性

(1)class选择器:用来选中标签

<text class="text1">你们好,我是申小兮</text>

(2)更多选择器的介绍及使用,小伙伴们可以看下面的文章

HTML基础第二课(冲浪笔记2)_申小兮IU的博客-CSDN博客本节主要学习内容:表格、表单、选择器。https://blog.csdn.net/qq_51478745/article/details/124903785

2、格式

选择器名称{
    属性1:值1;
    属性2:值2;
}
text1{
  font-size: 70rpx;/* 字体大小 */
  color: red;/* 字体颜色 */
}

3、将wxml与wxss相连

(1)class选择器使用点语法

.text1{
  font-size: 70rpx;/* 字体大小 */
  color: red;/* 字体颜色 */
}

4、完整例子

<text class="text1">你们好,我是申小兮</text>
<text class="text2">老墨,我想吃鱼了</text>
.text1{
  font-size: 70rpx;/* 字体大小 */
  color: red;/* 字体颜色 */
}
.text2{
  font-size: 100rpx;
  color: blue;
}


四、float浮动

1、概念

(1)使得标签脱离文档流,不占据页面位置大小,处于漂浮状态

(2)取值:left / right

2、问题例子1

(1)排列问题:按照view的特点,两个方块只能上下排列

<view class="view0">
  <view class="view1"></view>
  <view class="view2"></view>
</view>
.view0{
  background-color: palegoldenrod;
}
.view1{
  background-color: gainsboro;
  width: 300rpx;
  height: 300rpx;}
.view2{
  background-color: orange;
  width: 300rpx;
  height: 300rpx;
}

(2)解决措施:设置浮动

.view1{
  background-color: gainsboro;
  width: 300rpx;
  height: 300rpx;
  float: left;
}
.view2{
  background-color: orange;
  width: 300rpx;
  height: 300rpx;
  float: right;
}

3、问题例子2

(1)页面紊乱:再设置一个蓝色大方块时,会被两个小方块覆盖

<view class="view0">
  <view class="view1"></view>
  <view class="view2"></view>
</view>
<view class="view3"></view>
.view0{
  background-color: palegoldenrod;
}
.view1{
  background-color: gainsboro;
  width: 300rpx;
  height: 300rpx;
  float: left;
}
.view2{
  background-color: orange;
  width: 300rpx;
  height: 300rpx;
  float: right;
}
.view3{
  background-color: blue;
  height: 500rpx;
}

(2)解决措施:给父视图view0一个固定高度

.view0{
  background-color: palegoldenrod;
  height: 350rpx;
}

(3)分割思想:将大黄方块view0想象成一个切割出来的游泳池,而view1,view2小方块无论是站着躺着,都不会影响view0水池大小,也就不会影响到view3

view0的文档流 = 宽度100% * 350rpx


五、盒子模型

1、概念

(1)css假定每一个标签都是一个矩阵,围绕着该矩阵从内到外展开一系列的属性来描述它,这一系列就被称为【盒子模型】

(2)组成:content、padding、border、margin

(3)举例:篮球场上有⼀个箱子📦,箱子里有⼀颗篮球🏀
                    篮球场上又有⼀个箱子📦,箱子里也有⼀颗篮球🏀

2、content:内容

由width、height两部分组成,就是这颗篮球🏀

<view class="v1">我是渣渣辉</view>
<view class="v2"></view>
.v1{
  width: 500rpx;
  height: 500rpx;
  background-color: gainsboro;
  font-size: 60rpx;
}
.v2{
  width: 500rpx;
  height: 500rpx;
  background-color: orange;
}

3、padding:内边距

内容到边框的距离,🏀到📦的距离

(1)有上下左右四个⽅向的内边距,padding-left/right/top/bottom

(2)系统在设置padding的时候,默认会撑大content,再拿出对应的间距作为内间距

.v1{
  width: 500rpx;
  height: 500rpx;
  background-color: gainsboro;
  font-size: 60rpx;
  padding-top: 20rpx;
  padding-left: 100rpx;
}
.v2{
  width: 500rpx;
  height: 500rpx;
  background-color: orange;
}

 (3)如果希望padding从宽高本身去减小的话,设置box-sizing: border-box;

.v1{
  width: 500rpx;
  height: 500rpx;
  background-color: gainsboro;
  font-size: 60rpx;
  padding-top: 20rpx;
  padding-left: 100rpx;
  box-sizing: border-box;
}

4、border:边框

📦的厚度

(1)有上下左右四个⽅向的边框

(2)border-style样式、border-color颜⾊、border-width粗细

.v2{
  width: 500rpx;
  height: 500rpx;
  background-color: orange;
  /* 三个属性缺一不可 */
  border-style: solid;/* solid直线 */
  border-color: red;
  border-width: 50rpx;
}

 (3)单独设定某⼀条边框

border-⽅向-style/color/width
.v2{
  width: 500rpx;
  height: 500rpx;
  background-color: orange;
  /* 三个属性缺一不可 */
  border-style: solid;/* solid直线 */
  border-color: red;
  border-width: 50rpx;
  border-right-width: 0;
  border-top-color: blue;
}

(4)系统在设置border的时候,默认会撑大content,再拿出对应的间距作为边框

如果希望border从宽高本身去减小的话,设置box-sizing: border-box;

(5)圆⻆:border-radius

.v2{
  width: 500rpx;
  height: 500rpx;
  background-color: orange;
  /* 三个属性缺一不可 */
  border-style: solid;/* solid直线 */
  border-color: red;
  border-width: 50rpx;
  box-sizing: border-box;
  border-radius: 50rpx;
}

 ①四个⻆可以单独设置

border-top/bottom-left/right-radius
.v2{
  width: 500rpx;
  height: 500rpx;
  background-color: orange;
  border-style: solid;
  border-color: red;
  border-width: 50rpx;
  box-sizing: border-box;
  border-top-right-radius: 100rpx;
  border-bottom-left-radius: 100rpx;
}

 

 ②圆形:正方形圆角等于边长一半

.v2{
  width: 500rpx;
  height: 500rpx;
  background-color: orange;
  border-style: solid;
  border-color: red;
  border-width: 50rpx;
  box-sizing: border-box;
  border-radius: 500rpx;
}

 5、margin:外间距

边框到边框的距离,📦与📦的距离

(1)有上下左右四个方向的外边距,margin-left/right/top/bottom

.v1{
  width: 500rpx;
  height: 500rpx;
  background-color: gainsboro;
  font-size: 60rpx;
  padding-top: 20rpx;
  padding-left: 100rpx;
  box-sizing: border-box;
  /* margin */
  margin-bottom: 100rpx;
  margin-left: 40rpx;
}
.v2{
  width: 500rpx;
  height: 500rpx;
  background-color: orange;
  border-style: solid;
  border-color: red;
  border-width: 50rpx;
  box-sizing: border-box;
  border-radius: 500rpx;
}


六、补充

1、text-align

内容对齐方式

text-align:center/left/right
.v2{
  width: 600rpx;
  height: 600rpx;
  background-color: orange;
  border: 20rpx solid red;
  box-sizing: border-box;
  font-size: 60rpx;
  /* 文字居中 */
  text-align: center;
}

🏀在📦居中的位置

 2、margin:auto

使得标签处于所占据⽂档流的正中央
.v2{
  width: 300rpx;
  height: 300rpx;
  background-color: orange;
  border: 20rpx solid red;
  box-sizing: border-box;
  font-size: 60rpx;
  /* 文字居中 */
  text-align: center;
  /* 标签居中 */
  margin: auto;
}

📦在篮球场中间位置 

3、line-height

(1)文字行高

.v2{
  width: 500rpx;
  height: 500rpx;
  /* 行高 */
  line-height: 440rpx;
  background-color: orange;
  border: 20rpx solid red;
  box-sizing: border-box;
  font-size: 60rpx;
  /* 文字居中 */
  text-align: center;
  /* 标签居中 */
  margin: auto;
}

 (2)区别于height是容器的高度


七、聊天框代码例子

1、界面大框架

<view class="headView"></view>
<view class="bodyView"></view>
<view class="footView"></view>
.headView{
  height: 150rpx;
  background-color: blue;
}
.bodyView{
  height: 900rpx;
  background-color: white;
}
.footView{
  height: 350rpx;
  background-color: blue;
}

 2、头部标题

<view class="headView">聊天室</view>
.headView{
  height: 150rpx;
  border-bottom: 1rpx solid gray;
  font-size: 56rpx;
  font-weight: bold;
  padding-left: 50rpx;
  line-height: 150rpx;
}

 3、中间内容【分割思想】

(1)分割左半部分为聊天信息1

①再分割两半,左半部分为头像

<view class="bodyView">
  <view class="leftView">
    <view class="left1">小兮</view>
    <view class="left2"></view>
  </view>
</view>
.bodyView{
  height: 900rpx;
  background-color: white;
}
.leftView{
  height: 250rpx;
  background-color: gainsboro;
}
.left1{
  width: 100rpx;
  height: 100rpx;
  background-color: blue;
  color: white;
  font-size: 35rpx;
  font-weight: bold;
  float: left;
  margin-top: 30rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 100rpx;
  line-height: 100rpx;
  text-align: center;
}
.left2{
  width: 70%;
  height: 200rpx;
  background-color: aqua;
  float: left;
  margin-top: 30rpx;
}

  ②右半部分再分割,上面是时间,下面是消息

<view class="left2">
  <view class="leftTime">8:32</view>
  <view class="leftContent">你好,我是申小兮</view>
</view>
.left2{
  width: 70%;
  height: 200rpx;
  /* background-color: aqua; */
  float: left;
  margin-top: 30rpx;
}
.leftTime{
  color: gray;
}
.leftContent{
  padding: 30rpx;
  background-color: rgb(240, 239, 239);
  border-top-right-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
  margin-top: 20rpx;
}

  (2)分割右半部分为聊天信息2

<view class="rightView">
  <view class="right1">张三</view>
  <view class="right2">
    <view class="rightTime">8:48</view>
    <view class="rightContent">你好,我是张三</view>
  </view>
</view>
.rightView{
  height: 250rpx;
  /* background-color: gainsboro; */
}
.right1{
  width: 100rpx;
  height: 100rpx;
  background-color: blue;
  color: white;
  font-size: 35rpx;
  font-weight: bold;
  float: right;
  margin-top: 30rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 100rpx;
  line-height: 100rpx;
  text-align: center;
}
.right2{
  /* width: 70%; */
  height: 200rpx;
  /* background-color: aqua; */
  float: right;
  margin-top: 30rpx;
}
.rightTime{
  color: gray;
  text-align: right;
}
.rightContent{
  padding: 30rpx;
  color: #fff;
  background-color: rgb(57, 108, 247);
  border-top-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
  margin-top: 20rpx;
}

  4、底部内容

<view class="footView">
  <view class="footText">请输入</view>
  <view class="footSend">发送</view>
</view>
.footView{
  height: 350rpx;
  border-top: 1rpx solid gainsboro;
  /* background-color: blue; */
}
.footText{
  padding-top: 30rpx;
  padding-left: 30rpx;
}
.footSend{
  width: 200rpx;
  height: 90rpx;
  color: white;
  font-size: 40rpx;
  font-weight: bold;
  background-color: blue;
  float: right;
  margin-right: 30rpx;
  margin-top: 120rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 90rpx;
}

5、完整代码

<view class="headView">聊天室</view>
<view class="bodyView">
  <view class="leftView">
    <view class="left1">小兮</view>
    <view class="left2">
      <view class="leftTime">8:32</view>
      <view class="leftContent">你好,我是申小兮</view>
    </view>
  </view>
  <view class="rightView">
  <view class="right1">张三</view>
  <view class="right2">
    <view class="rightTime">8:48</view>
    <view class="rightContent">你好,我是张三</view>
  </view>
  </view>
  <view class="leftView">
    <view class="left1">小兮</view>
    <view class="left2">
      <view class="leftTime">8:50</view>
      <view class="leftContent">很高兴认识你</view>
    </view>
  </view>
</view>
<view class="footView">
  <view class="footText">请输入</view>
  <view class="footSend">发送</view>
</view>
.headView{
  height: 150rpx;
  border-bottom: 1rpx solid gray;
  font-size: 56rpx;
  font-weight: bold;
  padding-left: 50rpx;
  line-height: 150rpx;
}
.bodyView{
  height: 900rpx;
  /* background-color: white; */
}
.leftView{
  height: 250rpx;
  /* background-color: gainsboro; */
}
.left1{
  width: 100rpx;
  height: 100rpx;
  background-color: blue;
  color: white;
  font-size: 35rpx;
  font-weight: bold;
  float: left;
  margin-top: 30rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 100rpx;
  line-height: 100rpx;
  text-align: center;
}
.left2{
  /* width: 70%; */
  height: 200rpx;
  /* background-color: aqua; */
  float: left;
  margin-top: 30rpx;
}
.leftTime{
  color: gray;
}
.leftContent{
  padding: 30rpx;
  background-color: rgb(240, 239, 239);
  border-top-right-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
  margin-top: 20rpx;
}
.rightView{
  height: 250rpx;
  /* background-color: gainsboro; */
}
.right1{
  width: 100rpx;
  height: 100rpx;
  background-color: blue;
  color: white;
  font-size: 35rpx;
  font-weight: bold;
  float: right;
  margin-top: 30rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  border-radius: 100rpx;
  line-height: 100rpx;
  text-align: center;
}
.right2{
  /* width: 70%; */
  height: 200rpx;
  /* background-color: aqua; */
  float: right;
  margin-top: 30rpx;
}
.rightTime{
  color: gray;
  text-align: right;
}
.rightContent{
  padding: 30rpx;
  color: #fff;
  background-color: rgb(57, 108, 247);
  border-top-left-radius: 30rpx;
  border-bottom-right-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
  margin-top: 20rpx;
}

.footView{
  height: 350rpx;
  border-top: 1rpx solid gainsboro;
  /* background-color: blue; */
}
.footText{
  padding-top: 30rpx;
  padding-left: 30rpx;
}
.footSend{
  width: 200rpx;
  height: 90rpx;
  color: white;
  font-size: 40rpx;
  font-weight: bold;
  background-color: blue;
  float: right;
  margin-right: 30rpx;
  margin-top: 120rpx;
  border-radius: 10rpx;
  text-align: center;
  line-height: 90rpx;
}

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

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

相关文章

字符串总结

一、最长公共前缀 1.方法一&#xff1a;横向扫描 class Solution { public:string longestCommonPrefix(vector<string>& strs) {if (!strs.size()) {return "";}string prefix strs[0];int count strs.size();for (int i 1; i < count; i) {prefix…

通信行业的企业如何与Synaptics建立EDI连接?

Synaptics 是一家全球领先的移动计算、通信和娱乐设备人机界面交互开发解决方案设计制造公司。该公司为大部份主要电脑及笔记本电脑公司提供触摸板&#xff0c;其中包括了华硕、宏碁、戴尔、惠普、索尼、东芝、Gateway、国际商业机器、联想集团与三星电子等。 Synaptics 推荐其…

【C++】模版初阶

现在我们学习C模版的基本知识&#xff0c;为以后学习STL打下一个坚实的基础 目录 一、泛型编程 二、模版 2.1 函数模版 2.1.1 函数模版的概念 2.1.2 函数模板的使用 2.1.3 函数模板的原理 2.1.4 函数模板的实例化 2.1.5 模板参数的匹配原则 2.2 类模版 2.2.1 类模版…

【查找】二叉排序树(BST)

有序序列查找可以用二分查找&#xff0c;但其插入删除需要移动数据&#xff0c;较为复杂&#xff1b;若不想多的移动&#xff0c;可以弄成无序序列&#xff0c;但这样就不能用二分查找。 为了不影响数据顺序&#xff0c;可以使用二叉排序树&#xff0c; 概念&#xff1a; 二…

11、STM32H7 MPU Cache

篇前小问题 在使用stm32H750的FMC时&#xff0c;出现一些奇怪的问题&#xff0c;写A时序时时&#xff0c;总是写1次的代码了出现了写四次的时序&#xff0c;所以找了很久&#xff0c;才找到问题出在了MPU上&#xff0c;使用FMC时&#xff0c;必须开启MPU&#xff0c;不然会出现…

QML图形动画基础之

图形动画基础 颜色&#xff08;color&#xff09;渐变&#xff08;Gradient&#xff09;系统调色面板(SystemPalette) 图片边界动画&#xff08;BorderImage&#xff09;动态图片&#xff08;AnimatedImage&#xff09;缩放&#xff0c;旋转和平移变换Transform实现高级变换 颜…

CLion开发工具 | 01 - 认识外观界面

专栏介绍 一、创建/打开项目 二、外观和界面 1. 文件编辑区 CLion的自动提示功能如下&#xff1a; CLion的参数提示功能如下&#xff1a; CLion的形参名称显示功能&#xff1a; 2. 项目文件浏览区 3. 工具栏 3.1. 一键编译运行 CLion内置了MinGW&#xff0c;点击运行可以…

卷积神经网络推理特征图可视化查看,附录imagenet类别和编号对应查询表。通过观察法进行深度学习可解释研究

CNN模型虽然在图像处理上表现出非常良好的性能和准确性&#xff0c;但一直以来都被认为是一个黑盒模型&#xff0c;人们无法了解里面的工作机制。 针对这个问题&#xff0c;研究人员除了从理论层面去寻找解释外&#xff0c;也提出了一些可视化的方法直观地理解CNN的内部机理&am…

atl创建avtive

activex无窗口问题 控件在编码过程中要检查m_hWnd是否存在&#xff0c;不然vs可能会出现绘制错乱和崩溃 atl窗体通过CComControlBase的内部变量控制&#xff0c;窗体属性&#xff0c;包括onsize事件对应的m_bRecomposeOnResize变量控制窗体变化事件响应。 可插入的控件 授权…

Hbase基本操作

目录 HBASE 基本操作 hbase shell&#xff1a;进入hbase shell环境 status命令&#xff1a;查看集群状态 version&#xff1a;查看版本信息 create&#xff1a;创建表 drop 删除表 list&#xff1a;查看所有表 desc &#xff1a;查看表结构 exists &#xff1a;查看表…

分布式数据一致性解决方案推理过程

redis是一个极轻量级的进程&#xff0c;单机单线程单进程。 使用redis很容易实现分布式锁&#xff1a;setnx&#xff0c;同一个key&#xff0c;谁设置成功了&#xff0c;谁就抢到了锁&#xff0c;所以就产生了多锁问题。 假设客户端1抢到了锁&#xff0c;redis挂了&#xff0c…

Docker下载、安装

安装docker前&#xff0c;需要安装WSL Linux 内核、Hyper-V Hyper-V 首先确认系统是否安装&#xff1a;Hyper-V 如果没有则安装&#xff1a; pushd "%~dp0" dir /b %SystemRoot%\servicing\Packages\*Hyper-V*.mum >hyper-v.txt for /f %%i in (findstr /i . h…

java中的泛型

1.2 泛型的引入 在Java中&#xff0c;我们在声明方法时&#xff0c;当在完成方法功能时如果有未知的数据需要参与&#xff0c;这些未知的数据需要在调用方法时才能确定&#xff0c;那么我们把这样的数据通过形参表示。在方法体中&#xff0c;用这个形参名来代表那个未知的数据…

如何在四维轻云地理空间数据管理云平台中搭建场景?

《四维轻云》是一款轻量化的地理空间数据管理云平台&#xff0c;支持地理空间数据的在线管理、编辑以及分享。平台有项目管理、数据上传、场景搭建、发布分享、素材库等功能模块&#xff0c;支持多用户在线协作管理&#xff0c;实现了轻量化、便捷化的空间数据应用。 目前&…

< 前端性能优化: 资源加载优化 >

文章目录 &#x1f449; 前言&#x1f449; 一、路由懒加载> 实现代码> 处理前后各文件大小情况 &#x1f449; 二、组件懒加载> 实现代码> 适用场景 &#x1f449; 三、骨架屏优化白屏时长&#x1f449; 四、JavaScript 的6种加载方式1. 正常模式2. async 模式3. …

云端上的结题报告——凌恩智能交付系统

做组学分析的小伙伴不难发现&#xff0c;在拿到测序分析结果后&#xff0c;经常会需要进行调整&#xff0c;比如&#xff1a;配色不符合自己审美、分组需要重新设置、重复性差需要剔除样本等&#xff0c;面对重新分析或改图的情况&#xff0c;自学生信费时费力&#xff0c;找公…

ClickHouse数据一致性

目录 1 准备测试表和数据2 手动OPTIMIZE(不推荐)3 通过 Group by 去重4 通过 FINAL 查询4.1 老版本测试4.2 新版本测试 1 准备测试表和数据 查询 CK 手册发现&#xff0c;即便对数据一致性支持最好的 Mergetree&#xff0c;也只是保证最终一致性&#xff1a; 我们在使用 Repl…

条码控件Aspose.BarCode入门教程(7):如何在Java 中的 GS1-128 条码生成器

Aspose.BarCode for .NET 是一个功能强大的API&#xff0c;可以从任意角度生成和识别多种图像类型的一维和二维条形码。开发人员可以轻松添加条形码生成和识别功能&#xff0c;以及在.NET应用程序中将生成的条形码导出为高质量的图像格式。 Aspose API支持流行文件格式处理&am…

C语言—深度剖析数据在内存中的存储

深度剖析数据在内存中的存储 数据类型介绍类型的基本归类整形在内存中的存储大小端介绍整形在内存中的存储的相关练习浮点型在内存中的存储浮点型在内存中的存储相关介绍 数据类型介绍 内置类型&#xff08;C语言本身就具有的类型&#xff09;&#xff1a; char //字符…

linux_时序竞态-pause函数-sigsuspend函数-异步I/O-可重入函数-不可重入函数

接上一篇&#xff1a;linux_信号捕捉-signal函数-sigaction函数-sigaction结构体 今天来分享时序竞态的知识&#xff0c;关于时序竞态的问题&#xff0c;肯定会和cpu有关&#xff0c;也会学习两个函数&#xff0c;pause函数&#xff0c;sigsuspend函数&#xff0c; 也会分享什么…