uniapp面试题一键Get！！！

一只小可乐吖

已于 2023-06-29 13:47:20 修改

阅读量2.9k

点赞数 7

文章标签： uni-app 微信小程序小程序

于 2023-06-01 21:11:31 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_40381947/article/details/130995988

版权

UniApp是一个基于Vue.js的跨平台开发框架，支持原生应用、小程序、H5等多平台开发。它提供了云开发服务，简化了后端逻辑，如数据库、存储和云函数。Vuex作为状态管理工具，帮助管理Vue组件间共享状态。此外，文章介绍了uni.request()进行网络请求的方法以及页面生命周期和组件通信机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是UniApp?

UniApp是一个跨平台的开发框架，能够在多个移动平台上使用统一的代码进行开发。它使用Vue.js作为开发语言，并支持原生应用、小程序、H5等多种应用类型。

请简要介绍一下UniApp框架的优势。

UniApp框架的主要优势包括：

省时省力：UniApp使用统一的代码进行开发，不需要为不同的平台编写不同的代码，这可以大大提高开发效率。
跨平台：UniApp框架允许开发人员在多个平台上发布应用，包括原生应用、小程序、H5等多种应用类型。
易于使用：UniApp框架使用Vue.js作为开发语言，而Vue.js是一种非常易于学习和使用的语言。
高效：UniApp框架利用了多个平台的优势和特点，可以快速构建高效的跨平台应用。

什么是pages.json文件？

pages.json文件是UniApp框架中的配置文件，用于配置应用程序的页面和导航栏。它可以定义应用程序的页面路径、所需的导航栏、页面的窗口属性、页面的动画效果等。

请简要介绍一下UniApp中的生命周期函数。

常用的生命周期函数包括：onLoad、onShow、onReady、onHide、onUnload 和 onResize。

onLoad：页面加载时调用，仅在初始化时会触发，类似于 Vue.js 中的 created 生命周期，在该钩子函数内可以进行数据初始化等操作。
onShow：页面展示时调用，类似于 Vue.js 中的 mounted 生命周期，在该钩子函数内可以进行数据更新等操作。
onReady：页面初次渲染完毕时调用，在该钩子函数内可以进行界面操作等操作。
onHide：页面隐藏时调用，例如页面切换时。
onUnload：页面销毁时调用，如组件被销毁时。
onResize: 窗口大小改变时调用。

什么是微信小程序的云开发？

微信小程序的云开发是微信官方推出的一种云服务，它提供了一整套基础设施和开发框架，为小程序开发提供了强大的支持。通过云开发，小程序可以快速构建和部署应用，无需搭建自己的服务器，也不需要关心后端的细节，只需关注业务逻辑和界面实现即可。

云开发提供了以下几个核心功能：

数据库：云开发提供了一个完全托管的、基于JSON格式的NoSQL数据库，支持实时数据同步和查询，并可与云函数结合使用。
存储：云开发提供了一个完全托管的、高可用的文件存储服务，支持图片、音频、视频等多种类型的文件上传、下载和管理。
云函数：云开发提供了基于Node.js的、高度可扩展的云函数，可通过事件触发、HTTP请求等多种方式进行调用，用于实现后端逻辑和业务处理。
云调用：云开发提供了基于云函数的公用HTTP API，可供小程序直接调用，用于实现与第三方系统的对接和数据交换。

在使用云开发开发小程序时，开发者只需使用小程序自带的开发工具，无需下载额外的SDK和工具，即可完成小程序的开发、调试和部署。同时，云开发还提供了丰富的文档和示例代码，使得开发者能够快速上手和使用。

总的来说，微信小程序的云开发是一种轻便、简单、高效的云服务，为小程序开发提供了更多的可能性和灵活性。

请简要介绍一下UniApp中的导航栏组件。

在UniApp中，导航栏组件用于实现页面的顶部导航栏，并提供了一些常用的配置选项。

UniApp中常见的导航栏组件是uni-navigator，它可以在页面中嵌入导航栏，并通过属性进行配置。以下是uni-navigator组件的一些常用属性：

title：指定导航栏标题文字。
color：设置导航栏文字颜色。
background-color：设置导航栏背景颜色。
back-icon：设置返回按钮的图标样式。
home-icon：设置首页按钮的图标样式。
float：设置导航栏是否浮动（悬浮模式），用于实现下拉时导航栏显示或隐藏。

除了uni-navigator组件，UniApp还提供了其他导航相关的组件，如：

uni-NavBar：适用于App端的导航栏组件，提供了更多的定制化和交互功能。
uni-tab-bar：底部导航栏组件，用于实现多个页面之间的切换。
uni-segmented-control：分段器组件，用于实现页面内的切换导航。

通过使用这些导航栏组件，可以在UniApp中轻松地创建和配置导航功能，提升应用程序的用户体验。

什么是Vuex？

Vuex是一个专为Vue.js应用程序开发的状态管理模式和库。它用于集中管理应用程序的所有组件之间共享的数据，并提供了一种可预测性的状态管理方案。

在Vuex中，所有的应用程序级别的状态都被存储在一个单一的、响应式的状态树中，称为"store"。"store"中的状态可以通过getter访问，通过mutation进行同步修改，还可以使用action进行异步操作。

以下是Vuex的一些核心概念：

State（状态）：即应用程序的数据源，存储在store中的状态对象。
Getters（获取器）：类似于Vue组件中的计算属性，用于从state中派生出一些衍生状态，供组件使用。
Mutations（突变）：用于同步地修改state中的状态，是唯一能够修改state的方式。
Actions（动作）：类似于mutations，但可以包含异步操作，通过commit mutations来修改state中的状态。
Modules（模块）：将store分割成模块，每个模块拥有自己的state、getters、mutations和actions，使得大型应用程序的状态管理更加可维护和可扩展。

使用Vuex可以使得多个组件之间共享状态更加方便和可控。它有助于解决组件之间的数据传递问题，提高代码的可读性和可维护性。Vuex广泛应用于大型Vue.js应用程序的状态管理中。

什么是uni.request()？如何使用它？

uni.request()是UniApp中用于发送网络请求的API。它可以发送GET、POST、PUT、DELETE等类型的请求，并支持自定义请求头、请求参数和响应数据格式。

使用uni.request()的基本步骤如下：

在Vue组件中引入uni.request()。
调用uni.request()并传递请求参数。
处理响应数据并返回结果。

例如：

<template>
  <button @click="getData">发送请求</button>
</template>

<script>
import { uni } from 'uni-core'
export default {
  methods: {
    async getData() {
      const res = await uni.request({
        url: 'http://localhost:3000/getData',
        method: 'GET'
      })
      console.log(res);
    }
  }
}
</script>

如何定义全局变量？

在UniApp中定义一个全局变量，可以使用Vue.js的全局属性 $store 或 $uni。以下是两种不同情况下定义全局变量的方法：

1.使用Vue.js的全局属性 $store

UniApp中可以使用Vuex进行状态管理。通过将需要全局共享的数据存放在Vuex的状态中，就可以在任何一个组件中使用$store进行访问。比如：

在main.js中创建一个Vuex的store：

import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

const app = new Vue({
  ...App
})
app.$mount()

在store.js中定义全局变量：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    globalVar: '我是全局变量'
  }
})

export default store

在其他组件中使用$store访问该全局变量：

console.log(this.$store.state.globalVar)

2.使用Vue.js的全局属性 $uni

除了使用Vuex来定义全局变量，UniApp还提供了一个全局对象$uni来保存全局变量：

在main.js中定义全局变量：

import Vue from 'vue'
import App from './App'

Vue.prototype.$uni = {
  globalVar: '我是全局变量'
}

const app = new Vue({
  ...App
})
app.$mount()

在其他组件中使用$uni访问该全局变量：

console.log(this.$uni.globalVar)

需要注意的是，$uni是一个普通的JavaScript对象，使用它定义的全局变量不具备响应式。如果需要在组件中监听该全局变量的变化，建议使用Vuex。

如何监听页面滚动事件？

在 page.json 配置文件中设置页面属性 onPageScroll 指向相应的页面滚动事件处理函数。如下例：

{
  "usingComponents": {},
  "navigationBarTitleText":"标题",
  "enablePullDownRefresh":true,
  "backgroundTextStyle":"light",
  "disableScroll":false,
  "onPageScroll":"onPageScroll",
  "usingComponents": {}
}

在 uniapp 中如何实现本地存储和读取？

可以使用 uni.setStorageSync 和 uni.getStorageSync 方法对本地数据的存储和读取。如下例：

// 存储数据
uni.setStorageSync('name', 'sunshine')
console.log('数据已经存储')

// 获取数据
let name = uni.getStorageSync('name')
console.log('从本地获取到的数据为：' + name)

如何在组件中使用小程序的原生 API？

在页面所用到的组件中通过 this.$mp.page 获得当前页面的所有参数，包括 options 和 selectComponent 等方法。直接调用即可。

注意：由于全局 mixin 的匹配规则，在开发过程中最好把 Vue 与事件名称区分开来，避免命名冲突。

在 uniapp 中如何渲染一个带有 HTML 标签的字符串？

使用 v-html 指令可以渲染带有 HTML 标签的字符串，例如：

<!-- 页面模板 -->
<template>
    <!-- 渲染带有HTML标签的字符串 -->
    <view v-html="htmlContent"></view>
</template>

<script>
    export default {
        data(){
            return{
                htmlContent: '<p>这是一个带有HTML标签的字符串</p>'
            }
        }
    }
</script>

如何防止快速点击？

在需要防止按钮重复提交的组件上添加 :disabled 和 @click.stop.prevent 操作符即可。如下例：

<!-- 模板代码 -->
<template>
    <button @click.stop.prevent="submitForm" :disabled="submitting">提交</button>
</template>

<script>
    export default{
        data(){
            return{
                submitting: false // 提交状态
            }
        },
        methods:{
            submitForm() {
                if (this.submitting) return
                this.submitting = true
                setTimeout(() => {
                    this.submitting = false
                }, 3000)
            
            }
        }
    }
</script>

uniapp 中的 watch 和 computed 有什么区别？

watch 和 computed 都是 Vue.js 的核心功能，在 uniapp 中同样适用。它们的主要区别如下：

computed 是一个计算属性，主要用于处理模板中需要计算的数据，其返回结果会被缓存起来，只有当依赖的响应式数据发生改变时才会重新计算；而 watch 监听的是一个具体的值，当该值发生改变时就执行一段特定的代码。
computed 计算属性必须返回一个值，而 watch 不需要；
computed 可以依赖其他 computed。当计算的属性被更新时，它所依赖的所有 computed 都会重新调用一次；watch 不支持这种语法。

uniapp 中如何实现 DOM 操作？

可以使用 Vue.js 的 ref 属性来获取组件或元素节点的引用，然后通过操作引用来实现 DOM 操作。如下例：

<!-- 页面模板 -->
<template>
    <div ref="myDiv">操作 DOM</div>
</template>

<script>
    export default {
        mounted () {
            // 获取引用
            const { myDiv } = this.$refs
    
            // 操作 DOM
            myDiv.style.color = 'red'
            myDiv.textContent = 'DOM 已被修改'
        }
    }
</script>

uniapp 中的路由是怎样实现的？请介绍基本用法。

Uniapp 中的路由是由框架自带的 Vue Router 实现的。基本用法如下：

在 pages.json 文件中配置页面路径和需要加载的页面组件。
在页面组件中使用 <template>、<script> 和 <style> 标签，其中 <template> 标签中是页面的内容，<script> 标签中定义页面组件的相关属性，<style> 标签中定义页面的样式。
使用 uni.navigateTo() 或 uni.redirectTo() 方法进行页面跳转。

uni.navigateTo() 方法用于从当前页面跳转到新页面，并向新页面传递数据，即保留当前页面，跳转到新页面。新页面可以通过 uni.getOpenerEventChannel() 获取当前页面的 EventChannel 对象，以便进行数据传递。
uni.redirectTo() 方法用于关闭当前页面，跳转到新页面，即不保留当前页面。

在页面组件中使用 this.$route.params 获取上一个页面传递的参数，并使用 this.$route.query 获取页面跳转时传递的参数。
使用 uni.navigateBack() 方法返回上一个页面，可以通过 delta 参数设置返回的层数。

除了基本用法，还可以通过路由守卫实现一些高级用法，例如页面访问权限控制、页面访问记录等。

uniapp 中如何实现页面跳转？

在 uniapp 中，页面跳转可以使用 uni.navigateTo()、uni.redirectTo()、uni.reLaunch()、uni.switchTab() 四个方法来实现。

如何进行数据绑定？

在Uniapp中进行数据绑定可以使用双向数据绑定和v-bind指令。其中，双向数据绑定可以使用v-model指令，v-bind指令可以绑定数据到标签属性上。

uniapp 中如何实现组件之间的通信？

在 uniapp 中，组件之间的通信可以使用 eventBus、$emit、$on、$parent、$children 等方式来实现。

uniapp 中如何实现存储和读取数据？

在 uniapp 中，存储和读取数据可以使用 uni.setStorage()、uni.getStorage()、uni.removeStorage() 三个方法来实现。也可以使用 uni.setStorageSync()、uni.getStorageSync()、uni.removeStorageSync() 三个同步方法来实现。

uniapp 中如何实现网络请求？

在 uniapp 中，可以使用 uni.request() 方法来实现网络请求。也可以使用 uni.uploadFile() 方法实现上传文件，使用 uni.downloadFile() 方法实现下载文件。

uniapp与Vue.js的区别？

虽然Uniapp是使用Vue.js框架构建的，但它与Vue.js在一些方面有所不同。Uniapp支持构建跨平台应用，而Vue.js主要用于构建Web应用程序。Uniapp还提供了一套专门为移动设备设计的组件库，以及与原生API的集成，这使得开发人员可以更轻松地创建高性能的移动应用程序。

uni-app支持哪些小程序平台？

目前，uni-app支持多个小程序平台，包括微信小程序、支付宝小程序和百度小程序等。Uniapp还支持将应用程序构建为原生iOS和Android应用程序，以及Web应用程序。

什么是生命周期钩子？

uni-app生命周期钩子是指在uni-app应用中，页面或组件创建、更新、销毁等整个生命周期中的方法，在特定时刻会自动触发执行。

以下是uni-app的生命周期钩子：

应用生命周期钩子：
- onLaunch：应用启动时触发，全局只触发一次
- onShow：应用从后台切换到前台时触发
- onHide：应用从前台进入后台时触发
- onError：应用发生错误时触发
- onUniNViewMessage：接收来自Native层的消息
页面生命周期钩子：
- onLoad：页面加载时触发，只触发一次
- onShow：页面显示时触发，在onLoad后触发
- onReady：页面初次渲染完成时触发，在onShow后触发
- onHide：页面隐藏时触发
- onUnload：页面卸载时触发
组件生命周期钩子：
- created：组件实例刚刚被创建时触发
- attached：组件被附加到页面节点时触发
- ready：组件布局完成后触发，此时可以获取节点信息
- detached：组件被从页面节点中移除时触发

这些生命周期钩子可以使用来处理页面或组件的初始化、数据加载、UI渲染、事件处理、资源释放等操作。

什么是条件编译？

Uni-app的条件编译是指根据不同的编译条件，来选择不同的代码模块进行编译。Uni-app提供了两种条件编译的方式：

1.根据平台条件编译

在uni-app的项目中，可以通过预定义的平台条件来进行平台条件编译。例如：

// #ifdef APP-PLUS
console.log('在 APP 端运行')
// #endif

// #ifdef H5
console.log('在 H5 端运行')
// #endif

在运行时，根据编译环境的不同，只有符合条件的代码会被编译和执行。

除了上面的示例中提到的 APP-PLUS 和 H5 条件，uni-app还支持其他的平台条件，如：

MP-WEIXIN：微信小程序平台
MP-ALIPAY：支付宝小程序平台
MP-BAIDU：百度小程序平台
MP-TOUTIAO：头条小程序平台
MP-QQ：QQ小程序平台
MP-360：360小程序平台

2.根据变量条件编译

除了根据平台条件编译外，还可以根据变量条件来进行条件编译。例如：

// #ifdef ISDEV
console.log('这是开发环境')
// #endif

// #ifndef ISDEV
console.log('这是生产环境')
// #endif

在编译过程中，可以通过设置对应的变量，来决定哪些代码需要编译和执行。

总的来说，通过条件编译，我们可以轻松地控制代码的编译和执行，同时也可以方便地进行不同平台的适配。

如何处理Uniapp中的异步请求？

在Uniapp中，可以使用uni.request()函数来发起异步请求。这个函数返回一个Promise，因此可以使用async/await语法来处理异步请求。开发人员还可以使用uni.showLoading()和uni.hideLoading()来显示和隐藏加载指示器。

如何优化Uniapp应用程序的性能？

优化Uniapp应用程序的性能可以采取多种措施，例如减少外部依赖项、使用组件化和懒加载技术、避免页面渲染阻塞、使用图片压缩和缓存等。开发人员还可以使用Uniapp提供的性能分析工具来识别和解决应用程序的性能问题。

如何在Uniapp中使用vue-router？

在Uniapp中，可以使用vue-router来管理应用程序的路由。可以使用uni-app-plus插件安装vue-router，并使用Vue.js组件定义应用程序的路由表。可以使用页面跳转和路由导航等功能来实现应用程序的导航。