uniapp 隐藏导航-猿码集

1. 什么是uniapp？

Uni-app（全称Universal Application）是一个使用vue.js开发的开源跨端开发框架，支持多端开发，一次编写多端运行，包括H5、小程序、APP（iOS、Android）。

uniapp 使用 vue.js 作为其开发模式，将vue.js中的组件化开发思路，加以扩展，使得开发者可以使用同一套代码，来开发不同平台的应用。通过 uniapp，我们可以使用vue.js技术，开发带有原生应用体验、高性能、跨平台的应用程序。

2. 隐藏导航的方法

2.1 在manifest.json文件中设置navigationBarHidden

我们可以在项目的manifest.json文件中，将navigationBarHidden设置为true，即可隐藏导航，在需要展示导航时，再将其设置为false即可。

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarHidden": true
      }
    }
  ]
}

2.2 使用全局mixins

我们可以使用uni-app自身提供的mixins，通过设置全局的mixins，使得所有页面都能使用导航隐藏功能。

import Vue from 'vue'
Vue.mixin({
  onShow() {
    uni.hideNavigationBar()
  },
  onHide() {
    uni.showNavigationBar()
  }
})

在上面的代码中，我们通过全局设置，让每个页面在显示时，都调用 uni.hideNavigationBar() 隐藏导航栏，在隐藏前台页面时，又通过调用 uni.showNavigationBar() 来显示导航栏。

2.3 使用页面级mixins

如果只希望在某个页面或某些页面中隐藏导航，使用页面级mixins则更为合适。我们可以在对应的页面中引入mixins，并进行相关配置即可。

import hideNavigationMixins from '@/common/mixins/hideNavigation.js'
export default {
  mixins: [hideNavigationMixins]
}

上面的代码中，我们定义了一个名为hideNavigationMixins的mixins，然后在需要隐藏导航的页面中使用mixins。具体的mixins代码如下：

export default {
  onLoad() {
    uni.hideNavigationBar()
  },
  onUnload() {
    uni.showNavigationBar()
  }
}

在上面的代码中，我们通过使用onLoad和onUnload事件，分别在页面加载时隐藏导航栏，在页面卸载时再次显示导航栏。

3. 学习热度

相较于传统的开发方案，如原生开发、Flutter等跨平台开发框架，uniapp已经具有了一定的技术基础，因此越来越多的开发者开始学习和使用uniapp。加上uniapp对vue.js已经相当熟悉的开发者来说，入门难度不高，学习成本较低。

目前，uniapp的官方文档已经相当完善，中文社区也越来越活跃，遇到问题时可以在社区中进行交流，解决问题。因此，uniapp的学习曲线相对较平缓，容易上手。

4. 优势和不足

4.1 优势

跨平台，能够一次性开发多个平台的应用程序。

开发速度快，使用vue.js作为开发语言，已经有了非常成熟的组件化开发模式，具有高效性。

组件化开发模式，能够提高代码的复用性和可维护性。

开发成本低，主要使用web前端技术，学习成本相对较低。

4.2 不足

对性能的处理不够彻底，开发者需要根据具体应用场景进行性能优化。

对其它跨平台开发框架而言，uniapp的社区活跃度还略显不足。

跨端适配需要开发者进行重复劳动。

5. 总结

对于uniapp而言，其通过使用vue.js的技术优势和跨平台开发的优点，越来越受到开发者的欢迎。同时，官方文档已经相当完善，社区活跃度也在逐步提高。不过，在进行应用开发时，开发者需要重视性能优化和跨端适配等问题，以期获得良好的用户体验。

uniapp 隐藏导航