UniApp 是一个使用 Vue.js 开发跨平台应用的前端框架，允许开发者编写一次代码，发布到 iOS、Android、各种小程序平台及Web应用。以下是一些可能会在 UniApp 前端面试中问到的频率较高的问题以及答案：
一、uniapp与原生小程序
1. UniApp 与原生小程序开发区别
答案：UniApp 允许使用 Vue.js 开发，而原生小程序需要使用各平台指定的语言和框架。UniApp 提供了一套自己的组件和 API，使得代码可以跨平台运行，而原生开发则需要针对每个平台编写特定代码。
2. UniApp 的性能如何，和原生开发相比呢？
答案：UniApp 在多数场景下性能接近原生开发，通过编译优化和硬件加速，可以在多个平台上提供流畅的体验。但对于一些特别性能密集型的应用程序，原生开发可能会提供更好的性能。
二、uniapp 生命周期
1. Uniapp 应用的生命周期
一、应用的生命周期
1.onLaunch——当uni-app 初始化完成时触发（全局只触发一次）
2.onShow——当 uni-app 启动，或从后台进入前台显示
3.onHide——当 uni-app 从前台进入后台
4.onError——当 uni-app 报错时触发
5.onUniNViewMessage——对 nvue 页面发送的数据进行监听，可参考 nvue 向 vue 通讯
6.onUnhandledRejection——对未处理的 Promise 拒绝事件监听函数（2.8.1+）
7.onPageNotFound——页面不存在监听函数
8.onThemeChange——监听系统主题变化
2. UniApp 中的生命周期钩子函数及其执行顺序
答案：在 UniApp 中，每个页面和组件都有一系列的生命周期钩子函数，用于在特定的时机执行代码。以下是 UniApp 中常用的生命周期钩子函数及其执行顺序：
onLoad：页面/组件加载时触发。
onShow：页面/组件显示在前台时触发。
onReady：页面/组件初次渲染完成时触发。
onHide：页面/组件被隐藏在后台时触发。
onUnload：页面/组件被销毁时触发。
执行顺序为：onLoad -> onShow -> onReady -> onHide -> onUnload。
3. 页面的生命周期
1.onInit——监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad
2.onLoad——监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例
3.onShow——监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
4.onReady——监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
5.onHide——监听页面隐藏
6.onUnload——监听页面卸载
7.onResize——监听窗口尺寸变化
4.组件的生命周期
uni-app 组件支持的生命周期，与vue标准组件的生命周期相同
1.beforeCreate——在实例初始化之后被调用。
2.created——在实例创建完成后被立即调用。
3.beforeMount——在挂载开始之前被调用。
4.mounted——挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用$nextTickVue官方文档
5.beforeUpdate——数据更新时调用，发生在虚拟 DOM 打补丁之前。
6.updated——由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
7.beforeDestroy——实例销毁之前调用。在这一步，实例仍然完全可用。
8.destroyed——Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
三、uniapp 相关组件
1. UniApp 的组件化开发模型
答案：UniApp 的组件化模型类似于 Vue.js，支持组件的封装、复用和参数传递。它允许开发者将复杂的界面分解为独立可复用的组件。
2. Uniapp 中常用的指令语句
v-for：循环渲染 （注意加：key）
v-if ：控制元素的删除添加
v-show：控制元素的显示隐藏
v-model：双向数据绑定
v-on：事件绑定（简写@）
v-bind：属性绑定（简写：）
3. Uniapp 中常见的组件(说几个即可)
view：视图容器。
属性名 类型 默认值 说明
hover-class String none 指定按下去的样式类。当 >hover-class=“none” 时，没有点击态效果
hover-stop-propagation Boolean false 指定是否阻止本节点的祖先节点出现点击态，App、H5、支付宝小程序、百度小程序不支持（支付宝小程序、百度小程序文档中都有此属性，实测未支持）
hover-start-time Number 50 按住后多久出现点击态，单位毫秒
hover-stay-time Number 400 手指松开后点击态保留时间，单位毫秒
icon：图标
4. UniApp 中的全局组件和页面组件的区别。
答案：在 UniApp 中，全局组件和页面组件是两种不同类型的组件。
全局组件：在 App.vue 中注册的组件，可以在应用的所有页面和组件中使用。可以通过 Vue.component 方法进行全局注册。
页面组件：每个页面都有自己的组件，用于描述页面的结构和交互。页面组件只在当前页面有效，不能在其他页面中直接使用，但可以通过组件引用的方式进行复用。
5. UniApp 的全局状态管理？
答案：可以使用 Vuex 进行全局状态管理，或者利用 UniApp 支持的小程序全局变量和事件机制。
6. uniApp中如何实现表单的提交和验证？
答案：可以使用uni.request方法发送表单数据，使用正则表达式或内置的验证方法对表单进行验证。 示例代码：
// 表单提交
uni.request({
url: 'https://api.example.com/submit',
method: 'POST',
data: {
username: 'admin',
password: '123456'
},
success: (res) => { console.log(res.data); },
fail: (err) => { console.error(err); }}); // 表单验证
const username = 'admin';
const password = '123456';
if (!username || !password) {
console.log('用户名和密码不能为空');}
else if (username.length < 6 || username.length > 20) { console.log('用户名长度必须为6-20个字符');}
else if (password.length < 6 || password.length > 20) { console.log('密码长度必须为6-20个字符');}
else { console.log('表单验证通过');
}
7. UniApp支持npm第三方库吗？
答案：是的，UniApp 支持使用 npm 管理的第三方库，但需要考虑不同平台的兼容性。
8. UniApp 支持哪些类型的动画？
答案：UniApp 支持 CSS 动画和 JavaScript 动画，可以通过
transition组件和动画 API 实现。
9. UniApp 支持的服务端渲染（SSR）是什么？
答案：服务端渲染是指在服务器端生成应用的页面HTML，然后发送给客户端。UniApp 支持服务端渲染，有助于提高首屏加载速度和SEO优化。
10. UniApp 中的事件系统如何工作？
答案：UniApp 的事件系统允许开发者监听和触发事件，支持冒泡和捕获机制，可以用于组件间的通信。
四、uniapp 一些api
1. uniApp中实现下拉刷新和上拉加载更多
可以使用uni.onPullDownRefresh方法实现下拉刷新，
使用uni.onReachBottom方法实现上拉加载更多。
// 在页面的onPullDownRefresh方法中实现下拉刷新
onPullDownRefresh() { // 执行刷新操作 console.log('下拉刷新');
// 刷新完成后调用uni.stopPullDownRefresh()方法停止刷新 uni.stopPullDownRefresh();}
// 在页面的onReachBottom方法中实现上拉加载更多
onReachBottom() { // 执行加载更多操作 console.log('上拉加载更多');}
2. uniApp中如何获取用户地理位置信息？
可以使用uni.getLocation方法获取用户的地理位置信息。
uni.getLocation({
success: (res) => {
console.log(res.latitude, res.longitude);
},
fail: (err) => { console.error(err); }
});
3. uniApp中如何进行微信支付？
答案：可以使用uni.requestPayment方法进行微信支付，通过设置支付参数来实现支付功能。 示例代码：
uni.requestPayment({
provider: 'wxpay',
timeStamp: '1234567890',
nonceStr: 'abcdefg',
package: 'prepay_id=1234567890',
signType: 'MD5',
paySign: 'abcdefg',
success: (res) => { console.log(res); },
fail: (err) => { console.error(err); }
});
4. uniApp中如何进行音频的播放和控制？
答案：可以使用uni.createInnerAudioContext方法创建音频实例，通过调用实例的方法来实现音频的播放和控制。 示例代码：
// 创建音频实例
const audio = uni.createInnerAudioContext(); // 设置音频资源
audio.src = 'http://example.com/audio.mp3'; // 播放音频
audio.play(); // 暂停音频audio.pause(); // 停止音频
audio.stop();
5. uniApp图片的懒加载？
答案：可以使用uni.lazyLoadImage组件实现图片的懒加载，将图片的src属性设置为需要加载的图片地址。
<template>
<view>
<uni-lazy-load-image src="http://example.com/image.jpg">
</uni-lazy-load-image>
</view>
</template>
<script>
export default {
components: {
'uni-lazy-load-image': '@/components/uniLazyLoadImage.vue' }
};
</script>
6. uniApp中数据缓存
》答案：可以使用uni.setStorageSync方法进行数据缓存，将数据存储到本地缓存中。
// 存储数据到本地缓存
uni.setStorageSync('key', 'value');
// 从本地缓存中读取数据
const data = uni.getStorageSync('key');console.log(data); // 输出：value
7. UniApp 网络请求？
答案：UniApp 提供了
uni.request方法进行网络请求，它封装了不同平台的请求方式，使得开发者可以用统一的代码处理网络请求。可以使用uni.request方法发送网络请求，通过设置url、method、data等参数来实现不同的请求
uni.request({
url: 'https://api.example.com/data',
method: 'GET',
success: (res) => { console.log(res.data); },
fail: (err) => { console.error(err); }
});
8. UniApp 路由跳转？
可以使用uni.navigateTo、uni.redirectTo和uni.reLaunch等方法进行页面跳转。
其中，uni.navigateTo可以实现页面的普通跳转，
uni.redirectTo可以实现页面的重定向跳转，
uni.reLaunch可以实现关闭所有页面，打开到应用内的某个页面。
在某个页面的点击事件中跳转到其他页面
uni.navigateTo({ url: '/pages/otherPage/otherPage'});
9. uniApp中页面间的数据传递？
答案：可以使用uni.navigateTo方法的url参数中添加query参数来实现页面间的数据传递。 示例代码：
// 页面A跳转到页面B，并传递参数
uni.navigateTo({ url: '/pages/detail/detail?id=123'});
// 在页面B中获取传递的参数
export default {
onLoad(options) {
console.log(options.id);
// 输出：123 }
};
8. uniApp中如何获取设备信息？
答案：可以使用uni.getSystemInfo方法获取设备信息，包括设备型号、操作系统版本等。 示例代码：
uni.getSystemInfo({
success: (res) => { console.log(res.model, res.system); },
fail: (err) => { console.error(err); }
});
10. uniApp图片预览功能？
答案：可以使用uni.previewImage方法实现图片预览功能，通过设置urls参数来指定要预览的图片地址。 示例代码：
uni.previewImage(
{
urls:
['http://example.com/image1.jpg', 'http://example.com/image2.jpg']
}
);
11. uniApp页面的分享功能？
答案：可以使用uni.showShareMenu方法开启页面的分享功能，使用uni.onShareAppMessage方法设置分享的标题、路径等。 示例代码：
// 开启页面的分享功能uni.showShareMenu();
// 设置分享的标题、路径等
uni.onShareAppMessage(() => {
return {
title: '分享标题',
path: '/pages/index/index'
};
});
12.uniApp页面的分享到朋友圈功能？
答案：可以使用uni.showShareMenu方法开启页面的分享功能，然后使用uni.share方法设置分享的标题、路径等。 示例代码：
// 开启页面的分享功能
uni.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
});
// 设置分享的标题、路径等
uni.onShareAppMessage(() => {
return {
title: '分享标题',
path: '/pages/index/index' };});
uni.onShareTimeline(() => { return {
title: '分享标题',
path: '/pages/index/index' };
});
14. uniApp页面的登录授权？
答案：可以使用uni.login方法获取用户登录凭证，然后将凭证发送到后端进行验证，根据验证结果来判断用户是否登录。 示例代码：
// 获取用户登录凭证
uni.login({
success: (res) => { const code = res.code;
// 将凭证发送到后端进行验证
uni.request({
url: 'https://api.example.com/login',
method: 'POST',
data: {
code: code
},
success: (res) => {
console.log(res.data);
// 根据验证结果来判断用户是否登录
if (res.data.success) {
console.log('用户已登录');
} else {
console.log('用户未登录');
}
},
fail: (err) => {
console.error(err);
}
});
},
fail: (err) => {
console.error(err);
}});
12.uniApp实现页面的转发功能？
答案：可以使用uni.share方法实现页面的转发功能，通过设置title、path等参数来指定转发的标题和路径。
uni.share(
{
title: '转发标题',
path: '/pages/index/index'
}
);
二、uniapp编译、发布
1. 如何使用 UniApp 实现条件编译
答案：UniApp 中的条件编译允许开发者根据不同的平台或条件编译指令来编写不同的代码。在编译过程中，指定的平台或条件将会被处理，并最终生成对应平台的可执行代码。条件编译通过在代码中使用 #ifdef、#ifndef、#endif 等指令进行控制。例如，可以使用 #ifdef H5 来编写只在 H5 平台生效的代码块。
#ifdef
#ifdef指令用于包含一段代码，当指定的条件为真时。这里的“条件”通常是预定义的宏（如平台名称，如APP-PLUS、H5、MP-WEIXIN等），或者是开发者自定义的条件。
用法示例：
// 只在小程序中包含这段代码
#ifdef MP
console.log('这是在微信小程序中的代码');
#endif
#ifndef
#ifndef指令用于包含一段代码，当指定的条件为假时。同样，这里的“条件”可以是预定义的宏或者开发者自定义的条件。
用法示例：
// 除了在小程序中，在其他平台都包含这段代码
#ifndef MP
console.log('这是不在微信小程序中的代码');
#endif
#endif
#endif指令用于结束一个由#ifdef或#ifndef开始的条件编译块。每个#ifdef或#ifndef都需要一个对应的#endif来正确结束其代码块。
用法示例：
#ifdef MP
console.log('这是在微信小程序中的代码');
#endif
总结使用
使用场景：选择
#ifdef或#ifndef取决于你想要包含或排除代码块的条件。例如，你可能想在某个平台（如微信小程序）上运行特定的代码，而在其他平台上不运行。嵌套使用：你可以在一个条件编译块内部再嵌套另一个条件编译块，但每个
#ifdef或#ifndef都需要一个对应的#endif来正确结束。
2. UniApp支持哪些平台，各有特点
答案：UniApp 支持包括微信小程序、H5、React Native（Android）、iOS、以及各种快应用等多个平台。每个平台都有其特定的特点和限制，例如微信小程序有严格的审核流程和丰富的微信生态接口。
4. UniApp处理不同平台的屏幕尺寸和分辨率？
答案：可以使用 flex 布局、百分比宽度、视窗单位（vw/vh）以及媒体查询进行响应式设计，以适配不同屏幕尺寸和分辨率。
3. UniApp 中的跨平台兼容性问题和解决方案
答案：由于不同平台的差异，UniApp 在跨平台开发时可能会遇到一些兼容性问题。为了解决这些问题，可以采取以下几个方面的策略：
使用条件编译：根据不同的平台，编写对应平台的代码，使用条件编译指令来控制代码块的执行。
使用平台 API：UniApp 提供了一些平台 API，可以通过条件编译指令来使用特定平台的功能和能力。
样式适配：不同平台的样式表现可能有差异，使用 uni-app-plus 插件中的 upx2px 方法来进行样式适配，使得在不同平台上显示一致。
原生扩展：使用原生插件和扩展来调用设备的原生功能和第三方 SDK，以解决特定平台的需求。
5. UniApp 实现单元测试和端到端测试
答案：可以使用 Jest、Mocha 等测试框架，结合模拟和模拟库进行测试。对于端到端测试，可以使用 Appium 或者各平台提供的工具。
3. UniApp发布流程
答案：发布流程通常包括构建应用、生成各平台的代码、上传至相应平台并提交审核，审核通过后即可发布。
四、uniapp 怎么上架 IOS
uniapp怎么上架ios
在将uni-app项目上架到iOS App Store之前，你需要完成一系列的准备工作和遵循苹果的开发指南。下面是一些基本的步骤和注意事项，帮助你成功将uni-app项目部署到iOS平台：
1. 准备开发环境
确保你的开发环境已经准备好，包括：
- Xcode：安装最新版本的Xcode。
- MacOS：确保你的MacOS版本支持当前的Xcode。
- Apple Developer Account：注册并登录Apple Developer账号。
2. 创建iOS项目
使用HBuilderX或其他IDE（如VSCode配合插件）打开你的uni-app项目，然后按照以下步骤创建iOS项目：
- 打开项目，点击“发行”按钮。
- 选择“App iOS”选项。
- 填写App相关信息，如App名称、包名等。
- 点击“发行”按钮，HBuilderX会生成iOS项目。
3. 配置iOS项目
在Xcode中打开生成的iOS项目：
- 设置Bundle Identifier：确保Bundle Identifier与你的Apple Developer账号中的一致。
- 配置签名：选择正确的开发者账号进行签名。如果你还没有配置开发者账号，需要在Xcode的“Signing & Capabilities”中添加。
- 配置权限：根据应用需求配置相应的权限（如相机、麦克风等）。
- 配置信息：在
Info.plist文件中添加必要的信息，如隐私政策链接、应用图标等。
4. 测试应用
在Xcode中使用模拟器或真机进行测试，确保应用功能正常，没有明显的bug。
5. 提交App Store
- 准备App上架资料：包括应用的描述、截图、视频、定价信息等。
- 使用Application Loader或Xcode上传：你可以使用Application Loader（位于Xcode安装目录的
Application Loader文件夹中）或直接在Xcode中使用Product->Archive，然后选择Distribute App进行上传。 - 提交审核：上传后，登录Apple Developer账号，在App Store Connect中提交应用进行审核。
- 审核和发布：等待苹果审核团队审核你的应用。审核通过后，你可以选择发布应用或稍后发布。
6. 注意事项
- 确保遵守苹果的App Store审核指南。
- 定期更新你的应用以修复bug和增加新功能。
- 监控应用的用户反馈和性能问题，及时进行调整和优化。
通过以上步骤，你可以将uni-app项目成功地上架到iOS App Store。如果在过程中遇到具体的技术问题，可以查阅Apple的官方文档或寻求社区的帮助。
五、国际化
1. 多语言
明细： blog.csdn.net/leoxingc/ar…
npm install vue-i18n@next
