2024前端面试准备之uniapp篇

温暖前端
2,047 阅读6分钟

1. UniApp和其他跨平台框架（如React Native、Flutter）有什么区别？

  1. 语言和技术栈：UniApp使用Vue.js作为开发语言和技术栈，而React Native使用React.js，Flutter使用Dart语言。开发者可以根据自己的技术背景和偏好选择合适的框架。

  2. 性能和体验：UniApp的性能和用户体验相对较好，因为它使用原生渲染技术，可以实现更接近原生应用的性能表现。React Native和Flutter也有不错的性能表现，但在某些情况下可能会出现性能问题。

  3. 生态和社区支持：React Native和Flutter拥有更大的社区和生态系统，有更多的第三方库和插件可供开发者使用。UniApp的生态系统相对较小，但也在不断发展壮大。

  4. 开发成本和效率：UniApp可以实现一套代码同时运行在多个平台上，可以减少开发成本和提高开发效率。React Native和Flutter也具有类似的特点，但可能需要更多的学习和适应时间。

2. 如何在UniApp中实现页面跳转

  1. 使用uni.navigateTo()方法进行页面跳转，该方法可以实现页面之间的跳转，并且会保留当前页面的导航栏和返回按钮。
uni.navigateTo({
  url: 'pages/secondPage/secondPage'
});
  1. 使用uni.redirectTo()方法进行页面跳转，该方法可以实现页面之间的跳转，并且不会保留当前页面的导航栏和返回按钮。
uni.redirectTo({
  url: 'pages/secondPage/secondPage'
});
  1. 使用uni.reLaunch()方法进行页面跳转，该方法可以实现页面之间的跳转，并且会关闭所有页面，打开到用内的某个页面。
uni.reLaunch({
  url: 'pages/secondPage/secondPage'
});
  1. 使用uni.switchTab()方法进行页面跳转，该方法可以实现底部tab栏之间的切换。
uni.switchTab({
  url: 'pages/secondPage/secondPage'
});

3.UniApp中如何进行应用打包和发布

  1. 打包应用：在UniApp项目根目录下，运行命令npm run build，将项目代码编译成原生应用的代码。

  2. 配置应用信息：在manifest.json文件中配置应用的基本信息，包括应用名称、图标、启动页等。

  3. 生成应用包：根据目标平台选择相应的打包工具，如HBuilderX、Android Studio、Xcode等，进行应用包的生成。

  4. 测试应用：在真机或模拟器上安装应用包，进行功能测试和性能测试。

  5. 发布应用：将应用包上传到各个应用商店，如App Store、Google Play等，按照各个平台的发布流程进行应用上线。

4. UniApp中如何进行数据传递

在UniApp中，可以通过路由参数、Vuex、Storage等方式进行数据传递。

  1. 路由参数：可以通过uni.navigateTo、uni.redirectTo、uni.reLaunch等路由跳转方法传递数据，例如：
uni.navigateTo({
  url: 'pages/detail/detail?id=123'
})

在目标页面的onLoad生命周期中可以通过this.$route.query.id获取传递的数据。

  1. Vuex：可以使用Vuex进行全局状态管理，通过store.state或store.getters获取数据，通过store.commit或store.dispatch修改数据。

  2. Storage：可以使用uni.setStorageSync和uni.getStorageSync方法进行数据的存储和获取，例如：

uni.setStorageSync('key', 'value')
const data = uni.getStorageSync('key')

5. UniApp中的应用生命周期有哪些

UniApp中的应用生命周期包括以下几个阶段：

  1. 应用初始化阶段（App Launch）：应用初始化时执行的代码，通常用于配置应用的全局参数。
// main.js
App({
  onLaunch: function () {
    console.log('App Launch')
  }
})
  1. 应用显示到前台阶段（App Show）：应用从后台切换到前台时执行的代码。
// main.js
App({
  onShow: function () {
    console.log('App Show')
  }
})
  1. 应用隐藏到后台阶段（App Hide）：应用从前台切换到后台时执行的代码。
// main.js
App({
  onHide: function () {
    console.log('App Hide')
  }
})
  1. 页面初始化阶段（Page Load）：页面初始化时执行的代码，通常用于初始化页面数据。
// index.vue
export default {
  onLoad() {
    console.log('Page Load')
  }
}
  1. 页面显示到前台阶段（Page Show）：页面从后台切换到前台时执行的代码。
// index.vue
export default {
  onShow() {
    console.log('Page Show')
  }
}
  1. 页面隐藏到后台阶段（Page Hide）：页面从前台切换到后台时执行的代码。
// index.vue
export default {
  onHide() {
    console.log('Page Hide')
  }
}

6. UniApp中的页面生命周期有哪些

1. onLaunch：应用初始化完成时触发，全局只触发一次。
2. onShow：页面显示时触发，可以获取页面参数。
3. onHide：页面隐藏时触发，可以做一些清理工作。
4. onUnload：页面卸载时触发，可以做一些清理工作。
5. onReady：页面初次渲染完成时触发，可以获取组件的实例。
6. onResize：页面尺寸改变时触发，如横竖屏切换。
7. onPullDownRefresh：页面下拉刷新时触发。
8. onReachBottom：页面上拉触底时触发。
9. onTabItemTap：点击tab时触发。
10. onPageScroll：页面滚动时触发。
11. onNavigationBarButtonTap：点击导航栏按钮时触发。
12. onBackPress：监听页面返回事件。
13. onPageNotFound：页面不存在时触发。

7. UniApp中的组件生命周期有哪些

1. beforeCreate：组件实例刚被创建，属性计算之前
2. created：组件实例已经创建，属性已经计算
3. beforeMount：组件挂载之前
4. mounted：组件挂载完成
5. beforeUpdate：组件更新之前
6. updated：组件更新完成
7. activated：keep-alive组件被激活
8. deactivated：keep-alive组件被停用
9. beforeDestroy：组件销毁之前
10. destroyed：组件销毁完成

8. 如何在UniApp中实现数据存储

  1. 使用uni.setStorageSync和uni.getStorageSync方法来实现本地数据储和读取。可以将数据以键值对的形式存储在本地缓存中，然后通过键来获取数据。

  2. 使用uni.setStorage和uniStorage方法来实现本地数据存储和读取。这种方式与setStorageSync和getStorageSync类似，不同之处在于setStorage和getStorage是异步操作，需要通过回调函数来处理数据。

  3. 使用uni.request和后端接口来实现数据存储。可以通过发送请求将数据存储在后端服务器上，然后再通过请求获取数据。

  4. 使用uniCloud来实现数据存储。uniCloud是uniapp提供的云开发服务，可以通过uniCloud提供的API来实现数据的存储和读取。

9.如何在UniApp中隐藏导航栏

要在UniApp中隐藏导航栏，可以在页面配置文件（pages.json）中设置navigationBarHidden为true。具体步骤如下：

  1. 打开项目中的pages.json文件。
  2. 找到要隐藏导航栏的页面对应的配置项，例如：
"pages": [
  {
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "首页"
    }
  }
]
  1. 在该页面的配置中添加navigationBarHidden属性，并设置为true：
"pages": [
  {
    "path": "pages/index/index",
    "style": {
      "navigationBarTitleText": "首页",
      "navigationBarHidden": true
    }
  }
]
  1. 保存文件并重新编译项目，导航栏就会在该页面中被隐藏了。

10.如何在UniApp中实现字体图标的使用

  1. 下载所需的字体图标库，比如Font Awesome、Material Design Icons等。

  2. 将字体图标库的字体文件（通常是.ttf或.otf格式）放置在项目的static目录下。

  3. 在App.vue或需要使用字体图标的页面中，引入字体图标库的样式文件。例如在App.vue中可以使用以下代码引入Font Awesome的样式：

<style>
@font-face {
  font-family: 'Font Awesome 5 Free';
  src: url('./static/fontawesome-webfont.woff2') format('woff2'),
       url('./static/fontawesome-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

[class^="fa-"], [class*=" fa-"] {
  font-family: 'Font Awesome 5 Free';
  font-style: normal;
  font-weight: normal;
  text-decoration: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>
  1. 在需要使用字体图标的地方，直接使用类名来引用相应的图标。例如，在template中可以使用以下代码来引用Font Awesome中的一个图标：
<i class="fa fa-camera"></i>
avatar
文章
阅读
粉丝