【Uniapp】前端面试题

Uniapp部分

1.Uniapp 的页面生命周期和 Vue 的生命周期有何区别？

1）Vue 的生命周期

• beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。
• created：在实例创建完成后被立即调用。此时，实例已完成以下的配置：数据观测、属性和方法的运算、watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
• beforeMount：在挂载开始之前被调用。相关的 render 函数首次被调用。
• mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
• beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
• updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
• beforeDestroy：在实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed：在实例销毁之后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

2）Uniapp 的页面生命周期

• onLoad：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
• onShow：页面显示时触发。每次打开页面都会调用。
• onReady：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
• onHide：页面隐藏时触发。如 navigateTo 或底部 tab 切换到其他页面，当前页面会被隐藏。
• onUnload：页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时，当前页面会被卸载。

3）区别

• 名称和触发时机：
  • Uniapp 的页面生命周期名称和触发时机与 Vue 的组件生命周期不完全相同。例如，Uniapp 中的onLoad对应 Vue 中的created和mounted之间的阶段，但功能上有所不同，onLoad主要用于获取页面参数，而 Vue 的created和mounted更多是关于组件实例的创建和挂载。
  • Uniapp 的onShow和onHide对应于页面的显示和隐藏状态变化，在 Vue 中通常需要通过路由守卫或其他方式来实现类似的功能。
• 应用场景：
  • Vue 主要用于构建单页应用（SPA），其生命周期更多地围绕组件的创建、更新和销毁。
  • 而 Uniapp 用于构建多端应用，页面生命周期更侧重于页面在不同状态下的行为，例如页面加载、显示、隐藏和卸载等，以适应不同平台的特性和需求。
• 多端适配：
  • Uniapp 需要考虑多个平台的差异，其页面生命周期可能会根据不同平台进行一些特定的调整和优化。
  • 而 Vue 主要针对浏览器环境，相对来说平台差异较小。

2.Uniapp的rpx转换px的公式？

在 UniApp 中，rpx（responsive pixel）是一种响应式单位，它可以根据屏幕宽度进行自适应调整。px（pixel）是固定像素单位。

• rpx 转换为 px 的公式如下：
  px = rpx * (设备屏幕宽度 / 750)

通常情况下，UniApp 以 750rpx 作为设计稿的宽度标准。如果设计稿宽度为 750px，那么 1rpx 就等于 1px。当设备屏幕宽度变化时，rpx 的实际像素值会根据上述公式进行动态调整。

例如，在一个设备上屏幕宽度为 375px，如果有一个元素的宽度设置为 150rpx，那么转换为 px 的值为：
150 * (375 / 750) = 75px。

3.Uniapp的tabbar自定义，怎么实现突起home标？

1）配置自定义 tabBar

• 在项目的pages.json文件中，设置tabBar的custom属性为true，表示使用自定义 tabBar。

  {
    "pages": [
      //...
    ],
    "tabBar": {
      "custom": true
    }
  }
  

2）创建自定义 tabBar 组件

• 在项目中创建一个自定义 tabBar 组件，例如custom-tab-bar.vue。

  <template>
     <view class="custom-tab-bar">
       <view
         v-for="(item, index) in tabBarList"
         :key="index"
         :class="['tab-bar-item', activeIndex === index? 'active' : '']"
         @click="navigateToPage(index)"
       >
         <image
           v-if="item.iconPath"
           :src="activeIndex === index? item.selectedIconPath : item.iconPath"
         />
         <text>{{ item.text }}text>
       view>
     view>
   template>

   <script>
   export default {
     data() {
       return {
         tabBarList: [
           {
             pagePath: '/pages/index/index',
             iconPath: '/static/tabbar/icon1.png',
             selectedIconPath: '/static/tabbar/icon1_active.png',
             text: '首页'
           },
           // 其他 tabBar 项配置
         ],
         activeIndex: 0
       };
     },
     methods: {
       navigateToPage(index) {
         const pagePath = this.tabBarList[index].pagePath;
         uni.switchTab({ url: pagePath });
         this.activeIndex = index;
       }
     }
   };
   script>

   <style scoped>
  .custom-tab-bar {
     display: flex;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
     height: 50px;
     background-color: #fff;
     border-top: 1px solid #eee;
   }
  .tab-bar-item {
     flex: 1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
   }
  .active {
     color: #ff6600;
   }
   style>

3）突出显示“home”标

• 在自定义 tabBar 组件的data中添加一个标志变量，用于判断是否是“首页”选项。

  data() {
    return {
      //...
      isHomePage: false
    };
  },
  

• 在mounted生命周期钩子中，通过获取当前页面路径来判断是否是“首页”，并设置标志变量。

  mounted() {
    const currentPage = getCurrentPages()[getCurrentPages().length - 1].route;
    this.isHomePage = currentPage === '/pages/index/index';
  },
  

• 在模板中，根据标志变量来添加突出显示的样式。例如，可以使用一个特殊的图标或背景颜色来突出显示“home”标。

   <template>
     <view class="custom-tab-bar">
       <view
         v-for="(item, index) in tabBarList"
         :key="index"
         :class="['tab-bar-item', activeIndex === index? 'active' : '', isHomePage && index === 0? 'home-active' : '']"
         @click="navigateToPage(index)"
       >
         <image
           v-if="item.iconPath"
           :src="activeIndex === index? item.selectedIconPath : item.iconPath"
         />
         <text>{{ item.text }}text>
       view>
     view>
   template>

   <style scoped>
  .home-active {
     background-color: #ff6600;
     color: #fff;
   }
   //...
   style>

这里给大家推荐一个大佬的文章
http://t.csdnimg.cn/TuEC1

4.Uniapp的tabbar自定义，怎么实现隐藏原生tabbar？

1）配置 pages.json

• 在项目的pages.json文件中，将tabBar的custom属性设置为true，表示使用自定义 tabBar。

  {
    "pages": [
      //...
    ],
    "tabBar": {
      "custom": true
    }
  }
  

二、设置页面样式

• 在每个页面的样式文件中，可以设置page的padding-bottom属性，以避免页面内容被原生 tabBar 遮挡。因为原生 tabBar 通常占据一定的底部空间，隐藏后需要手动调整页面底部的布局。

  /* pages/index/index.vue 的样式 */
  page {
    padding-bottom: 50px; /* 根据实际情况调整这个值，以适应自定义 tabBar 的高度 */
  }
  

5.Uniapp页面跳转的方法？

1）navigateTo（保留当前页面，跳转到应用内的某个页面）

• 用法：

  uni.navigateTo({
    url: '/pages/destination-page/destination-page'
  });
  

• 特点：
  • 可以通过onLoad等生命周期函数中的options参数接收上一个页面传递过来的参数。
  • 跳转后可以通过navigateBack返回上一页。

2）redirectTo（关闭当前页面，跳转到应用内的某个页面）

• 用法：

  uni.redirectTo({
    url: '/pages/destination-page/destination-page'
  });
  

• 特点：
  • 不能通过navigateBack返回到原页面，因为原页面已被关闭。

3）reLaunch（关闭所有页面，打开到应用内的某个页面）

• 用法：

  uni.reLaunch({
    url: '/pages/destination-page/destination-page'
  });
  

• 特点：
  • 通常用于从登录页面跳转到首页等场景，关闭所有其他页面，只显示目标页面。

4）switchTab（跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面）

• 用法：

  uni.switchTab({
    url: '/pages/tab-bar-page/tab-bar-page'
  });
  

• 特点：
  • 只能跳转到在pages.json中配置的tabBar页面。

5）页面间传递参数

• 通过 URL 传递参数：
  • 在跳转时将参数拼接到 URL 中，例如：

uni.navigateTo({ 
  url: '/pages/destination-page/destination-page?param1=value1¶m2=value2' 
});

• 在目标页面的onLoad生命周期函数中接收参数：

  export default {
    onLoad(options) {
      console.log(options.param1);
      console.log(options.param2);
    }
  };

• 通过全局变量传递参数（不推荐，可能会导致数据混乱）：
  • 在一个页面中设置全局变量：
    uni.setStorageSync('globalParam', value);
  • 在另一个页面中获取全局变量：
    const value = uni.getStorageSync('globalParam');

6.Uniapp的生命周期钩子函数

UniApp 的生命周期钩子函数分为应用级别和页面级别。

1）应用生命周期钩子函数

• onLaunch：当 UniApp 初始化完成时触发（全局只触发一次）。
• onShow：当 UniApp 启动，或从后台进入前台显示时触发。
• onHide：当 UniApp 从前台进入后台时触发。
• onError：当 UniApp 报错时触发。

2）页面生命周期钩子函数

• onLoad：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。
• onShow：页面显示/切入前台时触发。
• onReady：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。
• onHide：页面隐藏/切入后台时触发。
• onUnload：页面卸载时触发。如使用navigateBack返回到上一页面或使用redirectTo、reLaunch跳转到其他页面时，当前页面会被卸载。
• onPullDownRefresh：监听用户下拉刷新事件。需要在pages.json中配置enablePullDownRefresh为true来开启下拉刷新功能。
• onReachBottom：页面上拉触底事件的处理函数。
• onShareAppMessage：用户点击右上角分享时触发。可以返回一个对象来自定义分享内容。
• onPageScroll：监听页面滚动事件。

此外，组件也有自己的生命周期钩子函数，与 Vue 的组件生命周期类似。