微信小程序高度定制导航栏提升项目操作性

title:  微信小程序自定义导航栏

**** 微信小程序自定义tabbar*

1. 开启sass支持
   project.config.json

“useCompilerPlugins”: [
“sass”
],

2. 微信小程序自带的导航功能比较单一，不支持自定义其他属性和状态，仅支持标题等属性，所以这个就得自定义导航了，比如各类电商工具的导航，带搜索框的这些导航，多语言切换的导航

3.下面我使用自定义导航实现导航栏带语言切换模式，将导航做成一个组件即可，组件自带生命周期函数，也可以根据装配的内容自动识别
温馨提示：：：自定义导航区分全局和局部，而自定义tabbar仅支持全局配置

全局配置中年 app.json window
官网配置已经很全![https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html]
window
用于设置小程序的状态栏、导航条、标题、窗口背景色。

属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000
navigationBarTextStyle string white 导航栏标题、状态栏颜色，仅支持 black / white
navigationBarTitleText string 导航栏标题文字内容
navigationStyle string default 导航栏样式，仅支持以下值：
default 默认样式
custom 自定义导航栏，只保留右上角胶囊按钮。参见注 2。 iOS/Android 微信客户端 6.6.0，Windows 微信客户端不支持
homeButton boolean default 在非首页、非页面栈最底层页面或非tabbar内页面中的导航栏展示home键 微信客户端 8.0.24

4. 全局配置如下：
   //系统默认支持配置的选项
   {
   “window”: {
   “navigationBarBackgroundColor”: “#ffffff”,
   “navigationBarTextStyle”: “black”,
   “navigationBarTitleText”: “微信接口功能演示”,
   “backgroundColor”: “#eeeeee”,
   “backgroundTextStyle”: “light”,
   “usingComponents”: {//自定义的导航组件，需要注意全局的将会全局生效，，如果只是部分页面需要的话可以局部定制导航，这一点还是比较方便的
   “custom-nav”: “/components/custom-nav/custom-nav”
   }
   }
   }
   

5. 局部页面配置方式:如首页导航自定义（AIBoot\pages\index）,自动覆盖全局配置
   在对应的页面index.json 文件修改即可
   {
   “component”: true,
   “navigationStyle”: “custom”,
   “usingComponents”: {
   “navigation-bar”: “/custom-nav-bar” //可以放在任意目标
   }
   }
   

页面中引用用即可

  <navigation-bar    canBack="{
  
  {false}}"      color-animation-duration="2000"  color-animation-timing-func="easeIn"    />  

6.完整实现案列：
AIBoot\custom-nav-bar
index.js
```
const app = getApp();
Component({
// 接收父组件数据
properties: {
canBack: Boolean,
onytitle: Boolean,
title: String,
currentLang: {
type: String,
value: ‘auto’
},
currentTargetLang: {
type: String,
value: ‘zh’
},
},

    data: { 
        langList: app.globalData.lang, 
        editLang:false, 
        updateLang:"auto",
        updateTargetLang:"zh",
        statusBarHeight: app.globalData.statusBarHeight, //状态栏栏高度
        navBarHeight: app.globalData.navBarHeight, //导航栏高度
        navbarWidthStatus: app.globalData.navbarWidthStatus, //导航栏加状态栏高度
        menuRight: app.globalData.menuRight, //导航栏胶囊距离右侧距离
        menuHeight: app.globalData.menuHeight, //导航栏胶囊高度
        screenHeight: app.globalData.screenHeight, //可视区域高度  
        screenWidth: app.globalData.screenWidth , //可视区域高度  
    }, 
    methods: {
        lifetimes: {
            attached: function () {
                console.log