uniapp面试题

UniApp面试题通常涵盖以下几个方面：

1. 基础概念：

        1.什么是UniApp？它有什么特点？

             

 uni-app是一个基于Vue.js开发的跨平台应用开发框架，可以使用一套代码同时构建iOS、Android、H5、小程序等多个平台的应用。

 uni-app的特点是开发效率高、开发成本低、开发周期短，同时还具有良好的性能和用户体验。同时，Uni-app提供了丰富的原生API和插件来实现更多功能。

---

             2.解释UniApp中的生命周期钩子函数及其执行顺序。

export default {

// 页面的生命周期钩子函数

onLoad() {

// 页面加载时触发

console.log('页面加载');

},

onShow() {

// 页面显示/切入前台时触发

console.log('页面显示');

},

onReady() {

// 页面初次渲染完成时触发

console.log('页面初次渲染完成');

},

onHide() {

// 页面隐藏/切入后台时触发

console.log('页面隐藏');

},

onUnload() {

// 页面卸载时触发

console.log('页面卸载');

}

// 其他生命周期钩子函数可以根据需要添加，如 onPullDownRefresh 等

};

             3.区别UniApp中的全局组件和页面组件。

1. 全局组件：

全局组件需要在main.js中通过Vue.component进行全局注册，这样在整个应用中任何页面都可以使用这个组件。

1. 页面组件：

页面组件是仅在当前页面中使用的组件，它们通常定义在页面的.vue文件中的<script>标签内。

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

条件编译是一种根据预定义的条件来选择性地编译代码的技术。在开发过程中，我们可以根据一些条件来控制代码的编译和执行，从而实现不同的功能或适应不同的平台。

在UniApp中，条件编译可以通过以下方式实现：

根据平台进行条件编译：UniApp可以同时编译生成多个平台的应用，如小程序、H5、App等。我们可以使用条件编译来在不同的平台上执行不同的代码，以适应各个平台的要求。

// #ifdef APP-PLUS
// 仅在App平台编译的代码
// #endif
 
// #ifdef H5
// 仅在H5平台编译的代码
// #endif
 
// #ifdef MP-WEIXIN
// 仅在微信小程序平台编译的代码
// #endif

根据配置进行条件编译：UniApp提供了一些内置的配置信息，如debug模式、release模式等。我们可以使用条件编译来在不同的配置下执行不同的代码，以满足不同的开发和调试需求。

根据自定义条件进行条件编译：在UniApp中，我们可以自定义一些条件，如环境变量、代码版本等。通过条件编译，我们可以根据这些自定义条件来选择性地编译和执行代码。
 

1. 技术实现：

   • 如何实现页面跳转？

uni.navigateTo：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

uni.redirectTo:可以关闭当前界面并跳转到其他的非tabbar界面（可带参数）

uni.relaunch:关闭所有页面，打开到应用内的某个页面（可带参数）

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

uni.navigateBack：关闭当前页面，返回上一页面或多级页面

            2. 获取设备信息的方法是什么？

uni-app提供了异步(uni.getSystemInfo)和同步(uni.getSystemInfoSync)的2个API获取系统信息。

            3.如何实现页面间的数据传递？

1.使用uni.navigateTo或uni.redirectTo进行页面跳转时，通过URL传递参数。

2.使用全局变量或Vuex进行状态管理。

3.使用uni.setStorageSync和uni.getStorageSync进行本地存储。

4.使用uni.setStorage和uni.getStorage进行异步本地存储。

5.使用事件总线uni.$emit和uni.$on实现跨页面事件通信。

            4.图片的懒加载在UniApp中如何实现？

在UniApp中实现图片的懒加载，可以使用<image>组件的lazy-load属性。默认情况下，<image>组件已经启用懒加载。

1. 兼容性与性能优化：

   • 遇到哪些兼容性问题？如何解决？

1.组件或API的不同实现：不同平台可能对同一组件或API有不同的实现和支持程度。

解决方案：查阅官方文档，使用条件编译或平台检测来调用特定平台的实现。

2.样式兼容性：不同平台的样式表现可能不一致。

解决方案：使用条件编译或内嵌样式处理平台特有样式差异。

3.性能问题：某些平台可能性能不足，导致应用运行缓慢。

解决方案：优化代码，使用性能优化建议，比如使用virtualList等。

4.文件路径问题：平台间文件路径表示可能不同。

解决方案：使用uniAPI中的路径处理方法，如uni.getFileSystemManager()。

5.网络请求的差异：比如HTTPS要求、跨域等问题。

解决方案：使用UniApp提供的网络API，并处理不同平台的差异。

6.输入法的兼容性：比如iOS和Android平台输入法的差异。

解决方案：可能需要自定义输入组件或使用条件编译处理特定平台问题。

7.多窗口处理：某些平台可能不支持应用同时开启多个窗口。

解决方案：使用条件编译或平台检测来适配不支持多窗口的平台。

8.第三方库的兼容性：部分第三方库可能不支持UniApp。

解决方案：选择兼容的第三方库，或者根据需要对库进行适配修改。

               2.小程序的支付功能和性能优化策略。

使用uni.requestPayment API来发起支付请求

性能优化:

1. 使用 v-if 替代 v-show

 v-if 是惰性的，如果初始条件为假，则什么也不做，只有在条件第一次变为真时，才会开始编译模板，这样可以避免不必要的渲染。

 2. 避免在列表渲染中使用 `v-for` 和 `v-if` 同时使用

如果有这种需求，可以考虑使用计算属性预处理数据，或者使用不同的结构。

3. 避免在 `template` 中使用 `this.$refs`

应该尽量避免在模板中使用 `this.$refs`，因为这会使得模板与实例的耦合度过高，不便于维护。

4. 使用 `nvue` 替代 `vue` 文件

nvue 是使用 weex 技术的 UniApp 页面，它提供了原生渲染能力，对性能有一定优化。

5. 使用 `pages.json` 中的 `optimization` 选项

对于大型应用，可以开启分包加载，设置分包预下载等优化策略。

6. 使用 `performance` 相关 API

监控页面加载时间，使用 `uni.createSelectorQuery()` 优化渲染性能。

7. 使用 `Webview` 组件时，注意其性能

Webview 比较重，如果不需要复杂的交互，尽量不要使用。

8. 使用 `lazyload` 图片懒加载

对于列表中的图片，可以使用懒加载来提高性能。

9. 使用 `CDN` 加速静态资源

对于第三方库或者静态资源，可以考虑使用 CDN 加速。

10. 使用 `GPU 加速`

对于动画等高频渲染的操作，可以开启 GPU 加速来提升性能。

1. 导航与路由：

   • 介绍UniApp中的导航栏组件。

              

<navigation-bar>组件接受几个属性：title、back-icon-name、backgroundColor、titleColor 和 titleSize。开发者可以根据自己的需求自定义这些属性。

注意：<navigation-bar>组件需要你自己实现，或者使用社区提供的插件或者组件。如果你需要实现自定义的导航栏，你可以在项目中创建一个自定义组件，并在需要的页面中引入使用。

              2.如何进行接口请求？是否会遇到跨域问题？

uni.request方法来进行接口请求。如果遇到跨域问题，通常是后端CORS（跨源资源共享）设置不允许前端直接请求。

解决方案：

1. 后端设置CORS允许跨域。在后端设置响应头Access-Control-Allow-Origin为你的前端域名或*（代表允许所有域）。

2. 使用代理服务器。在开发过程中，你可以使用代理服务器将请求转发到目标服务器，从而绕过跨域问题。