uniapp 面试题总结常考

uniapp

文件详情

├── pages                      # 页面文件夹
│   │── index                  # index文件夹
│   │   │── index.vue          # index页面
├── static                     # 静态资源(类似于图片 字体图标等)
│   │── logo.png               # 图片,视频或字体图标
├── unpackage                  # 存放打包输出的文件
├── App.vue                    # 项目根组件
├── main.js                    # 项目入口文件
├── manifest.json              # 应用的配置文件
├── pages.json                 # 页面存放目录  page属性中第一项为项目启动页
├── uni.scss                   # 整体控制应用的风格

globalStyle 属性

属性 类型 默认值 描述 平台差异说明
navigationBarBackgroundColor HexColor #F7F7F7 导航栏背景颜色(同状态栏背景色) APP与H5为#F7F7F7,小程序平台请参考相应小程序文档
navigationBarTextStyle String white 导航栏标题颜色及状态栏前景颜色,仅支持 black/white
navigationBarTitleText String 导航栏标题文字内容
navigationStyle String default 导航栏样式,仅支持 default/custom。custom即取消默认的原生导航栏,需看使用注意 微信小程序 7.0+、百度小程序、H5、App(2.0.3+)
backgroundColor HexColor #ffffff 下拉显示出来的窗口的背景色 微信小程序
backgroundTextStyle String dark 下拉 loading 的样式,仅支持 dark / light 微信小程序
enablePullDownRefresh Boolean false 是否开启下拉刷新,详见页面生命周期
onReachBottomDistance Number 50 页面上拉触底事件触发时距页面底部距离,单位只支持px,详见页面生命周期
backgroundColorTop HexColor #ffffff 顶部窗口的背景色(bounce回弹区域) 仅 iOS 平台
backgroundColorBottom HexColor #ffffff 底部窗口的背景色(bounce回弹区域) 仅 iOS 平台
titleImage String 导航栏图片地址(替换当前文字标题),支付宝小程序内必须使用https的图片链接地址 支付宝小程序、H5、APP
transparentTitle String none 导航栏整体(前景、背景)透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明 支付宝小程序、H5、APP
titlePenetrate String NO 导航栏点击穿透 支付宝小程序、H5
pageOrientation String portrait 横屏配置,屏幕旋转设置,仅支持 auto / portrait / landscape 详见 响应显示区域变化 App 2.4.7+、微信小程序
animationType String pop-in 窗口显示的动画效果,详见:窗口动画 App
animationDuration Number 300 窗口显示动画的持续时间,单位为 ms App
app-plus Object 设置编译到 App 平台的特定样式,配置项参考下方 app-plus App
h5 Object 设置编译到 H5 平台的特定样式,配置项参考下方 H5 H5
mp-alipay Object 设置编译到 mp-alipay 平台的特定样式,配置项参考下方 MP-ALIPAY 支付宝小程序
mp-weixin Object 设置编译到 mp-weixin 平台的特定样式 微信小程序
mp-baidu Object 设置编译到 mp-baidu 平台的特定样式 百度小程序
mp-toutiao Object 设置编译到 mp-toutiao 平台的特定样式 字节跳动小程序
mp-qq Object 设置编译到 mp-qq 平台的特定样式 QQ小程序
usingComponents Object 引用小程序组件,参考 小程序组件
renderingMode String 同层渲染,webrtc(实时音视频) 无法正常时尝试配置 seperated 强制关掉同层 微信小程序
leftWindow Boolean true 当存在 leftWindow 时,默认是否显示 leftWindow
以下是一些常见的 UniApp 面试题: 1. 请简要介绍 UniApp 及其特点。 UniApp 是一个基于 Vue.js 的跨平台应用开发框架,可以使用 Vue.js 的开发语法编写一次代码,然后通过编译生成可以在多个平台(包括 iOS、Android、H5 等)上运行的应用。其特点包括跨平台(使用相同代码基底构建多平台应用,避免重复开发)、高性能(运行时使用原生渲染技术,接近原生应用性能)、开放生态(支持原生插件和原生能力扩展,可调用设备硬件功能和第三方原生 SDK)、开发便捷(提供丰富组件和开发工具,简化开发和调试流程)[^1]。 2. 请解释 UniApp 中的生命周期钩子函数及其执行顺序。 UniApp 组件的生命周期函数类似于 Vue.js 组件,如 onLoad、onShow、onReady、onHide、onUnload 等。一般执行顺序是:页面初始化时先触发 onLoad,页面初次渲染完成触发 onReady,页面显示触发 onShow,页面隐藏触发 onHide,页面销毁触发 onUnload 等[^1]。 3. 如何在 UniApp 中进行页面间的跳转? 可以使用 UniApp 提供的 API,如 uni.navigateTo、uni.redirectTo、uni.switchTab、uni.reLaunch 等。例如: ```javascript uni.navigateTo({ url: '/pages/detail/detail' }); ``` 4. UniApp 中如何实现数据绑定和响应式编程? UniApp 使用 Vue.js 的响应式系统,通过在页面中使用 data 选项定义数据,通过 v-bind、v-model 等指令实现数据绑定。例如: ```html <input v-model="message" /> <p>{{ message }}</p> ``` ```javascript export default { data() { return { message: 'Hello, uniapp!' }; } } ``` 5. 与 React Native、Flutter 相比,UniApp 的优势和劣势分别是什么? 优势方面,对于前端开发者,UniApp 的学习曲线较平缓,因为使用的 Vue.js 本身较容易上手;且 UniApp 与微信小程序、支付宝小程序等国内生态深度集成,适合国内市场。劣势方面,Flutter 的渲染性能较高,在对渲染性能要求极高的场景下,UniApp 可能不如 Flutter [^1][^2]。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值