面试专区|【39道UniApp高频题整理(附答案背诵版)】

最新推荐文章于 2024-07-09 21:53:15 发布

尺小闹

最新推荐文章于 2024-07-09 21:53:15 发布

阅读量1.2k

点赞数 32

分类专栏：面试专区文章标签：面试 uni-app 职场和发展

本文链接：https://blog.csdn.net/qq_40522090/article/details/139922669

版权

面试专区专栏收录该内容

81 篇文章 3 订阅

订阅专栏

1.简述什么是uniApp？

uniApp是一个使用Vue.js开发所有前端应用的框架，它允许开发者用一套代码同时发布到iOS、Android、Web（包括PC和移动端浏览器）、以及各种小程序（微信、支付宝、百度、字节跳动、QQ等）和快应用等多个平台。简而言之，uniApp的宗旨是“一次开发，多处运行”。

使用uniApp，开发者可以享受到Vue.js的开发体验，包括组件化开发、Vue插件支持、Vuex状态管理等，同时还能通过uniApp提供的丰富API和组件，轻松实现跨平台应用的开发。例如，如果你想获取用户的地理位置信息，只需调用uniApp的uni.getLocation API，而不必针对每个平台写不同的代码。

举个例子，假设你正在开发一个天气应用，你希望这个应用能够在Web浏览器中运行，也能打包成iOS和Android应用，甚至发布到微信小程序上。使用uniApp，你只需要开发一套代码，然后通过uniApp的构建发布系统，就能将应用部署到上述所有平台，极大地提高了开发效率和应用的可达性。

2.简述uniApp相对于其他跨平台框架的优点是什么？

uni-app 相对于其他跨平台框架，如React Native、Flutter等，具有以下几个显著优点：

一套代码，多平台部署：uni-app 最大的优点是支持“一次开发，多处运行”，包括iOS、Android、Web（PC和移动）、以及各种小程序（微信、支付宝、百度、字节跳动、QQ等）和快应用等。这比大多数跨平台框架覆盖的平台更全面，尤其是在支持小程序这一点上，为开发者节省了大量的开发和维护成本。
基于Vue.js：uni-app 基于Vue.js开发，继承了Vue.js的所有优点，如易学习、组件化开发、响应式编程等。对于已经熟悉Vue.js的开发者来说，学习成本极低。
丰富的组件和API：uni-app 提供了丰富的内置组件和API，这些组件和API已经做好了跨平台的适配工作，开发者可以轻松调用，快速实现跨平台应用的开发。
性能和体验：虽然uni-app主要采用Web技术栈，但它通过编译为原生代码或使用小程序的运行环境，使得最终的应用性能接近原生应用，用户体验良好。
灵活的打包和发布：uni-app支持多种打包方式，包括本地打包和云端打包，给开发者提供了灵活的选择。尤其是云端打包，可以简化开发者的打包流程，特别是对于跨平台应用的发布。
社区和生态：由于基于Vue.js，uni-app享有Vue.js强大的社区支持，同时uni-app自身也拥有活跃的社区和生态系统，大量的第三方插件、工具和教程可以帮助开发者解决开发过程中的问题。

与其他框架相比，uni-app 在跨平台覆盖度、开发效率、学习成本和社区生态等方面具有一定的优势。但具体选择哪个框架还需根据项目需求、团队技能和项目预算等因素综合考虑。

3.简述uniApp适用于哪些场景？

uni-app 由于其跨平台的特性和高效的开发模式，适用于多种应用场景，特别是以下几种：

多平台应用开发：对于需要同时在iOS、Android、Web、以及各种小程序平台发布的应用，uni-app 可以大大减少开发和维护成本，因为开发者只需要编写一次代码，就可以部署到上述所有平台。
快速原型开发：uni-app 基于Vue.js，使得它非常适合快速开发和迭代，特别是当需要快速验证应用概念或者进行原型设计时，uni-app 可以大幅度缩短开发周期。
中小型企业项目：对于资源有限的中小型企业来说，uni-app 提供了一个成本效益高的解决方案，可以用较少的人力和时间投入开发出覆盖多个平台的应用。
内容发布和电商平台：对于需要在多个渠道（如移动APP、Web站点、微信小程序等）发布内容或销售产品的应用，uni-app 能够提供统一的开发和管理方式，提高运营效率。
教育和培训应用：教育和培训类应用往往需要同时覆盖移动端和桌面端，以适应不同的学习场景。uni-app 能够帮助开发者轻松实现这一需求。
企业内部管理应用：对于企业内部的管理应用，如OA、CRM、ERP等，uni-app 可以快速开发出覆盖PC和移动端的解决方案，提升企业管理的效率和便捷性。
社区和论坛类应用：社区和论坛类应用通常需要在多个平台上获得用户，uni-app 可以帮助这类应用实现跨平台的快速开发和部署。

总之，uni-app 适用于需要跨平台部署、追求开发效率和成本控制的各种应用场景。其灵活性和高效性使得它成为开发多平台应用的理想选择。

4.解释uniApp有哪些限制？

尽管uni-app作为一个跨平台开发框架提供了许多优势，如一次开发多平台部署、高效的开发流程等，但它也存在一些限制，这些限制主要包括：

性能问题：虽然uni-app在性能优化方面做了很多工作，特别是通过编译为原生代码的方式尽量减少性能损失，但是对于一些性能要求极高的应用来说，如复杂的游戏或者大量数据处理的应用，它的性能可能仍然无法与完全用原生代码开发的应用相匹配。
平台特定功能的限制：uni-app虽然支持多平台部署，但某些平台的特定功能可能难以实现或者需要额外的工作来适配。例如，如果一个平台推出了新的API或功能，uni-app可能需要一段时间来支持这些新特性。
插件和第三方库的依赖：虽然uni-app有丰富的内置API和组件，但在某些情况下，开发者可能需要依赖第三方库或插件来实现特定的功能。这可能导致依赖管理变得复杂，特别是当这些第三方库或插件不支持uni-app或者需要特定的适配时。
学习曲线：对于没有Vue.js或前端开发经验的开发者来说，虽然uni-app本身相对容易上手，但要充分利用其提供的功能和优化可能需要一定的学习和实践。
调试和测试的挑战：跨平台开发意味着应用需要在多种设备和操作系统上运行良好，这可能增加调试和测试的难度。虽然uni-app提供了一些工具来帮助这方面的工作，但在某些复杂场景下，确保应用在所有平台上表现一致可能仍然是一个挑战。
UI一致性和适配问题：在不同平台上保持UI的一致性和良好的用户体验是跨平台开发的另一个挑战。尽管uni-app提供了丰富的组件和布局选项来帮助开发者解决这个问题，但在某些情况下，特别是涉及到复杂布局和动画效果时，开发者可能需要进行额外的调整和优化。

尽管存在这些限制，uni-app仍然是一个强大且灵活的跨平台开发框架，适用于多种类型的应用开发。选择使用uni-app或其他框架时，建议根据项目的具体需求、团队的技术栈以及预期的用户体验来做出决定。

5.简述uniApp并不支持某些平台上的高级特性 ?

uni-app 作为一个高效的跨平台开发框架，旨在帮助开发者通过一套代码实现多平台应用部署。然而，由于它需要适配多种平台，这有时会导致它无法完全支持某些平台上的高级特性或最新API。这些限制的原因主要包括：

平台特有的API：每个平台（如iOS、Android、微信小程序等）都有一些特有的API和功能，这些功能可能是其他平台所不具备的，或者实现方式完全不同。尽管uni-app提供了大量通用的API和组件来尽可能覆盖跨平台的需求，但对于一些特定平台的高级特性或最新API，uni-app可能无法立即提供支持。
更新和适配的延迟：当一个平台推出新的特性或API时，uni-app需要时间来适配和更新其框架以支持这些新特性。这意味着，即使uni-app意图支持广泛的平台特性，开发者可能需要等待uni-app官方的更新才能使用这些新特性。
性能优化：对于一些特定平台的性能优化措施，如GPU加速、内存管理优化等，uni-app可能无法完全利用平台特有的优化技术。这是因为uni-app的跨平台特性要求其维持一定的通用性和兼容性，可能无法深入到每个平台的底层实现进行优化。
用户界面和体验差异：虽然uni-app可以帮助开发者实现跨平台的UI布局和设计，但某些平台的设计指南和用户体验标准可能有所不同，要完全遵循每个平台的高级UI设计和交互标准，需要额外的努力和定制化开发。
硬件访问和特定功能：虽然uni-app提供了对摄像头、GPS、加速度计等硬件的访问能力，但对于一些特定平台的高级硬件功能，如ARKit或Android的特定传感器功能，uni-app可能无法提供直接支持，需要通过原生模块或插件来实现。

对于需要使用特定平台高级特性的应用开发项目，开发者可能需要考虑使用uni-app的原生插件系统或者条件编译功能来实现这些特性，或者在必要时结合使用uni-app和原生开发技术。

6.简述uniApp怎么实现多端开发的？

uni-app 实现多端开发主要依靠以下几个核心机制和技术：

基于Vue.js：uni-app 基于Vue.js，一个流行的前端开发框架，允许开发者使用Vue.js的语法和特性（如响应式数据绑定、组件化开发等）来编写应用。这样不仅提高了开发效率，也使得代码更易维护和复用。
编译到多平台：uni-app 提供了一个强大的编译器，能够将开发者写的单一源代码编译成适用于不同平台的代码和文件结构。例如，它可以编译成为iOS和Android平台的原生应用代码、Web应用的HTML/CSS/JavaScript代码、以及各个小程序平台特定的项目结构和代码。
条件编译：uni-app 支持条件编译，允许开发者在同一份代码中使用特定的条件编译语句来区分不同平台的代码。这意味着开发者可以在需要的情况下为特定平台编写特殊的逻辑或样式，而不影响其他平台的代码。
统一的API和组件：uni-app 提供了一套统一的API和UI组件，这些API和组件在不同平台上表现一致，抹平了平台差异。这样开发者就可以使用同样的API调用和组件来实现跨平台功能，无需为每个平台编写不同的代码。
插件市场和原生支持：对于需要访问特定平台特有功能的场景，uni-app 通过其插件市场提供了大量第三方插件，这些插件可以帮助访问原生功能或实现特定的业务需求。此外，开发者还可以自己编写原生代码或使用原生模块来扩展应用的功能，以满足特定平台的需求。
DCloud平台支持：uni-app 是由DCloud提供的，因此它得到了DCloud云服务的支持，包括但不限于云函数、数据库、文件存储等。这些服务为多端应用提供了强大的后端支持，简化了开发流程。

通过这些机制和技术，uni-app 能够使开发者用一套代码开发出可以运行在iOS、Android、Web、以及各种小程序平台上的应用，大大提高了开发效率和应用的可达性。

7.简述uniApp如何本地存储数据？

在uni-app中，本地存储数据可以通过几种方式实现，主要包括使用小程序的存储API、Web标准的LocalStorage、以及uni-app自身提供的API。这些方法允许数据在本地持久化存储，即使应用关闭后数据也不会丢失。以下是几种常用的本地数据存储方法：

1. 使用uni-app的API

uni-app提供了一套简单的API来实现本地存储，主要是uni.setStorage（或uni.setStorageSync）和uni.getStorage（或uni.getStorageSync）方法。这些方法封装了底层平台的差异，提供了一致的操作方式。

存储数据：

uni.setStorage({
  key: 'yourKey',
  data: 'yourData',
  success: function () {
    console.log('数据保存成功');
  }
});

或者使用同步方法：

uni.setStorageSync('yourKey', 'yourData');

读取数据：

uni.getStorage({
  key: 'yourKey',
  success: function (res) {
    console.log(res.data);
  }
});

或者使用同步方法：

var data = uni.getStorageSync('yourKey');
console.log(data);

2. LocalStorage（仅限Web平台）

如果你的uni-app应用需要在Web平台上运行，可以使用标准的Web技术LocalStorage进行数据存储。LocalStorage提供了一个简单的键值对存储机制。

// 存储数据
localStorage.setItem('yourKey', 'yourData');

// 读取数据
var data = localStorage.getItem('yourKey');
console.log(data);

3. IndexedDB（仅限Web平台）

对于需要存储大量数据或者结构化数据的Web应用，可以使用IndexedDB。这是一种更复杂但功能更强大的客户端存储解决方案。

4. 使用第三方库

除了上述方法外，还可以在uni-app中使用第三方JavaScript库来实现更复杂的数据存储需求，比如使用localForage库来封装IndexedDB、WebSQL和LocalStorage的API，提供更一致和方便的操作接口。

注意事项

在使用本地存储时，需要注意数据大小限制。不同平台对本地存储的大小限制不同，例如微信小程序的本地存储限制是10MB。因此，对于大量数据的存储，建议考虑使用uni-app的云服务或者自建后端服务来处理。

8.uniApp的生命周期描述？

uni-app的生命周期可以从两个层面来理解：应用级生命周期和页面级生命周期。应用级生命周期涉及到整个应用的启动、运行和终止过程，而页面级生命周期则关注于页面的加载、显示、隐藏和卸载等事件。

应用级生命周期

应用级生命周期主要包括以下几个阶段：

onLaunch：当uni-app应用初始化完成时触发，这是第一个触发的生命周期钩子，常用于应用全局数据初始化、检查登录状态、进行全局配置等。
onShow：当uni-app应用启动，或从后台进入前台显示时触发，可以处理应用被重新激活时的逻辑。
onHide：当uni-app应用从前台进入后台时触发，可以处理应用进入后台时的保存数据或停止定时器等逻辑。
onError：当uni-app应用发生脚本错误或者API调用失败时触发，可以用来捕获全局的异常信息。
onPageNotFound：当uni-app应用要打开的页面不存在时触发，可以用于自定义页面不存在的提示或跳转到应用首页等。

页面级生命周期

页面级生命周期主要关注页面的加载、显示、隐藏、卸载等事件，包括：

onLoad：当页面加载时触发，一个页面只会调用一次，可以在这个函数中获取打开当前页面所调用的query参数。
onShow：当页面显示/进入前台时触发，每次打开页面都会调用。
onReady：当页面初次渲染完成时触发，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层交互。
onHide：当页面隐藏/进入后台时触发，如navigateTo或底部tab切换时。
onUnload：当页面卸载时触发，如redirectTo或navigateBack到其他页面时。
onPullDownRefresh：监听用户下拉刷新事件。需要在页面的json配置文件中开启enablePullDownRefresh。
onReachBottom：页面上拉触底事件的处理函数，可以在页面的json配置文件中通过onReachBottomDistance设置触底距离。
onShareAppMessage：用户点击右上角分享时执行。

这些生命周期函数为开发者提供了丰富的时机来处理业务逻辑，如数据加载、页面渲染、资源释放等。正确地使用这些生命周期函数对于开发高性能、用户体验良好的应用至关重要。

9.简述uniapp的配置文件、入口文件、主组件、页面管理？

uni-app 的项目结构主要包括配置文件、入口文件、主组件和页面管理等关键部分，每一部分都扮演着重要的角色，下面简要描述它们的作用和功能：

配置文件

在 uni-app 中，配置文件分为全局配置文件和页面配置文件两种。

全局配置文件（manifest.json）：这个文件用于对整个应用进行全局配置，包括应用名称、版本、描述、权限设置、平台特定配置等。它是uni-app项目的核心配置文件，也是打包发布时必须的文件之一。
页面配置文件（pages.json）：这个文件用于定义应用中的页面路径、窗口表现、导航条样式等。开发者可以在这里配置页面路由、TabBar、网络超时时间等信息。每个页面还可以有自己的.json配置文件来覆盖pages.json中的相应设置。

入口文件

main.js：这是uni-app项目的入口文件。在这个文件中，开发者可以进行Vue实例的初始化，引入全局组件、插件等。它是连接配置文件和页面文件的桥梁，负责实例化Vue并使用App组件。

主组件

App.vue：这是uni-app的根组件，所有页面都是在这个组件下进行切换的。它相当于整个应用的主页面，可以在这里进行全局样式的设置、全局数据的声明等。

页面管理

在 uni-app 中，页面通过Vue组件来创建，每个页面对应一个.vue文件。页面的管理主要依赖于pages.json配置文件中的定义，开发者在这个文件中列出所有的页面路径，uni-app会根据这些配置自动处理页面的加载、初始化和渲染。

页面文件：位于项目的pages目录下，每个页面都是一个单文件组件（.vue），包含了该页面的模板、脚本和样式。页面之间可以通过uni-app提供的导航API进行跳转。

通过这样的结构组织，uni-app能够清晰地管理应用的配置、入口、页面和组件，使得开发者可以高效地开发和维护多平台应用。

10.简述uniAPP 中常见的组件？

uni-app 提供了丰富的内置组件，帮助开发者快速构建跨平台应用。这些组件覆盖了从基础界面元素到复杂功能的实现，下面是一些在 uni-app 中常见的组件：

基础组件

View：容器组件，相当于HTML中的div标签，用于布局。
Text：文本组件，显示文本内容，类似于HTML中的span。
Button：按钮组件，用于接收用户点击事件，可以配置样式和行为。
Image：图片组件，用于展示图片，支持网络图片、本地资源等。
ScrollView：滚动视图组件，用于创建一个可滚动的容器。

表单组件

Input：输入框组件，允许用户输入文本。
Textarea：多行文本输入框，适用于输入更多的文本信息。
Switch：开关选择器，用户可以切换开关状态。
Picker：选择器组件，支持多种选择器，如日期选择器、时间选择器、省市区选择器等。

导航组件

Navigator：页面链接组件，用于页面的跳转。

布局组件

List：列表组件，用于展示列表数据，支持下拉刷新和上拉加载。
Swiper：滑块视图容器，用于创建轮播图效果。

媒体组件

Video：视频组件，用于播放视频内容。
Audio：音频播放组件，用于播放音频内容。

地图组件

Map：地图组件，展示地图，并进行地图相关操作。

这些组件通过标准化的API接口，使得在不同平台上能够保持一致的行为和外观，极大地简化了跨平台应用的开发工作。除了这些基础组件外，uni-app 还提供了丰富的扩展组件和第三方插件，可以通过uni-app的插件市场查找和使用，以满足更多的开发需求。

11.列举uniAPP 中常用的指令语句？

uni-app 基于 Vue.js 开发，因此它继承了 Vue.js 的指令系统。这些指令在 uni-app 开发中非常有用，可以用来进行数据绑定、事件处理等任务。以下是在 uni-app 中常用的一些指令语句：

v-bind

用于绑定属性到表达式，简写为 :。例如，动态绑定图片的 src：

<img v-bind:src="imageSrc" />
<!-- 或简写为 -->
<img :src="imageSrc" />

v-model

用于在表单控件或者组件上创建双向数据绑定。例如，绑定输入框的值：

<input v-model="inputValue" />

v-for

用于基于源数据多次渲染元素或模板块。例如，遍历数组创建列表：

<ul>
  <li v-for="(item, index) in list" :key="index">{{ item }}</li>
</ul>

v-if、v-else-if、v-else

用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值时被渲染：

<div v-if="type === 'A'">Type A</div>
<div v-else-if="type === 'B'">Type B</div>
<div v-else>Type C</div>

v-show

另一种条件渲染指令，根据表达式之真假值，切换元素的 display CSS 属性：

<div v-show="isVisible">Hello!</div>

v-on

用于监听 DOM 事件，并在触发时执行一些 JavaScript 代码，简写为 @。例如，监听点击事件：

<button v-on:click="handleClick">Click me</button>
<!-- 或简写为 -->
<button @click="handleClick">Click me</button>

v-slot

用于提供具名插槽或默认插槽的内容，是 2.6.0+ 新增的指令，替代了 slot 和 slot-scope：

<template v-slot:header>
  <h1>Here might be a page title</h1>
</template>

这些指令提供了强大的模板编写能力，使得开发者可以更加灵活和高效地开发 uni-app 应用。

12.uniApp全局变量怎么定义,怎么获取？

在 uni-app 中定义和获取全局变量的方式主要有以下几种：

1. Vue原型上定义

可以在 main.js 文件中，通过 Vue 的原型链定义全局变量，这样在任何组件中都可以通过 this 访问到这些全局变量。

// main.js
Vue.prototype.$globalVar = '这是一个全局变量';

// 在组件中获取
export default {
  mounted() {
    console.log(this.$globalVar); // 输出：这是一个全局变量
  }
}

2. 使用Vuex状态管理

对于复杂的应用，推荐使用 Vuex 来管理全局状态。首先需要安装 Vuex 并在项目中进行配置。

// 安装Vuex
npm install vuex --save

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    globalVar: '这是一个全局状态'
  },
  mutations: {
    setGlobalVar(state, value) {
      state.globalVar = value;
    }
  }
})

export default store

// main.js 中引入 store
import Vue from 'vue'
import App from './App'
import store from './store'

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

在任何组件中，通过 this.$store.state.globalVar 访问全局变量，通过 this.$store.commit('setGlobalVar', newValue) 来修改全局变量。

3. 全局配置文件

对于一些不会改变的全局变量，如API的域名，可以在 manifest.json 或 env.js 等配置文件中定义，然后在代码中导入使用。

// env.js
const env = {
  API_URL: 'https://api.example.com'
}

export default env

// 在组件中使用
import env from '@/path/to/env.js'

console.log(env.API_URL);

4. getApp() 方法

uni-app 也支持使用 getApp() 方法获取全局的 App 实例，并在其上定义全局变量。

// 在 main.js 或任何位置设置
const app = getApp();
app.globalData = { globalVar: '这是一个全局变量' };

// 在任何组件中获取
const app = getApp();
console.log(app.globalData.globalVar);

这些方法提供了不同场景下定义和访问全局变量的方案，开发者可以根据具体需求选择合适的方式。

13.简述uniApp 中的跳转方式？

在 uni-app 中，页面跳转主要通过编程式导航和声明式导航两种方式实现，配合 uni-app 提供的 API 可以轻松完成不同场景下的页面跳转需求。

编程式导航

编程式导航是通过调用 uni-app 提供的 API 在 JavaScript 代码中实现页面跳转，主要方法包括：

uni.navigateTo({ url })：保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack() 可以返回到原页面。
uni.redirectTo({ url })：关闭当前页面，跳转到应用内的某个页面。
uni.reLaunch({ url })：关闭所有页面，打开到应用内的某个页面。
uni.switchTab({ url })：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
uni.navigateBack({ delta })：关闭当前页面，返回上一页面或多级页面。

声明式导航

声明式导航是在模板中使用特定的组件来实现页面跳转，主要通过 <navigator> 组件实现：

<navigator url="/pages/targetPage/targetPage" open-type="navigateTo">跳转到目标页面</navigator>

<navigator> 组件的 open-type 属性决定了跳转的类型，常见的值有：

navigateTo：保留当前页面，跳转到应用内的某个页面。
redirectTo：关闭当前页面，跳转到应用内的某个页面。
reLaunch：关闭所有页面，打开到应用内的某个页面。
switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。
navigateBack：关闭当前页面，返回上一页面或多级页面。

小程序特有的跳转方式

在 uni-app 开发小程序时，还可以使用小程序特有的跳转方式，如使用 wx.navigateToMiniProgram API 跳转到其他小程序。

注意事项

在使用跳转功能时，需要注意跳转路径的正确性，尤其是路径的写法应符合 uni-app 的页面路径规则，通常是从项目根目录开始的绝对路径。同时，开发者需要熟悉不同跳转方式的应用场景和限制，以便在实际开发中选择最合适的跳转方式。

14.简述uniApp项目页面之间传值？

在 uni-app 中，页面之间的传值主要依赖于路由跳转时的参数传递、全局状态管理以及本地存储等机制。以下是几种常见的页面传值方法：

1. 路由传参

当使用路由跳转（如uni.navigateTo）时，可以通过URL传递参数。

发送方：

// 使用 navigateTo 跳转并传递参数
uni.navigateTo({
  url: '/pages/targetPage/targetPage?param1=value1&param2=value2'
});

接收方：

在目标页面的 onLoad 方法中，可以通过 options 参数接收到传递的参数。

export default {
  onLoad(options) {
    console.log(options.param1); // value1
    console.log(options.param2); // value2
  }
}

2. 全局状态管理（Vuex）

对于复杂的应用，可以使用 Vuex 来管理需要跨页面共享的状态。通过在全局状态树中存储数据，各个页面通过修改状态或读取状态来实现数据共享和传递。

定义全局状态：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    sharedData: 'initial value'
  },
  mutations: {
    updateSharedData(state, newValue) {
      state.sharedData = newValue;
    }
  }
});

export default store;

修改和读取状态：

// 修改状态
this.$store.commit('updateSharedData', 'new value');

// 读取状态
console.log(this.$store.state.sharedData);

3. 本地存储（LocalStorage/uni.setStorage）

对于需要持久化存储的数据或较大数据量的传递，可以使用本地存储的方式。这包括 Web 的 LocalStorage 或 uni-app 提供的 uni.setStorage API。

设置数据：

uni.setStorage({
  key: 'someKey',
  data: 'some value',
  success: function () {
    console.log('数据保存成功');
  }
});

获取数据：

uni.getStorage({
  key: 'someKey',
  success: function (res) {
    console.log(res.data); // 'some value'
  }
});

4. 事件总线（Event Bus）

对于非父子组件间的复杂通信，可以使用事件总线（Event Bus）来传递数据。通过创建一个全局的 Vue 实例作为中央事件总线，可以在任何组件中触发事件和监听事件。

创建事件总线：

// event-bus.js
import Vue from 'vue';
export const EventBus = new Vue();

发送数据：

import { EventBus } from './event-bus.js';
EventBus.$emit('eventName', data);

接收数据：

import { EventBus } from './event-bus.js';
EventBus.$on('eventName', data => {
  console.log(data);
});

通过上述方法，可以根据不同的场景和需求，在 uni-app 项目的页面之间进行有效的数据传递和共享。

15.简述Uniapp 中组件的创建以及使用和传参方式？

在 uni-app 中，组件是复用和组织 Vue 应用的基本单位。创建、使用和传参给组件的过程遵循 Vue.js 的标准模式，但同时也融入了 uni-app 的特色。下面是关于如何在 uni-app 中创建组件、使用组件以及组件间的传参方式的简述。

创建组件

定义组件：在 components 目录下创建一个新的 Vue 文件，如 MyComponent.vue，并定义你的组件：

<!-- MyComponent.vue -->
<template>
  <view>
    <text>我是一个组件</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 组件的数据
    };
  },
  methods: {
    // 组件的方法
  }
};
</script>

<style scoped>
/* 组件的样式 */
</style>

使用组件

导入组件：在使用组件的页面或其他组件中，首先需要导入你创建的组件：
```
// 引入 MyComponent 组件
import MyComponent from '@/components/MyComponent.vue';
```
注册组件：然后，需要在导入组件的页面或父组件中注册这个组件：
```
export default {
  components: {
    MyComponent
  }
};
```

在模板中使用：注册完成后，就可以在模板中使用这个组件了：

<template>
  <view>
    <my-component></my-component>
  </view>
</template>

组件传参

在 uni-app 中，组件间的传参主要通过 props 实现。

定义 props：在子组件中，定义需要接收的 props：

export default {
  props: {
    msg: String // 定义一个名为 msg 的 prop
  }
};

父组件传递参数：在父组件中，通过绑定属性的方式向子组件传递参数：
```
<my-component :msg="message"></my-component>
```
这里 message 是父组件中的数据，它的值将被传递给子组件的 msg prop。

监听子组件事件

组件间的通信不仅限于父组件向子组件传递数据，子组件也可以向父组件发送消息。

子组件触发事件：子组件可以使用 $emit 方法触发一个事件，并传递数据给父组件：
```
this.$emit('customEvent', someData);
```
父组件监听事件：父组件通过在子组件标签上使用 v-on（或简写为 @）来监听这个事件：
```
<my-component @customEvent="handleCustomEvent"></my-component>
```
当子组件触发 customEvent 事件时，父组件的 handleCustomEvent 方法会被调用，并接收到从子组件传递过来的数据。

通过上述步骤，你可以在 uni-app 中灵活地创建、使用组件，并实现组件间的数据传递和通信。

由于内容太多，更多内容以链接形势给大家，点击进去就是答案了

16. 简述UniApp中如何发送HTTP请求？

17. 简述如何使用UniApp中的组件？

18. 简述uniApp中获取DOM元素方法？

19. 简述uniApp form表单的过程？

20. 简述uniApp中刷新页面的实现？

21. 简述uniAppim是什么？

22. 简述uniAPP 打包 iOS 的基础的方法流程？

23. 简述uniAPP 弹框的组件？

24. 简述uniApp异步数据流解决方案：uniapppromise ？

25. uni中如何为不同的平台设置不同的代码？

26. uniApp跨域问题怎么解决？

27. 简述uniApp 的配置文件部分？

28. 简述uni-app 的编译器是如何特定编译的？

29. uniApp 在非h5端上运行为什么要在架构上分为逻辑层和视图层？

30. 简述uniApp的手机端用户体验如何？

31. uniApp 开发体验如何？支持现代前端开发流程吗？

32. 简述uni-app调试怎么做？

33. 简述uni-app用什么ui库？

34. uni-app 生态开放性如何？能否直接利用现有前端社区资源？

35. uni-app 支持的手机版本最低到多少？

36. 小程序的导航栏等UI相对单一，平台接口也较少，App端能自由定制这些UI吗？

37. 已有小程序项目，如何迁移到uni-app？

38. App打包必须上传DCloud云端吗？代码会泄露吗？

39. uniapp是不是基于vue研发？

尺小闹

关注

32
点赞
踩
27

收藏

觉得还不错? 一键收藏
0
评论
面试专区|【39道UniApp高频题整理(附答案背诵版)】

uniApp是一个使用Vue.js开发所有前端应用的框架，它允许开发者用一套代码同时发布到iOS、Android、Web（包括PC和移动端浏览器）、以及各种小程序（微信、支付宝、百度、字节跳动、QQ等）和快应用等多个平台。简而言之，uniApp的宗旨是“一次开发，多处运行”。使用uniApp，开发者可以享受到Vue.js的开发体验，包括组件化开发、Vue插件支持、Vuex状态管理等，同时还能通过uniApp提供的丰富API和组件，轻松实现跨平台应用的开发。
复制链接

扫一扫