UniApp 面试题 超基础

一：UniApp是什么 它有哪些特点

UniApp是基于Vue.js的跨平台的前端开发框架，一套代码可以在多个平台上运行（包括iOS、Android，H5，微信小程序）
特点：

1. 多端适配
2. vue语法
3. 多种适配方式：提供了条件编译平台适配
4. 原生性能支持

二：UniApp和Vue.js的关系

uniapp是基于vue.js构建的，所以uniapp可以使用vue.js的生命周期，模版语法等。但是uniapp有一些额外的api用于处理多端适配以及调用设备。

三：UniApp的路由如何实现

通过vue-router实现 每个页面都是一个vue文件 页面跳转通过uni.navigateTo、uni.redirectTo 等 API 来进行跳转。
uni.navigateTo：保留当前页面，跳转到目标页面，适合需要返回的场景。
uni.redirectTo：关闭当前页面，跳转到目标页面，适合不需要返回的场景。

四：UniApp如何处理跨平台样式

通过条件编译（根据不同平台 选择不同的样式）以及@media（针对不同屏幕尺寸）

<style>
  /* H5样式 */
  #ifdef H5
  .btn {
    background-color: blue;
  }
  #endif

  /* 微信小程序样式 */
  #ifdef MP-WEIXIN
  .btn {
    background-color: green;
  }
  #endif
</style>

<view class="btn">按钮</view>

 /* H5或设备屏幕宽度大于 600px 时的样式 */
  @media (min-width: 600px) {
    .container {
      padding: 30px;
    }

    .message {
      font-size: 18px;
    }
  }

  /* 小屏设备的样式（如小于 600px） */
  @media (max-width: 600px) {
    .container {
      padding: 10px;
      background-color: #e0e0e0;
    }

    .message {
      font-size: 14px;
    }
  }

五 UniApp的生命周期

1. onLoad 加载
2. onShow 页面显示 会执行多次 页面切换就会执行 可以刷新数据
3. onReady 页面初次渲染 只会执行一次 可以用来获取屏幕分辨率等
4. onHide 隐藏
5. onUnload 卸载

六 如何实现页面之间传值

url参数 vuex状态管理

使用 navigateTo 传值：

// 页面A跳转到页面B并传递参数
uni.navigateTo({
  url: '/pages/detail/detail?id=123'
});

onLoad(query) {
  console.log(query.id);  // 获取传递的参数
}

vuex

// store.js
export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
};

UniApp如何调用原生api

同伙uni对象 如 uni.getSystemInfo 获取设备信息，uni.request 发起网络请求等。

UniApp如何实现懒加载

组件懒加载： 使用 import() 动态导入组件，按需加载。

<template>
  <view>
    <button @click="loadComponent">加载组件</button>
    <!-- 动态加载的组件 -->
    <lazy-component v-if="isComponentLoaded" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      isComponentLoaded: false,  // 控制组件是否加载
    };
  },
  methods: {
    async loadComponent() {
      // 使用异步动态导入加载组件
      const component = await import('@/components/LazyComponent.vue');
      this.isComponentLoaded = true;
      this.$options.components = {
        LazyComponent: component.default,
      };
    },
  },
};
</script>

页面懒加载： 在 pages.json 配置中使用 “lazyload”: true，只有用户访问时才加载页面资源。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/detail/detail",
      "style": {
        "navigationBarTitleText": "详情",
        "lazyload": true
      }
    }
  ]
}

图片懒加载： 图片只有在滚动到视口时才加载，减少页面加载时间。