刷刷题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 设备的兼容性。
相关推荐
萌萌哒草头将军10 分钟前
⚡⚡⚡尤雨溪宣布开发 Vite Devtools,这两个很哇塞 🚀 Vite 的插件,你一定要知道!
前端·vue.js·vite
_一条咸鱼_35 分钟前
揭秘 Android TextInputLayout:从源码深度剖析其使用原理
android·java·面试
_一条咸鱼_36 分钟前
揭秘!Android VideoView 使用原理大起底
android·java·面试
_一条咸鱼_36 分钟前
深度揭秘!Android TextView 使用原理全解析
android·java·面试
游离状态的猫137 分钟前
JavaScript性能优化实战:从瓶颈定位到极致提速
开发语言·javascript·性能优化
小彭努力中38 分钟前
7.Three.js 中 CubeCamera详解与实战示例
开发语言·前端·javascript·vue.js·ecmascript
_一条咸鱼_40 分钟前
深度剖析:Android Canvas 使用原理全揭秘
android·java·面试
_一条咸鱼_40 分钟前
深度剖析!Android TextureView 使用原理全揭秘
android·java·面试