必答​

准备充分的同学可以自己融入加分回答中或者引导面试官往自己准备的方向提问。

uni-app

官方支持所以默认情况下组件是没有类型校验的如果自己手写组件类型声明效率太低了。

基于这个问题我们团队做过一些充分的调研uni-helper

uni-app

生态类型声明文件做的非常好更新频率也非常及时。

其实在我们开发的过程中遇到些小问题我们在

github

也有及时解决。

最后我们也保持关注官方文档和更新确保项目的稳定性和兼容性。

再深入​

是官方出品的组件库有官方的技术支持和持续维护(最重要)。

uni-ui

暂不支持

版但目前可能作者太忙了处于没更新状态不稳定所以综合考虑我们选择官方维护的

参考链接​

采用单一状态树的概念将全局状态集中管理方便追踪状态变化。

Vuex

State

State严格遵循单向数据流。

Action用于异步操作可以包含异步

API

总持久化存储配置完成后就会自动将用户数据保存在客户端即使用户关闭了小程序数据依然可以保留。

配置参考

官方说明pinia-plugin-persistedstate

storage

端上有统一的表现。

在使用这些组件时需要注意它们在不同平台之间的差异封装自定义组件的时候更推荐

view、text

支持多个平台所以提供了条件编译功能。

开发者可以通过条件编译在特定平台上使用平台特有的

API

需要支持多个平台所以在一些细节上会有所区别平时开发时要注意平台相关的组件、生命周期、样式的差异。

加分​

应用的生命周期一致onLaunch、onShow、onHide

等页面生命周期与

页面的生命周期一致onLoad、onUnload、onShow

等组件生命周期与

生命周期钩子获取最新的购物车列表数据因为在商品详情页中进行添加购物车操作。

添加成功后打开购物车页面应展示最新的购物车数据。

因此每次

购物车页面

项目主要是做小程序端所以我们的页面组件优先使用小程序的生命周期钩子也就是

onShow、onHide

{document.addEventListener(visibilitychange,

beforeDestroy()

{document.removeEventListener(visibilitychange,

methods:

框架不需要额外安装和引入第三方库。

兼容多端可以方便地在不同平台上使用。

功能相对于

的网络请求库。

通过添加拦截器实现了对请求前处理和请求后的处理提高了代码的复用性。

添加拦截器拦截

401则清除用户信息并跳转到登录页面。

如果是其他错误则根据后端错误信息进行提示。

如果是网络错误则提示用户更换网络。

总我们借鉴

https://pcapi-xiaotuxian-front-devtest.i***ima.net//

添加拦截器

(!options.url.startsWith(http))

{options.url

{...options.header,source-client:

miniapp,}//

useMemberStore()memberStore.clearProfile()uni.navigateTo({

url:

根据后端错误信息轻提示uni.showToast({icon:

none,title:

是我最熟悉并习惯使用的代码编辑器常用的代码片段快捷键可以我的开发效率。

插件生态我针对

uni-app

项目安装了对应的插件代码提示快速新建页面并注册路由鼠标悬停查文档这些功能我都在

VSCode

总其实还是我自己不想换开发工具也不是刻意去比较两者谁好谁坏哪一个编辑器自己用起来更习惯能提高效率就用哪个。

温馨提示Hbuilder

工具。

选择哪一个编辑器写代码取决于开发者的个人喜好和项目需求。

参考链接​

我们项目的首页订单详情页个人信息页等页面都用到了自定义导航栏核心步骤如下

隐藏默认导航栏在

。

按设计稿要求编写自定义导航栏的结构、样式和脚本。

封装左上角返回按钮通过

getCurrentPages

返回上一页。

最后还可以根据需要抽离封装成一个通用的组件预留标题插槽等方便复用。

uni-ui

获取顶部到安全区的距离在模板中绑定行内样式避免刘海屏或前置摄像头遮挡导航栏标题或

logo

wx.getMenuButtonBoundingClientRect

参考代码

classwrapnavigatorv-ifpages.length

1open-typenavigateBackclassback

v-else

--slot导航栏标题/slot/view/view/view

/template

其实我们项目的订单详情页或者某个页给自定义导航栏加了滚动驱动动画增强用户视觉效果

scroll-view

id用于绑定动画效果和滚动容器偏移量。

获取当前页面实例因为这个功能目前只有微信小程序端支持H5

animate

动画效果,导航栏背景色pageInstance.animate(.navbar,[{

backgroundColor:

classwrapnavigatorv-ifpages.length

1open-typenavigateBackclassback

v-else

classtitle订单详情/view/view/viewscroll-view

classviewport

总其实代码优化和性能优化是一个持续进行的过程我们的项目主要是做了以下的优化

页面加载优化

属性即可。

分包加载项目模块拆分为多个包按需加载对应的包降低初始加载时间。

项目的分包分包页面的图片等资源也可放到分包的文件夹中减少主包资源体积代码优化

代码分层按功能模块化代码提高代码可读性和可维护性goods.ts、home.ts

等划分。

使用枚举枚举提供了一种更有意义的命名方式使代码更具可读性类型也更安全

。

条件编译在处理多端的时候按条件编译平台所需代码减少冗余。

登录界面等类型安全为组件

提供了静态类型检查有助于在编译阶段发现潜在的类型错误。

这可以减少运行时错误提高代码的可靠性。

(安装

uni-app-types、uni-ui-types)数据处理优化

数据获取仅获取和处理需要的数据避免不必要的数据处理分页时设计合理的页容量减少一次性渲染的节点数量。

个数据缓存缓存获取的数据减少不必要的数据请求配置持久化存储。

优化数据更新在

uni-app

里面的数据每次变化时都会通知视图层重新渲染页面。

所以如果不是视图所需要的变量可以不定义在

data/ref

中可定义普通变量以避免造成资源浪费。

如分页的参数仅用于发送请求和判断条件不用于界面渲染没有用

ref

组件复用对于通用功能将其封装为组件提高代码复用性。

猜你喜欢组件轮播图组件优化资源文件

tabBar

图片。

压缩图片避免使用大图对图片进行压缩减少图片文件大小。

素材已压缩尺寸在线压缩图片网络环境适配获取设备的网络类型可以在应用中根据网络环境做出相应调整如在较慢的网络环境下降低图片质量、限制大文件下载等。

使用

CDN

上加速资源文件的加载速度。

公司已购买由运维管理项目商品图都已开启

CDN

wx:if合理控制组件渲染减少不必要的组件渲染。

空购物车订单状态等v-if

DOM

来控制显示适用于频繁切换的场景。

避免不必要的组件重绘减少不必要的数据变动避免组件频繁重绘。

v-for

key

的合理使用也是减少重绘成本骨架屏提升用户体验使用户感知到数据正在加载降低用户等待时的焦虑感避免页面白屏闪烁。

(微信开发者工具自动生成项目首页和部分请求数据量较大的页面记得添加骨架屏)避免视图层和逻辑层频繁进行通讯减少

scroll-view

使用请求拦截和响应拦截对请求和响应进行拦截处理提高请求效率。

http.ts

总总的来说性能优化是一个持续进行的过程通过不断地优化和调整提高项目的性能和用户体验。

加分​

理论上越多越好按照自己的理解情况回答回答时可提及项目中的业务场景适当展开。

深入​

函数包裹原事件函数并设置合理的延迟时间结合真机调试取合适毫秒值。

参考代码

UniHelper.ScrollViewOnScrollEvent)

{//

UniHelper.ScrollViewOnScrollEvent)

{//

最好是在组件卸载时,清除掉防抖计时器this.debouncedScroll.cancel()},methods:

{//

UniHelper.ScrollViewOnScrollEvent)

{this.scrollTop

防抖debounce和节流throttle函数在处理高频触发事件时都非常实用。

wait

输入框实时搜索当用户在输入框中输入时可以使用防抖函数来延迟触发搜索请求。

这样可以减少服务器请求次数提高性能。

按钮点击在一些场景下如表单提交、购物车结算等为避免用户频繁点击按钮导致重复提交数据可以使用防抖函数控制按钮点击事件的触发。

滚动事件在处理滚动事件时可以使用防抖函数来限制事件处理函数的执行频率。

例如当用户滚动页面时可以使用防抖函数来延迟加载图片或触发其他与滚动相关的操作。

用户操作监听在实时监控用户操作如鼠标移动、点击等的场景中可以使用防抖函数来减少事件处理函数的执行次数降低系统资源消耗。

滚动加载在无限滚动列表或页面滚动加载数据的场景中可以使用节流函数控制滚动事件处理函数的执行频率以减轻服务器压力和提高性能。

组件库一般有实现页面滚动时的动画效果当用户滚动页面时可以使用节流函数来控制动画效果的触发频率以保持流畅的动画表现避免性能抖动。

微信小程序的滚动驱动动画内部实现实时监控鼠标移动在需要实时监控鼠标移动的场景中可以使用节流函数限制事件处理函数的执行频率降低系统资源消耗。

浏览器窗口大小调整当用户调整浏览器窗口大小时可以使用节流函数来限制与窗口大小相关的布局调整或重绘的执行频率提高页面性能。

实时数据采集在需要实时采集用户行为数据的场景中可以使用节流函数来控制数据发送频率减轻服务器压力。

总虽然防抖和节流的应用场景看似有所重叠但它们的工作原理和应用场景有所不同

工作原理

防抖debounce当事件触发后防抖函数会等待一定时间设定的延迟时间如果在这段时间内事件没有再次触发则执行事件处理函数。

如果在这段时间内事件再次触发那么重新开始等待延迟时间。

简单来说防抖就是让事件处理函数在事件触发后的一段时间内不执行只有当事件停止触发一段时间后才会执行。

节流throttle节流函数会在一定时间间隔内执行事件处理函数即使在这段时间内事件多次触发也只会执行一次事件处理函数。

简言之节流就是让事件处理函数以固定的频率执行。

应用场景

防抖适用于需要等待一段时间后才执行的场景如搜索框输入实时搜索、按钮点击避免重复提交等。

这些场景中只关心事件触发的最后一次而不关心事件在中间的过程。

节流适用于需要以一定频率执行的场景如滚动加载、窗口大小调整、鼠标移动监控等。

这些场景中关心事件在整个过程中的表现而不仅仅是最后一次触发。

总结防抖关注事件触发后的延迟执行节流关注事件在整个过程中以固定频率执行。

在选择使用防抖或节流时需要根据具体的应用场景和需求来决定。

参考链接

属性用于关闭动画的。

下拉刷新事件内部主要是重新获取数据当数据获取成功后主动关闭下拉刷新动画。

注意在多个请求的情况下需要用

Promise.all()

Promise.all([getHomeBannerData(),

getHomeHotData()])//

--scroll-viewrefresher-enabledrefresherrefreshonRefresherrefresh:refresher-triggeredisTriggeredscroll-y..../scroll-view

/template

事件。

在事件内部需要判断是否已加载完所有数据没有结束就继续发送请求同时页码要累加获取的数据要追加到原数组后如果分页已结束就更新

finish

getHomeGoodsGuessLikeAPI(pageParams)//

数组追加guessList.value.push(...res.result.items)//

分页条件if

classguessnavigatorclassguess-itemv-foritem

guessList:keyitem.id:url/pages/goods/goods?id${item.id}image

classimage

}}/text/view/navigator/viewview

classloading-text{{

在我们项目的个人信息页收货地址表单页等页面都涉及到表单数据的收集。

uni-app

类型而网页端没有。

所以不要完全凭借网页端的经验处理小程序的表单尽管部分表单组件的名称和网页端同名也要应该要查阅

uni-app

方法进行表单验证。

根据验证结果执行相应的逻辑例如提交表单或显示错误提示。

添加提交按钮在模板中添加一个提交按钮为其设置

tap

refUniHelper.UniFormsInstance()const

onSubmit

formRef.value?.validate!()console.log(校验通过提交数据,

result)}

taponSubmit提交/button/view/uni-forms/view

/template

总在遇到问题时我一般都是参考官方文档、社区资源和其他开发者的经验。

vue

实例的组件生命周期还拥有应用生命周期及页面的生命周期。

受限相比

Web

端部分功能支持不完善具体见兼容性列表。

如微信小程序端不支持自定义指令

directive可通过封装工具函数实现参考方案。

跨平台兼容性问题

uni-app

需要适配多个平台开发过程中可能会遇到不同平台的兼容性问题。

在遇到此类问题时可以参考官方文档和社区资源了解不同平台的特性和限制然后针对性地解决问题。

如果必要可以使用条件编译在不同平台下执行不同的代码。

端不支持

开发过程中可能会遇到页面性能问题如加载速度慢等。

为了解决这些问题可以尝试以下方法

减少本地图片资源压缩图片避免使用大图素材中已优化在线压图工具减少不必要的计算和渲染使用分包加载按需加载页面和资源插件兼容性问题

当使用第三方插件或库时可能会遇到兼容性问题。

在这种情况下可以尝试以下方法

查找针对

保持代码的模块化和组件化一直都有保持遵循良好的编码规范一直都有保持编写文档记录项目结构和功能。

一直都保持如封装函数写

JSDoc

社区提问题以找到合适的解决方案。

最后保持良好的编码规范和项目结构可以降低维护成本提高开发效率。

参考链接​

保持代码一致性代码规范可以确保团队成员遵循相同的编码风格和约定。

这可以提高代码的可读性使团队成员更容易理解和维护彼此的代码。

提高代码质量通过强制执行一些最佳实践ESLint

可以帮助开发者避免常见的错误和潜在的风险。

这有助于提高代码的质量减少维护成本。

自动化格式化Prettier

可以自动格式化代码保持代码整洁减轻开发者在调整代码格式时的负担。

它可以帮助开发者专注于编写功能代码而无需担心代码风格的问题。

预提交检查Husky

ESLint

检查。

这有助于确保仅提交符合规范的代码从而减少代码审查和后期修复的成本。

更好的协作通过遵循相同的代码规范和工具团队成员之间的协作变得更加顺畅。

这有助于提高开发效率降低沟通成本。

提高开发效率使用这些工具可以自动处理一些繁琐的任务如格式化、检查错误等从而使开发者可以专注于编写高质量的功能代码提高开发效率。

深入​

总这些配置是由团队负责人制定当然也可以由你自己配置在小兔鲜儿的项目中已全部配置。

首先我们需要安装

检查以确保提交的代码符合规范。

最后为了确保团队成员能够在各种编辑器中保持一致的代码风格建议在项目中添加一个

.editorconfig

项目设置全局变量如getCurrentPages、uni、wx、UniHelper。

ESLint、Prettier

.eslintrc.js

规则可能与项目需求不符。

在这种情况下可以根据项目实际情况自定义规则或禁用部分不适用的规则。

当使用第三方库或组件时可能会遇到与

ESLint

require(rushstack/eslint-patch/modern-module-resolution)module.exports

{root:

[plugin:vue/vue3-essential,eslint:recommended,vue/eslint-config-typescript,vue/eslint-config-prettier,

ESLint、Prettier

规则与项目需求不符vue/multi-word-component-names:

[off],vue/no-setup-props-destructure:

[off],vue/no-deprecated-html-element-is:

[off],typescript-eslint/no-unused-vars:

[off],},

开发过程中由于需要适配多个平台可能会遇到不同平台之间的差异和兼容性问题。

为了解决这些问题uni-app

(分)

条件编译(常见)条件编译是在编译阶段根据预设条件对代码进行不同分支的编译。

在

uni-app

为解决多平台兼容性问题提供的两种方法。

条件编译更加常见在编译阶段根据预设条件对代码进行不同分支的编译而平台差异化处理是在运行时根据当前平台执行不同的代码逻辑。

根据项目需求和场景可以灵活选择使用这两种方法。

加分​

中有很多应用场景主要用于处理不同平台间的差异和兼容性问题。

以下是一些常见的应用场景

平台可能需要使用其他登录方式如手机号验证码。

这种情况下可以使用条件编译为不同平台提供适当的登录实现。

#ifdef

在某些平台上可能不可用。

在这种情况下可以使用条件编译来处理平台差异。

#ifdef

navigator.geolocation.getCurrentPosition((position)

{//

平台的select元素。

可以使用条件编译针对不同平台提供不同的

template!--

资源路径差异有时不同平台对资源路径的处理方式不同可以使用条件编译为不同平台提供适当的资源路径。

template!--

开发过程中具有广泛的应用场景主要用于解决不同平台间的差异和兼容性问题。

根据具体需求可以灵活运用条件编译来实现适配不同平台的功能和表现。

类似问题