uni-app基础问题（一）

简述题

生命周期有哪些？
应用生命周期函数有哪些？
页面生命周期函数是哪些？写在哪里？
组件生命周期函数是什么？
条件编译是什么？
uni-ui组件库中有哪些常用类？
API的概念？
API的分类？
同步与异步的区别，两者的API函数有什么特征吗？
Promise优化机制是什么？
计时器API有哪些函数，以及其参数？
界面交互API有哪些，有什么常用参数？
网络API有哪些，有什么常用参数？
关于data参数的转换规则？
数据缓存有哪些API，同步与异步的区别有哪些？
路由API的名字分别是什么，有什么参数？
组件的hidden属性有什么用？
怎么在组件中使用script的data中定义的js变量？
怎么定义一个有固定参数的点击函数？
讲讲flex-direction的六个属性，以及它们的效果区别？

结果：

1. 生命周期

uni-app 的生命周期涵盖应用生命周期、页面生命周期和组件生命周期。

2. 应用生命周期函数

onLaunch：应用初始化完成时触发，全局只触发一次。
onShow：应用启动或从后台进入前台显示时触发。
onHide：应用从前台进入后台时触发。
onError：应用发生脚本错误或者 API 调用报错时触发。

3. 页面生命周期函数及位置

onShow：页面显示时触发。
onReady：页面初次渲染完成时触发。
onShow：页面显示时触发。
onHide：页面隐藏时触发。
onUnload：页面卸载时触发。
onLoad：监听页面加载，接收参数。
onReady：监听页面初次渲染完成。
onShow：监听页面显示。
onHide：监听页面隐藏。
onUnload：监听页面卸载。
onPullDownRefresh：监听用户下拉动作。
onReachBottom：页面上拉触底事件的处理函数。
onShareAppMessage：用户点击右上角分享时触发。
onPageScroll：监听页面滚动。
onResize：监听窗口尺寸变化。
onTabItemTap：点击 tab 时触发。

这些函数写在页面的 script 标签内。

4. 组件生命周期函数

beforeCreate：实例初始化之后，数据观测和 event/watcher 事件配置之前被调用。
created：实例已经创建完成之后被调用。
beforeMount：挂载开始之前被调用。
mounted：挂载完成时调用。
beforeUpdate：数据更新时调用。
updated：数据更新导致的 DOM 重新渲染和更新完成之后调用。
beforeDestroy：实例销毁之前调用。
destroyed：实例销毁之后调用。
activated：组件被激活时调用。
deactivated：组件被禁用时调用。
errorCaptured：捕获子孙组件错误时调用。

5. 条件编译

条件编译是指在一个项目里，通过不同平台的编译条件，编译出不同的代码，以此实现一套代码多平台部署。它使用特定的注释语法，例如 //#ifdef APP-PLUS 表示仅在 App 平台编译。

6. uni-ui 组件库常用类

uni-list：列表组件。
uni-section：分段器组件。
uni-collapse：折叠面板组件。
uni-datetime-picker：日期时间选择器组件。

7. API 的概念

API（Application Programming Interface）即应用程序编程接口，是一些预先定义的函数，用于实现与操作系统、硬件或其他软件之间的交互。在 uni-app 里，API 可用于调用系统功能、网络请求等。

8. API 的分类

网络请求类：像 uni.request 用于发起网络请求。
界面交互类：例如 uni.showToast 用于显示消息提示框。
设备能力类：如 uni.getSystemInfo 用于获取系统信息。
数据存储类：像 uni.setStorage 用于存储数据到本地。

9. 同步与异步的区别及 API 函数特征

区别：同步操作会阻塞后续代码的执行，直至操作完成；而异步操作不会阻塞后续代码，在操作进行时可继续执行后续代码。
API 函数特征 ：同步 API 函数通常以 Sync 结尾，例如 uni.setStorageSync；异步 API 函数一般采用回调函数或者 Promise 来处理结果，例如 uni.request。

10. Promise 优化机制

Promise 优化机制借助 Promise 对象来处理异步操作，避免回调地狱问题。在 uni-app 里，部分异步 API 支持 Promise 风格调用，可使用 async/await 语法来让异步代码看起来更像同步代码，提高代码的可读性和可维护性。例如：

javascript 复制代码

async function getData() {
    try {
        const res = await uni.request({
            url: 'https://example.com/api/data'
        });
        console.log(res.data);
    } catch (error) {
        console.error(error);
    }
}

11. 计时器 API 及参数

在 uni-app 中，使用的是 JavaScript 标准的计时器 API，主要有以下两个函数：

复制代码

  setTimeout(callback, delay, [param1, param2, ...])

：

callback：在延迟时间结束后要执行的函数。
delay：延迟的毫秒数。
[param1, param2, ...]：可选参数，传递给回调函数的参数。

复制代码

  setInterval(callback, delay, [param1, param2, ...])

：

callback：每隔指定时间重复执行的函数。
delay：每次执行之间的间隔毫秒数。
[param1, param2, ...]：可选参数，传递给回调函数的参数。

对应的清除计时器函数为：

clearTimeout(timeoutID)：清除由 setTimeout 设置的计时器，timeoutID 是 setTimeout 返回的 ID。
clearInterval(intervalID)：清除由 setInterval 设置的计时器，intervalID 是 setInterval 返回的 ID。

12. 界面交互 API 及常用参数

复制代码

  uni.showToast(options)

：显示消息提示框。

title：提示的内容，必填。
icon：图标，可选值为 'success'、'loading'、'none'，默认 'success'。
duration：提示的延迟时间，默认 1500ms。

复制代码

  uni.showModal(options)

：显示模态弹窗。

title：提示的标题，必填。
content：提示的内容，必填。
showCancel：是否显示取消按钮，默认 true。
confirmText：确定按钮的文字，默认 '确定'。
cancelText：取消按钮的文字，默认 '取消'。

复制代码

  uni.showLoading(options)

：显示 loading 提示框。

title：提示的内容，必填。
mask：是否显示透明蒙层，防止触摸穿透，默认 false。

13. 网络 API 及常用参数

复制代码

  uni.request(options)

：发起网络请求。

url：开发者服务器接口地址，必填。
data：请求的参数。
method：请求方法，可选值为 'GET'、'POST' 等，默认 'GET'。
header：设置请求的 header，默认 {'content-type': 'application/json'}。

复制代码

  uni.uploadFile(options)

：上传文件。

url：开发者服务器地址，必填。
filePath：要上传文件的本地路径，必填。
name：文件对应的 key，开发者在服务器端通过这个 key 可以获取到文件二进制内容，必填。
formData：HTTP 请求中其他额外的 form data。

复制代码

  uni.downloadFile(options)

：下载文件。

url：下载资源的 url，必填。
header：设置请求的 header。

14. 关于 data 参数的转换规则

当 method 为 'GET' 时，data 会被转换为 query string 追加到 url 后面，例如 {name: 'John', age: 20} 会转换为 ?name=John&age=20。
当 method 为 'POST' 且 header 中的 content-type 为 'application/json' 时，data 会被转换为 JSON 字符串进行发送。
当 method 为 'POST' 且 header 中的 content-type 为 'application/x-www-form-urlencoded' 时，data 会被转换为 key1=value1&key2=value2 的形式进行发送。

15. 数据缓存 API 及同步与异步的区别

异步 API：
复制代码
```
  uni.setStorage(options)
```
：将数据存储在本地缓存中指定的 key 中。
- key：本地缓存中的指定的 key，必填。
- data：需要存储的内容，必填。
复制代码
```
  uni.getStorage(options)
```
：从本地缓存中异步获取指定 key 对应的内容。
- key：本地缓存中的指定的 key，必填。
复制代码
```
  uni.removeStorage(options)
```
：从本地缓存中异步移除指定 key。
- key：本地缓存中的指定的 key，必填。
- uni.clearStorage()：异步清除本地所有缓存数据。
同步 API：
- uni.setStorageSync(key, data)：将数据存储在本地缓存中指定的 key 中。
- uni.getStorageSync(key)：从本地缓存中同步获取指定 key 对应的内容。
- uni.removeStorageSync(key)：从本地缓存中同步移除指定 key。
- uni.clearStorageSync()：同步清除本地所有缓存数据。

区别：异步 API 不会阻塞后续代码的执行，会通过回调函数处理结果；而同步 API 会阻塞后续代码的执行，直到操作完成并返回结果。

16. 路由 API 及参数

复制代码

  uni.navigateTo(options)

：保留当前页面，跳转到应用内的某个页面。

url：需要跳转的应用内非 tabBar 的页面的路径，必填。
events：页面间通信接口，用于监听被打开页面发送到当前页面的消息。
success、fail、complete：分别为接口调用成功、失败、完成的回调函数。

复制代码

  uni.redirectTo(options)

：关闭当前页面，跳转到应用内的某个页面。

url：需要跳转的应用内非 tabBar 的页面的路径，必填。

复制代码

  uni.reLaunch(options)

：关闭所有页面，打开到应用内的某个页面。

url：需要跳转的应用内页面的路径，必填。

复制代码

  uni.switchTab(options)

：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

url：需要跳转的 tabBar 页面的路径，必填。

复制代码

  uni.navigateBack(options)

：关闭当前页面，返回上一页面或多级页面。

delta：返回的页面数，如果 delta 大于现有页面数，则返回到首页，默认 1。

17. 组件的 hidden 属性有什么用

组件的 hidden 属性用于控制组件的显示与隐藏。当 hidden 属性值为 true 时，组件会被隐藏；当 hidden 属性值为 false 时，组件会显示。与 v-if 不同，hidden 只是通过 CSS 的 display: none 来隐藏组件，组件仍然会被渲染，而 v-if 会根据条件决定是否渲染组件。

18. 怎么在组件中使用 script 的 data 中定义的 js 变量

在组件的模板中，可以直接使用 {``{}} 语法来引用 script 中 data 里定义的变量。例如：

vue 复制代码

<template>
    <view>{{ message }}</view>
</template>

<script>
export default {
    data() {
        return {
            message: 'Hello, uni-app!'
        };
    }
};
</script>

19. 怎么定义一个有固定参数的点击函数

在模板中绑定点击事件时，可以通过内联 JavaScript 调用方法并传递参数。例如：

vue 复制代码

<template>
    <button @click="handleClick('param1', 'param2')">点击</button>
</template>

<script>
export default {
    methods: {
        handleClick(param1, param2) {
            console.log(param1, param2);
        }
    }
};
</script>

20. 讲讲 flex-direction 的六个属性，以及它们的效果区别

在 CSS 中，flex-direction 是用于定义弹性容器内子元素的排列方向，标准的 flex-direction 属性值有四个，而不是六个。以下是这四个属性及其效果：

row：默认值，子元素按照水平方向从左到右排列。
row-reverse：子元素按照水平方向从右到左排列。
column：子元素按照垂直方向从上到下排列。
column-reverse：子元素按照垂直方向从下到上排列。