目录
问：在 uni-app 中，如何进行全局状态管理？请介绍一下你对 Vuex 和 Pinia 的了解。?
问：uni-app 中的组件和 Vue.js 中的组件有什么区别？?
问：请介绍一下 uni-app 的网络请求库 uni.request 与 axios 相比，它有哪些优缺点？?
问：为什么用 VSCode 开发 uni-app 项目而不使用 Hbuilder？?
问：如何在 uni-app 项目中进行代码优化或性能优化？?
?uni-app 中，如何实现下拉刷新和上拉加载更多功能？?
问：请谈谈你在使用 uni-app 过程中遇到的问题，以及如何解决它们。?
问：请介绍 uni-app 中的条件编译和平台差异化处理??
（总）我们项目使用的是?uni-ui?组件库，这是官方出品的组件库，有官方的技术支持和持续维护并且 uni-ui 组件库比较相对精简，组件自动按需导入，有利于减小项目体积。
（分）两个核心步骤是：
@dcloudio/uni-ui(组件库) 和?scss。pages.json?文件中配置?easycom?规则，实现?uni-ui?组件的自动导入和注册。虽然?uni-ui官方并没有类型声明文件，但我们在项目中还配置了?uni-ui?的?TS?组件类型支持，可以校验组件的属性，类型更安全，书写时也有代码提示。
实现类型支持其实也就多了两个步骤：
@uni-helper/uni-ui-type?第三方类型声明文件。tsconfig.json，将类型声明文件添加到?types?数组就可以了。TIP
准备充分的同学，可以自己融入加分回答中，或者引导面试官往自己准备的方向提问。
其实?uni-app?和?uni-ui?目前还没有 TS 官方支持，所以默认情况下组件是没有类型校验的，如果自己手写组件类型声明效率太低了。基于这个问题，我们团队做过一些充分的调研，uni-helper?虽然是非官方组织，但这个第三方组织是 uni-app 生态类型声明文件做的非常好，更新频率也非常及时。其实在我们开发的过程中遇到些小问题，我们在?github?仓库提的?issue?也有及时解决。最后，我们也保持关注官方文档和更新，确保项目的稳定性和兼容性。
? 问: 为什么项目中使用?uni-ui?而不选择?uview-ui。
🙋?♂? 答: 我们团队主要是考虑以下三点做出的选择：
uni-ui?是官方出品的组件库，有官方的技术支持和持续维护(最重要)。uni-ui?比较相对精简，有利于减小项目体积。uview-ui?暂不支持?Vue3?开发，稍微落后。当然?uview-ui?组件库也不错，是目前?uni-app?插件市场下载量最高的第三方 Vue2 组件库，社区中也有热心的小伙伴为?uview-ui?做了 Vue3 版，但目前可能作者太忙了，处于没更新状态，不稳定，所以综合考虑，我们选择官方维护的?uni-ui。
类似问题
- 如何在 uni-app 中引入和使用第三方组件库？
- 请介绍几个常用的 uni-app 组件库，以及它们的特点和使用场景？
- 组件库的 TS 类型怎么处理？
（总）我们项目使用的是 Pinia 进行全局状态管理，Vuex 或 Pinia 都是官方提供的状态管理库。
（分）我先说一下我对 VueX 的了解： Vuex 采用单一状态树的概念，将全局状态集中管理，方便追踪状态变化。Vuex 主要包含以下几个核心概念：
我对 Pinia 的了解是 Pinia 可以理解为就是?Vuex5，是一个轻量级的、兼容 Vue 3 和 Vue 2 的状态管理库。Pinia 和 VueX 主要区别是废弃了经常被认为是极其冗余的 mutation，Pinia 主要包含以下几个核心概念：
（总）所以我们项目最终选择的是 Pinia 进行全局状态管理。
（总）其实我们的项目还配置了 pinia 的持久化存储方案。
（分）我们用到了?pinia-plugin-persistedstate?插件实现持久化，周下载量?61k，但是这个插件默认使用?localStorage?实现持久化，小程序端不兼容，所以必须修改一下配置，替换为?uni-app?支持多端的持久化 API，也就是?uni.setStorageSync()?和?uni.getStorageSync()。
（总）持久化存储配置完成后，就会自动将用户数据保存在客户端，即使用户关闭了小程序，数据依然可以保留。
配置参考
// stores/modules/member.ts
export const useMemberStore = defineStore(
'member',
() => {
//…省略
},
{
// 配置持久化
persist: {
// 调整为兼容多端的API
storage: {
setItem(key, value) {
uni.setStorageSync(key, value)
},
getItem(key) {
return uni.getStorageSync(key)
},
},
},
},
)?
类似问题
- 在 uni-app 中如何实现全局状态管理？
- 在 uni-app 中如何实现持久化存储？
（总）uni-app 是基于 Vue.js 构建的跨平台开发框架，因此?uni-app 中的组件与 Vue.js 中的组件在很多方面是相似的。然而，由于 uni-app 需要支持多个平台，包括微信小程序、App 端和 H5 端，所以在某些方面会有一些差异。
（分）根据自身理解，选其中几点回答即可：
以下是 uni-app 中的组件与 Vue.js 中的组件的一些主要区别：
跨平台：Vue.js 主要用于开发网页应用，而 uni-app 可以让你用同一套代码开发微信小程序、App、H5 等多个平台的应用。
基础组件：uni-app 提供了一套与 Vue.js 不同的基础组件。这些组件是为了适应不同平台的 UI 要求而设计的，它们在微信小程序、App 端和 H5 端上有统一的表现。在使用这些组件时，需要注意它们在不同平台之间的差异，封装自定义组件的时候更推荐?<view>、<text>?等基础组件，而非?<div>、<span>。
生命周期：虽然 uni-app 和 Vue.js 的组件都有生命周期钩子，但是 uni-app 为了适应不同平台而引入了一些额外的生命周期钩子，例如?onLaunch、onShow?和?onHide。
样式差异：某些 CSS 选择器不受支持如?*?通配符选择器。此外，uni-app 支持一种叫做?rpx?的相对单位，它可以自动适应不同屏幕尺寸。
条件编译：由于 uni-app 支持多个平台，所以提供了条件编译功能。开发者可以通过条件编译在特定平台上使用平台特有的 API 或组件，从而实现平台相关的功能。
（总）总的来说，uni-app 和 Vue.js 的组件在很多方面是相似的，但是由于 uni-app 需要支持多个平台，所以在一些细节上会有所区别，平时开发时要注意平台相关的组件、生命周期、样式的差异。
可以展开 uni-app 生命周期，分为三部分：
我们的购物车页面需要借助?onShow?生命周期钩子获取最新的购物车列表数据，因为在商品详情页中进行添加购物车操作。添加成功后，打开购物车页面应展示最新的购物车数据。因此，每次?购物车页面 onShow?时，都应获取最新的购物车列表数据。收货地址列表页同理。
（总）小程序是一个独立的应用平台，有自己的一套生命周期，如 onLaunch、onShow、onHide，在 uni-app 项目还支持 Vue 的生命周期钩子。
（分）
onLaunch?生命周期钩子在 App.vue 根组件中就类似?created?或?mounted?钩子。
Vue.js?本身并没有提供?onShow?和?onHide?生命周期钩子，但是可以通过监听页面的?visibilitychange?事件来模拟实现这两个钩子。从而在一定程度上模拟 onShow 和 onHide 的行为。
（总）我们的 uni-app 项目主要是做小程序端，所以我们的页面组件优先使用小程序的生命周期钩子，也就是 onShow、onHide 这些，普通组件就用 Vue 生命周期钩子。
参考代码
mounted() {
document.addEventListener('visibilitychange', this.handleVisibilityChange);
},
beforeDestroy() {
document.removeEventListener('visibilitychange', this.handleVisibilityChange);
},
methods: {
handleVisibilityChange() {
if (document.hidden) {
this.onHide();
} else {
this.onShow();
}
},
onShow() {
console.log('页面显示');
},
onHide() {
console.log('页面隐藏');
}
}这样，当页面变为隐藏状态时，onHide?方法会被调用；当页面重新显示时，onShow?方法会被调用。
注意，在组件销毁时，要记得移除?visibilitychange?事件监听，以避免内存泄漏。
类似问题
- uni-app 与 Vue 区别？
- 在 uni-app 中实现自定义组件，有什么区别吗？
- 在 uni-app 中如何处理 CSS 样式的差异？
- 请介绍 uni-app 的生命周期函数，以及它们在不同平台下的差异。
- 谈谈 uni-app 组件的生命周期，以及它们与 Vue.js 组件生命周期的异同。
- 如何实现 uni-app 中的跨平台开发？请谈谈 uni-app 的条件编译。
?
（总）uni-app 的?uni.request?是一个用于发起网络请求的 API。它是 uni-app 框架内置的网络请求库，兼容多端（包括小程序、App、H5 等），无需额外安装。使用?uni.request?可以发起 GET、POST、PUT、DELETE 等 HTTP 请求。
（分）与 axios 相比，uni.request?的优缺点如下：
优点：
缺点：
uni.request?中需要手动判断状态码。（总）其实在我们的项目中也借鉴 axios 的思想，基于?uni.request?封装了自己的网络请求库，可以用于处理常见的请求场景。
（总）我们自己实现了一个基于 uni-app 的网络请求库。通过添加拦截器，实现了对请求前处理和请求后的处理，提高了代码的复用性。
（分）具体来说，代码实现了以下功能：
request?请求和?uploadFile?文件上传。http?开头的请求 URL 自动拼接基础地址?baseURL。Authorization。http?函数，该函数返回一个 Promise 对象，支持泛型，方便处理返回数据的类型。resolve()?表示成功，并提取核心数据res.data。（总）我们借鉴 axios 的思想，基于?uni.request?封装了自己的网络请求库，可以用于处理常见的请求场景。
参考代码
import { useMemberStore } from '@/stores'
// 服务器基地址
const baseURL = 'https://pcapi-xiaotuxian-front-devtest.itheima.net'
// 添加拦截器
const httpInterceptor = {
// 拦截前触发
invoke(options: UniApp.RequestOptions) {
// 1. 非 http 开头需拼接地址
if (!options.url.startsWith('http')) {
options.url = baseURL + options.url
}
// 2. 请求超时, 默认 60s
options.timeout = 10000
// 3. 添加小程序端请求头标识
options.header = {
...options.header,
'source-client': 'miniapp',
}
// 4. 添加 token 请求头标识
const memberStore = useMemberStore()
const token = memberStore.profile?.token
if (token) {
options.header.Authorization = token
}
},
}
// 添加拦截器
uni.addInterceptor('request', httpInterceptor)
uni.addInterceptor('uploadFile', httpInterceptor)
type Data<T> = {
code: string
msg: string
result: T
}
// 2.2 添加类型，支持泛型
export const http = <T>(options: UniApp.RequestOptions) => {
// 1. 返回 Promise 对象
return new Promise<Data<T>>((resolve, reject) => {
uni.request({
...options,
// 响应成功
success(res) {
// 状态码 2xx， axios 就是这样设计的
if (res.statusCode >= 200 && res.statusCode < 300) {
// 2.1 提取核心数据 res.data
resolve(res.data as Data<T>)
} else if (res.statusCode === 401) {
// 401错误 -> 清理用户信息，跳转到登录页
const memberStore = useMemberStore()
memberStore.clearProfile()
uni.navigateTo({ url: '/pages/login/login' })
reject(res)
} else {
// 其他错误 -> 根据后端错误信息轻提示
uni.showToast({
icon: 'none',
title: (res.data as Data<T>).msg || '请求错误',
})
reject(res)
}
},
// 响应失败
fail(err) {
uni.showToast({
icon: 'none',
title: '网络错误，换个网络试试',
})
reject(err)
},
})
})
}?
（总）其实 Hbuilder 我也有使用，不过最终体验下来还是选择了?VS Code?。
（分）我主要是有 2 个出发点考虑：
（总）其实还是我自己不想换开发工具，也不是刻意去比较两者谁好谁坏，哪一个编辑器自己用起来更习惯，能提高效率就用哪个。
温馨提示：Hbuilder 编辑器对 TS 的类型支持还不够完善，就好比 image 组件的 mode 取值写错了，之前用 Hbuilder 的时候校验不出来，而 VSCode 可以校验出错误，期待 Hbuilder 的进步。（如果面试官特别喜欢用 Hbuilder 就不建议提这个，尊重每个人的喜好）
如果面试官对 VS Code 的配置感兴趣，可以继续展开如何配置：
（总）用 VS Code 开发 uni-app 进行 3 步配置就可以了，也可以给面试官您分享一下：
（分）
安装 uni-app 插件
JSON 注释报错问题，设置文件关联即可，把?manifest.json?和?pages.json?设置为?jsonc
针对 TS 项目增加 TS 类型校验
pnpm i -D miniprogram-api-typings @uni-helper/uni-app-typestsconfig.json（总） HBuilder 也有它的优点，针对 uni-app 开发的专属功能、内置的调试工具，如果要打包和调试 App 端还要用到 Hbuilder 工具。选择哪一个编辑器写代码取决于开发者的个人喜好和项目需求。
?
我们项目的首页，订单详情页，个人信息页，等页面都用到了自定义导航栏，核心步骤如下：
pages.json?文件中按需设置?navigationStyle?为?"custom"?。getCurrentPages?获取路由栈，如果路由栈数组长度只有 1，通过?switchTab?返回首页，其他情况应该是用?navigateBack?返回上一页。如果自定义导航栏要求不高，其实也可以直接用 uni-ui 的?uni-nav-bar?，或者从?插件市场?中下载与项目要求接近的插件，再进行二次开发适配自己的项目。
我们项目中的自定义导航栏其实还做了安全区的样式适配，通过?uni.getSystemInfoSync()?获取顶部到安全区的距离，在模板中绑定行内样式，避免刘海屏或前置摄像头遮挡导航栏标题或 logo 等重要内容。
如果左侧按钮要对齐右侧的胶囊，还可以通过?wx.getMenuButtonBoundingClientRect?获取胶囊信息实现对齐。
参考代码
// src/pages.json
{
"path": "pages/index/index",
"style": {
"navigationStyle": "custom" // 隐藏默认导航
}
}?
<!-- CustomNavbar.vue -->
<script setup lang="ts">
// 获取页面栈
const pages = getCurrentPages()
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
</script>
<template>
<!-- 顶部安全区占位 -->
<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<view class="wrap">
<navigator
v-if="pages.length > 1"
open-type="navigateBack"
class="back icon-left"
></navigator>
<navigator v-else url="/pages/index/index" open-type="switchTab" class="back icon-home">
</navigator>
<view class="title">
<!-- 插槽 -->
<slot>导航栏标题</slot>
</view>
</view>
</view>
</template>其实我们项目的订单详情页（或者某个页），给自定义导航栏加了滚动驱动动画，增强用户视觉效果：
scroll-view?滚动容器设置一个?id，用于绑定动画效果和滚动容器偏移量。id?绑定滚动容器，设置触发偏移量等信息。\
<script setup lang="ts">
// 获取屏幕边界到安全区域距离
const { safeAreaInsets } = uni.getSystemInfoSync()
// 获取页面栈
const pages = getCurrentPages()
// #ifdef MP-WEIXIN
// 获取当前页面实例，数组最后一项
const pageInstance = pages.at(-1) as any
// 页面渲染完毕，绑定动画效果
onReady(() => {
// 动画效果,导航栏背景色
pageInstance.animate(
'.navbar',
[{ backgroundColor: 'transparent' }, { backgroundColor: '#f8f8f8' }],
1000,
{
scrollSource: '#scroller',
timeRange: 1000,
startScrollOffset: 0,
endScrollOffset: 50,
},
)
})
// #endif
</script>
<template>
<!-- 自定义导航栏: 默认透明不可见, scroll-view 滚动到 50 时展示 -->
<view class="navbar" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
<view class="wrap">
<navigator
v-if="pages.length > 1"
open-type="navigateBack"
class="back icon-left"
></navigator>
<navigator v-else url="/pages/index/index" open-type="switchTab" class="back icon-home">
</navigator>
<view class="title">订单详情</view>
</view>
</view>
<scroll-view class="viewport" scroll-y enable-back-to-top id="scroller">
...滚动容器
</scroll-view>
</template>（总）其实代码优化和性能优化是一个持续进行的过程，我们的项目主要是做了以下的优化：
（分）根据自身理解，选其中几点回答即可，大部分其实在项目中都有体现：
wx:if）合理控制组件渲染：减少不必要的组件渲染。（空购物车，订单状态等，v-if 可以减少 DOM 树的大小，从而减少重绘成本，而 v-show 通过 CSS 来控制显示，适用于频繁切换的场景。）scroll-view?组件的?scroll?事件监听，注意 onPageScroll 的使用。（项目中没有使用 scroll 和 onPageScroll，如果一定要使用可以添加防抖?减少视图层频繁渲染，防抖和节流函数 lodash 都有现成的）（总）总的来说，性能优化是一个持续进行的过程，通过不断地优化和调整，提高项目的性能和用户体验。
理论上越多越好，按照自己的理解情况回答，回答时可提及项目中的业务场景适当展开。
如何在 uni-app 项目中使用使用防抖或节流函数。
pnpm i lodash，在 TS 项目中安装类型声明文件?pnpm i -D @types/lodash。debounce?防抖函数。debounce?函数包裹原事件函数并设置合理的延迟时间（结合真机调试取合适毫秒值）。参考代码
组合式 API 写法：
<script setup lang="ts">
import { throttle } from 'lodash'
import { ref } from 'vue'
// 响应式数据
const scrollTop = ref(0)
// 普通的事件函数
const onScroll2 = (ev: UniHelper.ScrollViewOnScrollEvent) => {
// 🔴触发频率非常高，视图层频繁渲染
scrollTop.value = ev.detail.scrollTop
}
// 添加节流的事件函数
const onScroll = throttle((ev: UniHelper.ScrollViewOnScrollEvent) => {
// 🟢在 100 秒内最多执行一次函数，更新视图层
scrollTop.value = ev.detail.scrollTop
}, 100)
</script>
<template>
<!-- 滚动容器 -->
<scroll-view scroll-y @scroll="onScroll">
<!-- 打印坐标 -->
<view style="position: fixed; top: 100rpx; left: 50rpx; background-color: pink">
scrollTop:{{ scrollTop }}
</view>
<view style="height: 5000rpx"> 内容 </view>
</scroll-view>
</template>选项式 API 写法：
<script lang="ts">
import { debounce } from 'lodash'
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
scrollTop: 0,
debouncedScroll: null as any,
}
},
created() {
// 防抖的处理函数，🟢适当延迟 50 毫秒后，再更新视图层
this.debouncedScroll = debounce(this.onScroll, 50)
},
unmounted() {
// 最好是在组件卸载时,清除掉防抖计时器
this.debouncedScroll.cancel()
},
methods: {
// 普通的事件处理函数
onScroll(ev: UniHelper.ScrollViewOnScrollEvent) {
this.scrollTop = ev.detail.scrollTop
},
},
})
</script>
<template>
<!-- 滚动容器 -->
<scroll-view scroll-y @scroll="debouncedScroll">
<!-- 打印坐标 -->
<view style="position: fixed; top: 100rpx; left: 50rpx; background-color: pink">
scrollTop:{{ scrollTop }}
</view>
<view style="height: 5000rpx"> 内容 </view>
</scroll-view>
</template>(总) 防抖（debounce）和节流（throttle）函数在处理高频触发事件时都非常实用。
debounce（防抖）函数：该函数会从上一次被调用后，延迟?wait?毫秒后调用func?函数。
throttle （节流）函数：在?wait?秒内最多执行?func?一次的函数。
根据自身理解，选其中几点回答即可：
（分 1）防抖（debounce）函数在以下应用场景中非常实用：
（分 2）节流（throttle）函数在以下应用场景中非常实用：
（总）虽然防抖和节流的应用场景看似有所重叠，但它们的工作原理和应用场景有所不同：
防抖（debounce）：当事件触发后，防抖函数会等待一定时间（设定的延迟时间），如果在这段时间内事件没有再次触发，则执行事件处理函数。如果在这段时间内事件再次触发，那么重新开始等待延迟时间。简单来说，防抖就是让事件处理函数在事件触发后的一段时间内不执行，只有当事件停止触发一段时间后，才会执行。
节流（throttle）：节流函数会在一定时间间隔内执行事件处理函数，即使在这段时间内事件多次触发，也只会执行一次事件处理函数。简言之，节流就是让事件处理函数以固定的频率执行。
它们在不同的场景下有各自的优势：
防抖适用于需要等待一段时间后才执行的场景，如：搜索框输入实时搜索、按钮点击避免重复提交等。这些场景中，只关心事件触发的最后一次，而不关心事件在中间的过程。
节流适用于需要以一定频率执行的场景，如：滚动加载、窗口大小调整、鼠标移动监控等。这些场景中，关心事件在整个过程中的表现，而不仅仅是最后一次触发。
总结：防抖关注事件触发后的延迟执行，节流关注事件在整个过程中以固定频率执行。在选择使用防抖或节流时，需要根据具体的应用场景和需求来决定。
类似问题
- 请谈谈如何在 uni-app 中实现页面的按需加载？
- 请谈谈防抖和节流的理解和应用场景？
参考首页的下拉刷新，猜你喜欢组件和热门推荐页的上拉加载分页。
我们是通过?scroll-view?组件 实现的下拉刷新，步骤如下：
refresher-enabled?属性。@refresherrefresh?事件。refresher-triggered?属性，用于关闭动画的。Promise.all()?等所有请求都结束了，再关闭动画<script setup lang="ts">
// 当前下拉刷新状态
const isTriggered = ref(false)
// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
// 开始动画
isTriggered.value = true
// 加载数据
await Promise.all([getHomeBannerData(), getHomeCategoryData(), getHomeHotData()])
// 关闭动画
isTriggered.value = false
}
</script>
<template>
<!-- 滚动容器 -->
<scroll-view
refresher-enabled
@refresherrefresh="onRefresherrefresh"
:refresher-triggered="isTriggered"
scroll-y
>
....
</scroll-view>
</template>?
上拉加载更多其实就是分页加载，主要步骤如下。
pageParams?对象，存储分页参数，包括页码?page?和每页数据量?pageSize。finish?响应式引用，表示是否已加载完所有数据。scroll-view?组件绑定?@scrolltolower?事件。finish?标记，并提醒用户。<script setup lang="ts">
// 分页参数
const pageParams: Required<PageParams> = {
page: 1,
pageSize: 10,
}
// 猜你喜欢的列表
const guessList = ref<GuessItem[]>([])
// 已结束标记
const finish = ref(false)
// 获取猜你喜欢数据
const getHomeGoodsGuessLikeData = async () => {
// 退出分页判断
if (finish.value === true) {
return uni.showToast({ icon: 'none', title: '没有更多数据~' })
}
const res = await getHomeGoodsGuessLikeAPI(pageParams)
// 数组追加
guessList.value.push(...res.result.items)
// 分页条件
if (pageParams.page < res.result.pages) {
// 页码累加
pageParams.page++
} else {
finish.value = true
}
}
// 重置数据
const resetData = () => {
pageParams.page = 1
guessList.value = []
finish.value = false
}
// 组件挂载完毕
onMounted(() => {
getHomeGoodsGuessLikeData()
})
</script>
<template>
<!-- 滚动容器 -->
<scroll-view @scrolltolower="onScrolltolower" scroll-y>
<!-- 猜你喜欢列表 -->
<view class="guess">
<navigator
class="guess-item"
v-for="item in guessList"
:key="item.id"
:url="`/pages/goods/goods?id=${item.id}`"
>
<image class="image" mode="aspectFill" :src="item.picture"></image>
<view class="name"> {{ item.name }} </view>
<view class="price">
<text class="small">￥</text>
<text>{{ item.price }}</text>
</view>
</navigator>
</view>
<view class="loading-text">
{{ finish ? '没有更多数据~' : '正在加载...' }}
</view>
</scroll-view>
</template>在我们项目的个人信息页，收货地址表单页等页面都涉及到表单数据的收集。
（总）在 uni-app 中使用的是?<input>、<radio>?、<checkbox>?和?<picker>?等组件，能兼容不同平台。
（分）
input?支持?v-model?双向绑定，收集数据比较便利。<radio>?、<checkbox>?和?<picker>?等不支持?v-model?指令，可以使用?:value?和?@change?代替?v-model?来实现类似的效果。（总）?小程序端的表单组件具有一些特有的属性，外观和功能都有些差异，如?input?组件的?type?属性支持的值与网页端有所不同。例如，小程序端的?input?组件有一个?idcard?类型，而网页端没有。所以不要完全凭借网页端的经验处理小程序的表单，尽管部分表单组件的名称和网页端同名，也要应该要查阅 uni-app 组件部分的文档了解差异。
参考代码
<script setup lang="ts">
import { ref } from 'vue'
const switchValue = ref(false)
const onSwitchChange = (ev: UniHelper.SwitchOnChangeEvent) => {
switchValue.value = ev.detail.value
}
</script>
<template>
<view>
<switch :value="switchValue" @change="onSwitchChange" />
</view>
</template>（总）在这个例子中，我们使用?ref?函数创建了一个名为?switchValue?的响应式引用，并使用?:value?将?switchValue?的值传递给?<switch>?组件。我们还定义了一个名为?onSwitchChange?的函数，它在开关状态发生变化时被?@change?事件监听器调用，从而根据事件对象中的?detail.value?更新?switchValue?的值。
项目中我们还通过?uni-forms?实现了表单的校验。
以下是使用 uni-forms 实现表单校验的具体步骤：
ref?函数创建表单数据对象?form?和验证规则对象?rules。<uni-forms>?组件上设置?:model?和?:rules?属性，分别绑定到?form?和?rules。<uni-form-item>?组件，并设置?name?属性。在表单项内部使用?<input>?组件，并使用?v-model?指令进行双向数据绑定。ref?函数创建一个名为?formRef?的引用，将其设置为?<uni-forms>?组件的?ref?属性。onSubmit?的函数，在此函数内部使用?formRef.value.validate()?方法进行表单验证。根据验证结果执行相应的逻辑（例如，提交表单或显示错误提示）。@tap?事件监听器，绑定到?onSubmit?函数。<script setup lang="ts">
import { ref } from 'vue'
const form = ref({
username: '',
password: '',
})
const rules: UniHelper.UniFormsRules = {
username: {
rules: [{ required: true, errorMessage: '用户名不能为空' }],
},
password: {
rules: [{ required: true, errorMessage: '密码不能为空' }],
},
}
const formRef = ref<UniHelper.UniFormsInstance>()
const onSubmit = async () => {
try {
const result = await formRef.value?.validate!()
console.log('校验通过，提交数据：', result)
} catch (error) {
console.log('校验未通过：', error)
}
}
</script>
<template>
<view>
<uni-forms :model="form" :rules="rules" ref="formRef">
<uni-forms-item label="用户名：" name="username">
<input v-model="form.username" placeholder="请输入用户名" />
</uni-forms-item>
<uni-forms-item label="密码:" name="password">
<input password v-model="form.password" placeholder="请输入密码" />
</uni-forms-item>
<view>
<button @tap="onSubmit">提交</button>
</view>
</uni-forms>
</view>
</template>类似问题
- 在 uni-app 中，如何处理不同平台下的表单处理差异？
?
（总）在遇到问题时，我一般都是参考官方文档、社区资源和其他开发者的经验。
（分）根据自身理解，选其中几点回答即可：
（总）其实 uni-app 官方文档记录了大量的跨平台兼容性问题和解决方案，uni-app 插件市场有大量插件，同时 uni-app 社区也有其他开发者分享的经验，也可以在 uni-app 社区提问题，以找到合适的解决方案。最后，保持良好的编码规范和项目结构，可以降低维护成本，提高开发效率。
（总）我们团队是使用 ESLint、Prettier 和 Husky 来确保代码质量和一致性：
（分）根据自身理解，选其中几点回答即可：
（总）总之，通过遵循统一的规范，团队可以更高效地开发和维护项目。
可以谈谈在 uni-app 项目中是如何应用 ESLint、Prettier 和 Husky 的，以及你遇到的一些挑战和解决方法。
（总）这些配置是由团队负责人制定，当然也可以由你自己配置，在小兔鲜儿的项目中已全部配置。
（分）具体步骤可以如下：
"lint": "eslint --ext .js,.vue,.ts --fix"。在应用这些工具时，其实也遇到了的一些挑战：
通过克服这些挑战，我们可以在 uni-app 项目中顺利地应用 ESLint、Prettier 和 Husky，确保代码质量和团队协作的高效性。
参考配置
?
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
extends: [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier', // 遇到的挑战2: ESLint、Prettier 存在冲突
],
// 遇到的挑战1: 小程序全局变量
globals: {
uni: true,
wx: true,
WechatMiniprogram: true,
getCurrentPages: true,
UniApp: true,
UniHelper: true,
},
parserOptions: {
ecmaVersion: 'latest',
},
rules: {
// 遇到的挑战2: ESLint、Prettier 存在冲突
'prettier/prettier': [
'warn',
{
singleQuote: true,
semi: false,
printWidth: 100,
trailingComma: 'all',
endOfLine: 'auto',
},
],
// 遇到的挑战3: 部分 ESLint 规则与项目需求不符
'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 H5
console.log('这段代码只编译到H5端')
// #endif
// #ifdef MP-WEIXIN
console.log('这段代码只编译到微信小程序端')
// #endifconst { osName } = uni.getSystemInfoSync()?来判断当前平台，然后编写针对不同平台的代码逻辑。例如：// 获取系统名称
const { osName } = uni.getSystemInfoSync()
if (osName === 'ios') {
console.log('ios平台执行的逻辑')
} else if (osName === 'android') {
console.log('android平台执行的逻辑')
}总结： 条件编译和平台差异化处理是 uni-app 为解决多平台兼容性问题提供的两种方法。条件编译更加常见，在编译阶段根据预设条件对代码进行不同分支的编译，而平台差异化处理是在运行时根据当前平台执行不同的代码逻辑。根据项目需求和场景，可以灵活选择使用这两种方法。
条件编译在 uni-app 中有很多应用场景，主要用于处理不同平台间的差异和兼容性问题。以下是一些常见的应用场景：
// #ifdef MP-WEIXIN
// 微信小程序登录
const { code } = wx.login()
// #endif
// #ifdef H5
// H5平台登录，如手机号+验证码
// ...
// #endif// #ifdef H5
navigator.geolocation.getCurrentPosition((position) => {
// H5获取地理位置
})
// #endif
// #ifdef MP-WEIXIN
wx.getLocation({
type: 'wgs84',
success(res) {
// 微信小程序获取地理位置
},
})
// #endifpicker组件和 H5 平台的select元素。可以使用条件编译针对不同平台提供不同的 UI 组件。<template>
<!-- #ifdef H5 -->
<select>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
</select>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<picker>
<view>Option 1</view>
<view>Option 2</view>
</picker>
<!-- #endif -->
</template><template>
<!-- #ifdef H5 -->
<img data-fancybox="gallery" src="/static/img/logo.png" />
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<image src="/static/img/logo-weixin.png" />
<!-- #endif -->
</template>总之，条件编译在 uni-app 开发过程中具有广泛的应用场景，主要用于解决不同平台间的差异和兼容性问题。根据具体需求，可以灵活运用条件编译来实现适配不同平台的功能和表现。
类似问题
问：如何在 uni-app 的组件中实现跨平台逻辑？
问：如果区分 ios 端和 android 端执行不同的业务？