刷刷题32(uniapp初级实际项目问题-1)

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.$onuni.$emit 跨组件通信。

7. Uniapp 中常用的 UI 组件库有哪些?

  • uni-ui ‌:官方扩展组件库(如 <uni-card><uni-icons>)。
  • uView UI‌:第三方高性能组件库。
  • Vant Weapp‌:适配小程序端的组件库(需条件编译)。

8. 如何优化 Uniapp 应用的性能?

  • 减少 setData 频率和数据量。
  • 使用图片懒加载(<image lazy-load>)。
  • 分包加载(subPackages 配置)。
  • 避免频繁操作 DOM,善用 v-ifv-show

9. 如何实现本地数据缓存?

使用 uni.setStorageSyncuni.getStorageSync

arduino 复制代码
// 存储
uni.setStorageSync('key', 'value');
// 读取
const value = uni.getStorageSync('key');
// 删除
uni.removeStorageSync('key');

10. Uniapp 打包为 App 时需要注意什么?

  • 配置应用图标(manifest.json 中设置)。
  • 处理原生功能(如摄像头、定位)需添加权限声明。
  • 使用 HbuilderX 进行云打包或离线打包。
  • 测试不同 Android/iOS 设备的兼容性。
相关推荐
NiceCloud喜云17 分钟前
Opus 4.8 的 Effort Control 怎么选:Low 到 Max 五档策略
android·java·大数据·前端·c++·python·spring
wordbaby1 小时前
React Native + RNOH:跨页面数据回传的最佳实践与避坑指南
前端·react native
GISer_Jing1 小时前
Three.js着色器编译机制深度解析
javascript·webgl·着色器
丷丩1 小时前
MapLibre GL JS第22课:查看本地GeoJSON
前端·javascript·map·mapbox·maplibre gl js
jiayong231 小时前
面试中遇到不熟悉问题的应对策略深度解析
面试·职场和发展
油炸自行车1 小时前
Claude Code 错误:API Error: 400 Failed to deserialize the JSON body into the
开发语言·javascript·json·trae·claude code·api error 400
Front思2 小时前
AI前端工程师需要具备能力+
前端·人工智能·ai
JAVA社区3 小时前
Java高级全套教程(十)—— SpringCloudAlibaba超详细实战详解
java·开发语言·spring cloud·面试·职场和发展
ZC跨境爬虫4 小时前
跟着 MDN 学CSS day_29:(掌握文本与字体样式的核心艺术)
前端·css·ui·html·tensorflow
李子琪。5 小时前
网络空间安全深度实战:CSRF 漏洞原理剖析与基于 Token 的纵深防御体系构建(全栈实验报告)
前端·安全·csrf