1. Uniapp 的跨平台原理是什么?
Uniapp 基于 Vue.js 语法,通过编译时将代码转换为各平台(小程序、H5、App等)的原生代码。例如,小程序会转为 wxml/wxss/js
,H5 转为 HTML/CSS/JS,App 通过 Weex 或原生渲染引擎处理,实现"一套代码,多端运行"。
2. Uniapp 中如何实现页面跳转?列举至少两种方式。
uni.navigateTo
:保留当前页面,跳转到新页面(可返回)。uni.redirectTo
:关闭当前页面,跳转到新页面(不可返回)。- 其他:
uni.switchTab
(切换 Tab 页)、uni.reLaunch
(重启到新页面)等。
3. Uniapp 的生命周期有哪些?应用生命周期和页面生命周期有何区别?
- 应用生命周期 :
onLaunch
(初始化)、onShow
(启动/从后台进入前台)、onHide
(进入后台)。 - 页面生命周期 :
onLoad
(加载)、onShow
(显示)、onReady
(渲染完成)、onHide
(隐藏)、onUnload
(卸载)。
区别:应用生命周期管理全局状态,页面生命周期管理单个页面的状态。
4. 如何在 Uniapp 中发起网络请求?
使用 uni.request
方法:
javascript
uni.request({
url: 'https://api.example.com/data',
method: 'GET',
success: (res) => { console.log(res.data); },
fail: (err) => { console.error(err); }
});
5. Uniapp 如何处理不同平台的样式或逻辑差异?
使用条件编译:
arduino
// #ifdef MP-WEIXIN
console.log('仅微信小程序生效');
// #endif
// #ifdef H5
console.log('仅H5生效');
// #endif
6. 如何实现全局状态管理?列举至少两种方式。
- Vuex :通过
store
管理全局状态。 - 全局变量 :在
App.vue
中定义全局变量,通过getApp().globalData
访问。 - 事件总线 :使用
uni.$on
、uni.$emit
跨组件通信。
7. Uniapp 中常用的 UI 组件库有哪些?
- uni-ui :官方扩展组件库(如
<uni-card>
、<uni-icons>
)。 - uView UI:第三方高性能组件库。
- Vant Weapp:适配小程序端的组件库(需条件编译)。
8. 如何优化 Uniapp 应用的性能?
- 减少
setData
频率和数据量。 - 使用图片懒加载(
<image lazy-load>
)。 - 分包加载(
subPackages
配置)。 - 避免频繁操作 DOM,善用
v-if
和v-show
。
9. 如何实现本地数据缓存?
使用 uni.setStorageSync
和 uni.getStorageSync
:
arduino
// 存储
uni.setStorageSync('key', 'value');
// 读取
const value = uni.getStorageSync('key');
// 删除
uni.removeStorageSync('key');
10. Uniapp 打包为 App 时需要注意什么?
- 配置应用图标(
manifest.json
中设置)。 - 处理原生功能(如摄像头、定位)需添加权限声明。
- 使用 HbuilderX 进行云打包或离线打包。
- 测试不同 Android/iOS 设备的兼容性。