一、Uniapp 如何实现条件编译?不同平台的条件编译标识符示例
通过预处理指令 #ifdef
或 #ifndef
包裹平台特定代码,例如:
arduino
#ifdef H5
console.log("仅H5平台执行");
#endif
标识符示例:H5
(Web端)、MP-WEIXIN
(微信小程序)
二、Uniapp 应用生命周期与页面生命周期的区别
- 应用生命周期 :
onLaunch
(初始化)、onShow
(前台显示)、onHide
(进入后台)。 - 页面生命周期 :
onLoad
(加载)、onShow
(显示)、onReady
(渲染完成)、onUnload
(卸载)。
三、Uniapp 如何实现多端跨平台适配?
- 弹性布局与响应式单位 :使用
rpx
适配不同屏幕尺寸。 - 条件编译:针对平台差异编写特定代码。
- API 兼容性处理 :通过
uni.*
接口调用平台能力,如uni.getSystemInfo
获取设备信息。
四、Uniapp 中实现文件上传的 API 及参数格式
使用 uni.uploadFile
,参数示例:
php
uni.uploadFile({
url: '上传地址',
filePath: '文件路径',
name: '文件字段名',
success: (res) => { /* 回调处理 */ }
});
五、全局组件与页面组件的注册及使用区别
- 全局组件 :在
App.vue
中通过Vue.component()
注册,全应用可用。 - 页面组件 :通过
components
属性局部注册,仅当前页面可用8。
六、Uniapp 中本地数据存储的实现方式
- 同步存储 :
uni.setStorageSync('key', value)
和uni.getStorageSync('key')
。 - 异步存储 :
uni.setStorage()
和uni.getStorage()
。
七、Uniapp 性能优化的常见方法
- 减少
v-if
频繁切换 ,优先使用v-show
。 - 图片懒加载 :通过
lazy-load
属性实现。 - 分包加载:拆分主包体积,提升启动速度。
八、rpx、px、rem 等单位的区别及适用场景
- rpx:基于屏幕宽度的自适应单位(750rpx = 屏幕宽度)。
- px:绝对像素单位,适用于固定尺寸元素。
- rem:基于根节点字体大小的相对单位,常用于 H5 响应式布局。
九、Uniapp 的优缺点分析
- 优点:跨平台开发、学习成本低(Vue语法)、支持原生插件扩展。
- 缺点:部分原生功能需适配、Android 性能略逊于 iOS、社区资源较分散。
十、Uniapp 页面间数据传递的常用方法
- URL 参数传递 :
uni.navigateTo({ url: '/page?id=1' })
。 - 全局变量 :通过
Vue.prototype
或getApp()
共享数据。 - Vuex 状态管理:集中式存储多组件共享状态。