【Uniapp】前端面试题

Uniapp部分

文章目录

  • Uniapp部分
      • 1.Uniapp 的页面生命周期和 Vue 的生命周期有何区别?
          • 1)Vue 的生命周期
          • 2)Uniapp 的页面生命周期
          • 3)区别
      • 2.Uniapp的rpx转换px的公式?
      • 3.Uniapp的tabbar自定义,怎么实现突起home标?
          • 1)配置自定义 tabBar
          • 2)创建自定义 tabBar 组件
          • 3)突出显示“home”标
      • 4.Uniapp的tabbar自定义,怎么实现隐藏原生tabbar?
          • 1)配置 pages.json
      • 5.Uniapp页面跳转的方法?
          • 1)navigateTo(保留当前页面,跳转到应用内的某个页面)
          • 2)redirectTo(关闭当前页面,跳转到应用内的某个页面)
          • 3)reLaunch(关闭所有页面,打开到应用内的某个页面)
          • 4)switchTab(跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面)
          • 5)页面间传递参数
      • 6.Uniapp的生命周期钩子函数
          • 1)应用生命周期钩子函数
          • 2)页面生命周期钩子函数

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 中的createdmounted之间的阶段,但功能上有所不同,onLoad主要用于获取页面参数,而 Vue 的createdmounted更多是关于组件实例的创建和挂载。
    • Uniapp 的onShowonHide对应于页面的显示和隐藏状态变化,在 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文件中,设置tabBarcustom属性为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文件中,将tabBarcustom属性设置为true,表示使用自定义 tabBar。
    {
      "pages": [
        //...
      ],
      "tabBar": {
        "custom": true
      }
    }
    

二、设置页面样式

  • 在每个页面的样式文件中,可以设置pagepadding-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返回到上一页面或使用redirectToreLaunch跳转到其他页面时,当前页面会被卸载。
  • onPullDownRefresh:监听用户下拉刷新事件。需要在pages.json中配置enablePullDownRefreshtrue来开启下拉刷新功能。
  • onReachBottom:页面上拉触底事件的处理函数。
  • onShareAppMessage:用户点击右上角分享时触发。可以返回一个对象来自定义分享内容。
  • onPageScroll:监听页面滚动事件。

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

你可能感兴趣的:(前端八股文面试题,前端,uni-app,javascript)