刷刷题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 设备的兼容性。
相关推荐
不能只会打代码8 分钟前
六十天前端强化训练之第十七天React Hooks 入门:useState 深度解析
前端·javascript·react.js
何包蛋H17 分钟前
分享vue好用的pdf 工具实测
javascript·vue.js·pdf
PagiHi23 分钟前
iWebOffice2015 中间件如何在Chrome107及之后的高版本中加载
前端·javascript·chrome·中间件·edge·js
曾富贵35 分钟前
【eslint 插件】导入语句排序
前端·eslint
NaZiMeKiY1 小时前
HTML5前端第八章节
前端·html·html5
远之喵1 小时前
js基础知识-考点
前端
SuperHua10011 小时前
还在用Pyinstaller打包python?试试轻量级的LightCode吧!
javascript·python
如此风景1 小时前
TS装饰器
前端
鱼樱前端1 小时前
React完整学习指南:从入门到精通(从根class->本hooks)16-19完整对比
前端·react.js
紫琪软件工作室1 小时前
ElementUI 级联选择器el-cascader启用选择任意一级选项,选中后关闭下拉框
前端·elementui·vue