#UniApp篇:uni面试题

news2024/11/18 8:02:31

编译#ifdef #ifndef----夸端适配
uniapp工作原理—将vue.js的模版语法转换为各个平台所支持的原生组件，在通过引擎的渲染器将其渲染到各个平台上。

应用生命周期

https://zh.uniapp.dcloud.io/collocation/App.html#applifecycle

// 初始化完成时触发---全局只触发一次
onLanuch 
// 从后台进入前台显示
onShow
// 从前台进入后台或者切换tab
onHide
// 等页面的生命周期

页面的生命周期

// 监听页面初始化
onInit
// 监听页面加载
onLoad
// 监听页面显示
onShow
// 监听页面初次渲染完成
onUload //

组件生命周期

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestory
destoryed

数据缓存

// 同步缓存
  uni.setStorage({
    key: 'storage_key',
    data: 'hello',
    success: function () {
      console.log('success');
    }
  });

// 异步缓存
  uni.setStorageSync(key,data)
  try {
    uni.setStorageSync('storage_key', 'hello');
  } catch (e) {
    // error
  }

配置文件部分

// main.js 初始入口文件
// App.vue 应用配置
// pages.json 配置页面路由，导航台哦，选项卡等打包信息

路由和跳转

uni.navgateTo跳转页面 保留当前页面
uni.redirectTo销毁当前页 跳转到指定页面
uni.switchTab跳转至tab页面，并关闭其它所有非tabBar页面
uni.reLaunch销毁所有页面 跳转至指定页面
uni.navigateBack关闭当前页面返回上一页面

uniapp和vue和小程序之间的关系

UniApp 是一个基于 Vue.js 的跨平台开发框架，它可以将同一套代码编译成多个平台的小程序应用，开发者可以使用 Vue.js 的语法和特性来开发跨平台的应用程序，并且可以通过 UniApp 提供的统一规范和 API 来实现不同平台的功能。

说几个uniapp常用的组件

// view视图容器
// text文本
// button按钮
// image图片
// mapd地图
// swiper轮播图
// icon图标

tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。

传递参数的形式

1. URL 参数：
  将参数直接附加在 URL 的末尾，形成查询字符串的形式，例如 http://example.com/api?param1=value1&param2=value2。
  这种方式简单直接，适用于 GET 请求，但参数的长度有限制
2. body
3. 请求头 authorization
4.路径传参数
	将参数直接嵌入到 URL 路径中，通常用于 RESTful 风格的 API 设计中，表示资源的唯一标识符。
  例如 /api/users/:userId，其中 :userId 表示动态路径参数，可以在路由匹配时被实际的值替换。

Vue uni-app 小程序页面传递参数方式和区别

1. vue router-link router跳转 url拼接 query  params
2.uniapp 小程序通过页面跳转后面拼接参数 globalData

uniapp打包发布时候如何处理请求跨域问题

打包app(android/ios)不考虑跨域，因为app内的数据请求不受限
打包小程序需要在小程序后台配置合法域名
打包H5需要在上线服务器搭代理或者打包后的项目上传至同源服务器

uniapp开发需要注意什么

1. 如果使用了自定义导航栏，打包小程序或app时需要预留顶部手机状态条高度
2. 注意uniapp中api在各个平台的兼容性
3. 为了兼容多端运行，建议使用flex布局
4. 使用uniapp开发小程序注意代码包限制2M大小，必要时可以使用分包

Uni-app在非h5端上运行为什么要在架构上分为逻辑层和视图层
```
保持一致的开发体验和性能表现
```
描述一下在Uniapp中如何实现动态路由
上传文件—uni.uploadFile(obj)
获取地理位置—uni.getLocation(ob)
如何监听页面滚动—onPageScroll—页面在垂直方向已滚动的距离（单位px）

Uni-app分包策略

为什么
  微信小程序之所以需要分包，主要为了解决小程序官方限制了珠宝提及和总体积大小，如果应用体积超限，我们将不能发不到应用官方。

  微信小程序总体大小限制为 20 MB，即所有的代码文件、图片资源文件、音频文件等在上传时不得超过 20 MB。

怎么做
  第一步：pages.json
  "subPackages":[
    {
      "root":"packageA",  //分包的根目录
      "pages":[{"path":"detail/index"}]  //该分包下的所有页面
    }
  ]
  1. 使用subpackages进行分包路径声明，subpackages外的目录会被打到主包中
  2. tabBar里面的路径必须放到主包里面
  3. 不同的分包之间的资源不能相互应用，但都可以引用主包中的资源
  第二部： manifest.json中加入 "optimization": {"subPackages": true}
好处
  1。 提高首页加载速度；
  2. 优化性能 
  3. 分包预下载
  怎么分
  根据功能模块
  根据资源引用
  分包预下载配置 进入小程序某个页面时，框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度。 在pages.json文件的preloadRule节点中配置分包预下载规则，预下载的行为，会在进入指定的页面时触发。
  {
  "preloadRule": { // 分包预下载规则配置
    "packageA/detail/index": { // 触发分包预下载的页面路径
      // network 表示在指定的网络模式下进行预下载
      // 可选值为：all（不限网络） 和 wifi（仅 wifi 模式下进行预下载）
      // 默认值为：wifi
      "network": "all",
      // packages 表示进入页面后预下载哪些分包
      // 可以通过 root 或 name 指定预下载哪些分包
      // 如果是 __APP__ 表示下载所有包
      "packages": ["packageA"]
    }
  },
}