12月28日-CSDN博客

本文链接：https://blog.csdn.net/qq_46670243/article/details/135292338

uniapp开发与微信小程序原生开发的区别

开发语言：UniApp使用Vue.js框架，开发者可以使用Vue.js的语法进行开发；而微信小程序原生开发使用JavaScript进行开发。

跨平台支持：UniApp可以将同一套代码编译成多个平台的应用程序，包括微信小程序、H5、App等；而微信小程序原生开发只能开发微信小程序。

组件库：UniApp提供了一套丰富的组件库，开发者可以直接使用这些组件来构建界面；而微信小程序原生开发需要手动编写界面的组件。

API调用：UniApp封装了一套统一的API，开发者可以通过调用这些API来实现各种功能；而微信小程序原生开发需要使用微信小程序提供的API来实现功能。

调试工具：UniApp提供了自己的调试工具，可以在开发过程中进行实时预览和调试；而微信小程序原生开发使用微信小程序开发工具进行调试。

生态系统：微信小程序原生开发有自己的生态系统，包括开发工具、开发文档、社区等；而UniApp也有自己的生态系统，包括开发工具、开发文档、社区等。

html语义化标签的理解

编写HTML代码时，使用具有语义化的标签来描述页面的结构和内容，以便于开发者和浏览器理解和解析页面。

使用语义化标签的好处包括：

代码可读性更好：使用语义化标签可以让代码更易于理解和维护，开发者可以更快地了解页面的结构和内容。

对搜索引擎友好：搜索引擎可以根据语义化标签更好地理解页面的结构和内容，提高页面在搜索结果中的排名。

辅助技术支持：语义化标签可以帮助屏幕阅读器等辅助技术更好地解析和呈现页面，提高可访问性。

css选择器的优先级

！important>内联样式>id选择器>类选择器>标签选择器>伪类伪元素选择器

水平垂直居中

1.定位+margin 2.定位+transform 3.flex布局 4.grid布局 (网格布局) 5.table布局(表格布局)

使用Flexbox布局：

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}

使用Grid布局：

.container {
  display: grid;
  place-items: center; /* 水平垂直居中 */
}

使用绝对定位和transform属性：

.container {
  position: relative;
}
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 水平垂直居中 */
}

使用表格布局：

.container {
  display: table;
  width: 100%;
  height: 100%;
}
.centered {
  display: table-cell;
  text-align: center; /* 水平居中 */
  vertical-align: middle; /* 垂直居中 */
}

flex布局的兼容性

旧版本的浏览器中可能存在兼容性问题

Internet Explorer：仅在IE 10及更高版本中支持Flex布局，但需要使用-ms前缀。

Opera Mini：不支持Flex布局。

UC Browser for Android：从UC Browser 9.9开始支持Flex布局。

两边宽度固定中间自适应

两边使用 float，中间使用 margin 两边使用 absolute，中间使用 margin 两边使用 float 和负 margin table 实现 flex实现 grid网格布局

css有哪些属性可以被继承

字体相关属性：

font-family：继承父元素的字体族名称。

font-size：继承父元素的字体大小。

font-weight：继承父元素的字体粗细。

文本相关属性：

color：继承父元素的文本颜色。

text-align：继承父元素的文本对齐方式。

text-decoration：继承父元素的文本装饰效果（如下划线）。

行高相关属性：

line-height：继承父元素的行高。

元素可见性属性：

visibility：继承父元素的可见性。

列表相关属性：

list-style：继承父元素的列表样式。

表格相关属性：

border-collapse：继承父元素的表格边框合并方式。

caption-side：继承父元素的表格标题位置。

实现一个三角形

.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red; 
}

map和foreach的区别

返回值：

map方法会返回一个新的数组，该数组由原始数组中的每个元素经过回调函数处理后的结果组成。

forEach方法没有返回值，它只是对数组中的每个元素执行回调函数，但不会返回任何结果。

使用方式：

map方法需要传入一个回调函数作为参数，该回调函数会被依次应用于数组中的每个元素，并将处理后的结果存储在新的数组中。

forEach方法也需要传入一个回调函数作为参数，该回调函数会被依次应用于数组中的每个元素，但它没有返回值，只是对每个元素执行操作。

副作用：

map方法不会修改原始数组，它会创建一个新的数组来存储处理后的结果。

forEach方法也不会修改原始数组，但它可以通过回调函数对原始数组中的元素进行修改。

下面是一个示例，展示了map和forEach的使用方式和区别：
const numbers = [1, 2, 3, 4, 5];

// 使用map方法
const doubledNumbers = numbers.map(num => num * 2);
console.log(doubledNumbers); // 输出: [2, 4, 6, 8, 10]

// 使用forEach方法
numbers.forEach((num, index) => {
 numbers[index] = num * 2;
});
console.log(numbers); // 输出: [2, 4, 6, 8, 10]
总结起来，map方法适合在需要对数组中的每个元素进行处理并返回新数组的情况下使用，而forEach方法适合在需要对数组中的每个元素执行操作，但不需要返回结果的情况下使用。

微信小程序的性能优化

减少网络请求：减少小程序与服务器之间的网络请求次数，可以通过合并请求、使用缓存、减少不必要的数据传输等方式来实现。

图片优化：使用合适的图片格式（如WebP、JPEG XR）和压缩算法来减小图片的文件大小，同时避免使用过大的图片。

避免过多的渲染层级：减少小程序中的视图层级嵌套，避免过多的渲染层级，可以提高渲染性能。

避免频繁的数据更新：在小程序中频繁更新数据会导致频繁的UI渲染，可以通过合并更新、使用setData的第二个参数来批量更新数据等方式来减少渲染次数。

使用虚拟列表：对于长列表，可以使用虚拟列表技术，只渲染可见区域的内容，减少渲染的元素数量，提高性能。

避免过多的事件绑定：过多的事件绑定会增加小程序的事件处理负担，可以通过事件委托、事件节流等方式来优化事件绑定。

使用分包加载：对于大型小程序，可以使用分包加载的方式将不常用的页面或组件进行分包，减少首次加载的大小，提高启动速度。

使用缓存：合理使用小程序的缓存机制，对于一些静态数据或频繁使用的数据可以进行缓存，减少网络请求。

使用wx:key：在使用wx:for循环渲染列表时，为每个列表项指定唯一的wx:key，可以提高列表渲染的性能。(原生)

使用小程序提供的性能分析工具：微信开发者工具提供了性能分析工具，可以帮助开发者定位性能瓶颈，优化小程序的性能。