Uniapp基础面试

原创 2024-05-16 11:31:13 1w 阅读 AI写同款

KeepLearningDay

18粉丝41篇原创

关注

UniApp 面试题 答案：UniApp 是一个基于 Vue.js 的跨平台应用开发框架，可以使用 Vue.js 的开发语法编写一次代码，然后通过编译生成可以在多个平台（包括iOS、Android、H5 等）上运行的应用。跨平台：开发者可以使用相同的代码基底构建多个平台的应用，避免了针对不同平台的重复开发。高性能：UniApp 在运行时使用原生渲染技术，具有接近原生应用的性能表现。开放生态：UniApp 支持原生插件和原生能力的扩展，可以调用设备的硬件功能和第三方原生 SDK。阅读详情

AI摘要

本文探讨了uni-app的优点如跨端开发、学习成本低及拓展性，同时分析了其缺点如社区支持不足和平台兼容性问题。还介绍了uni-app的页面结构、路由机制、数据存储、生命周期管理、组件间通信以及自定义Nav表头的技术应用和一个字符串最长无重复字符子串的算法示例。,

1. uni-app的优缺点

优点:

a. 一套代码可以生成多端
b. 学习成本低,语法是vue的,组件是小程序的
c. 拓展能力强
d. 使用HBuilderX开发,支持vue语法
e. 突破了系统对H5条用原生能力的限制

缺点:

a. 问世时间短,很多地方不完善
b. 社区不大
c. 官方对问题的反馈不及时
d. 在Android平台上比微信小程序和iOS差
e. 文件命名受限

2. 描述一下uniapp的页面结构以及目录文件所代表的什么

pages.json
配置文件，全局页面路径配置，应用的状态栏、导航条、标题、窗口背景色设置等
main.js
入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex，
注意uniapp无法使用vue-router，路由须在pages.json中进行配置。
如果开发者坚持使用vue-router，可以在插件市场找到转换插件。
App.vue
是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。
但App.vue本身不是页面，这里不能编写视图元素。
除此之外，应用生命周期仅可在App.vue中监听，在页面监听无效。
pages
页面管理部分用于存放页面或者组件
manifest.json
文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
package.json
配置扩展，详情内容请见官网描述package.json概述

3. 说明uniapp页面跳转方式

1、uni.navigateTo: 保留当前页面，跳转到应用的某个页面，使用 uni.navigateBack 可以返回原页面。这种方式类似于网页的超链接跳转。

2、uni.redirectTo: 关闭当前页面，跳转大应用内的某个页面。这种方式类似于网页的重定向。

3、uni.switchTab: 跳转到tabBar页面，并关闭其他所有非tabBar页面。

4、uni.reLaunch: 关闭所有页面，打开到应用内的某个页面。

5、nui.navigateBack: 关闭当前页面，返回上一页或多级页面。

4. 分别写出jQuery、vue、小程序、uni-app中的本地存储数据和接受数据是什么？

jQuery：

存：$.cookie('key','value')
取：$.cookie('key')

vue：

存储：localstorage.setItem（‘key’，‘value’）
接收：localstorage.getItem（‘key’）

uni：

存储：uni.setStorage({key:“属性名”，data:“值”})
接收：uni.getStorage({key:“属性名”,success(e){e.data//这就是你想要取的token}})

5.vue、小程序、uni-app的生命周期

vue

beforeCreate（创建前）
created（创建后）
beforeMount(载入前),（挂载）
mounted（载入后）
beforeUpdate（更新前）
updated（更新后）
beforeDestroy（销毁前）
destroyed（销毁后）

uniapp

onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
onShow：加载完成后、后台切到前台或重新进入页面时触发
onReady：页面首次渲染完成时触发
onHide：从前台切到后台或进入其他页面触发
onUnload：页面卸载时触发
onPullDownRefresh：监听用户下拉动作
onReachBottom：页面上拉触底事件的处理函数
onShareAppMessage：用户点击右上角转发

6. uniapp中如何定义全局变量与Vue在定义全局变量的时候有什么不同

Vue

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

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
const store = new Vuex.Store({
  state: {
    globalVar: '我是全局变量'
  }
})
 
export default store

使用全局变量

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

uniapp

    使用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()

使用

console.log(this.$uni.globalVar)

7.如何防止快速点击？

在需要防止按钮重复提交的组件上添加 :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>

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

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

简述 rpx、px、em、rem、%、vh、vw的区别

rpx	相当于把屏幕宽度分为750份，1份就是1rpx
px	绝对单位，页面按精确像素展示
em	相对单位，相对于它的父节点字体进行计算
rem	相对单位，相对根节点html的字体大小来计算
%	一般来说就是相对于父元素
vh	视窗高度，1vh等于视窗高度的1%
vw	视窗宽度，1vw等于视窗宽度的1%

请解释 UniApp 中的跨平台兼容性问题和解决方案。

答案：由于不同平台的差异，UniApp 在跨平台开发时可能会遇到一些兼容性问题。为了解决这些问题，可以采取以下几个方面的策略：

使用条件编译：根据不同的平台，编写对应平台的代码，使用条件编译指令来控制代码块的执行。
使用平台 API：UniApp 提供了一些平台 API，可以通过条件编译指令来使用特定平台的功能和能力。
样式适配：不同平台的样式表现可能有差异，使用 uni-app-plus 插件中的 upx2px 方法来进行样式适配，使得在不同平台上显示一致。
原生扩展：使用原生插件和扩展来调用设备的原生功能和第三方 SDK，以解决特定平台的需求。

请解释 UniApp 中的条件编译是如何工作的。

UniApp 中的条件编译允许开发者根据不同的平台或条件编译指令来编写不同的代码。
在编译过程中，指定的平台或条件将会被处理，并最终生成对应平台的可执行代码。
条件编译通过在代码中使用 #ifdef、#ifndef、#endif 等指令进行控制。
例如，可以使用 #ifdef H5 来编写只在 H5 平台生效的代码块。

Vue 的父组件和子组件生命周期钩子函数执行顺序？

Vue 的父组件和子组件生命周期钩子函数执行顺序可以归类为以下 4 部分：

加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 
父 mounted

子组件更新过程
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated

父组件更新过程
父 beforeUpdate -> 父 updated

销毁过程
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed

Vue 数据双向绑定原理

Vue实现数据双向绑定主要利用的就是: 数据劫持和发布订阅模式，利用的 Object.defineProperty() 方法进行的数据劫持，然后通知发布者(主题对象)去通知所有观察者，观察者收到通知后，就会对视图进行更新。

MVVM 框架主要包含两个方面，数据变化更新视图，视图变化更新数据。

视图变化更新数据，如果是像 input 这种标签，可以使用 oninput 事件…

数据变化更新视图可以使用 Object.definProperty() 的 set 方法可以检测数据变化，当数据改变就会触发这个函数，然后更新视图。

实现过程

我们知道了如何实现双向绑定了，首先要对数据进行劫持监听，所以我们需要设置一个 Observer 函数，用来监听所有属性的变化。

如果属性发生了变化，那就要告诉订阅者 watcher 看是否需要更新数据，如果订阅者有多个，则需要一个 Dep 来收集这些订阅者，然后在监听器 observer 和 watcher 之间进行统一管理。

还需要一个指令解析器 compile，对需要监听的节点和属性进行扫描和解析。

因此，流程大概是这样的：

实现一个监听器 Observer，用来劫持并监听所有属性，如果发生变动，则通知订阅者。

实现一个订阅者 Watcher，当接到属性变化的通知时，执行对应的函数，然后更新视图，使用 Dep 来收集这些 Watcher。

实现一个解析器 Compile，用于扫描和解析的节点的相关指令，并根据初始化模板以及初始化相应的订阅器。
在这里插入图片描述

虚拟 DOM 的优缺点？

优点：

保证性能下限：框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限；

无需手动操作 DOM：我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率；

跨平台：虚拟 DOM 本质上是 JavaScript 对象,而 DOM 与平台强相关，相比之下虚拟 DOM 可以进行更方便地跨平台操作，例如服务器渲染、weex 开发等等。

缺点:

无法进行极致优化：虽然虚拟 DOM + 合理的优化，足以应对绝大部分应用的性能需求，但在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化。

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

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

在 pages.json 文件中配置页面路径和需要加载的页面组件。

在页面组件中使用 &lt;template>、&lt;script> 和 &lt;style> 标签，其中 &lt;template> 
标签中是页面的内容，&lt;script> 标签中定义页面组件的相关属性，&lt;style> 标签中定义页面的样式。

使用 uni.navigateTo() 或 uni.redirectTo() 方法进行页面跳转。

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

uni.redirectTo() 方法用于关闭当前页面，跳转到新页面，即不保留当前页面。

在页面组件中使用 this.$route.params 获取上一个页面传递的参数，并使用 this.$route.query 获取页面跳转时传递的参数。

使用 uni.navigateBack() 方法返回上一个页面，可以通过 delta 参数设置返回的层数。

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

8. 场景应用讲解

详细描述一下自定义封装Nav表头中所设计的技术点以及扩展点并通过某种技术点对该自定义组件减少代码工作量，提高开发人员的工作效率

无重复字符的最长子串

给定一个字符串，请你找出其中不含有重复字符的最长子串的长度。

/**
 * @param {string} s
 * @return {number}
 */
var lengthOfLongestSubstring = function(s) {
  // 滑动窗口初始化为一个空数组
  let arr = [];
  // 要返回的字符串的长度
  let max = 0;
  for (let i = 0; i < s.length; i++) {
    // 使用 indexOf 判断是否在数组中出现过
    let index = arr.indexOf(s[i])
    // 如果出现过
    if (index !== -1) {
      // 从数组开头到当前字符串全部截取掉
      arr.splice(0, index + 1);
    }
    // 在窗口右边放进新的字符
    arr.push(s.charAt(i));//charAt(i)返回指定位置的字符
    // 更新下最大值
    max = Math.max(arr.length, max);//两个数比较
  }
  // 返回
  return max;
};