关于微信小程序:微信小程序开发最佳实践一

文中的每一条实际都是在本人我的项目当中实在利用的，所以说，本文相对实用。每一条实际的内容我依照三个局部来说：根本配置，次要逻辑代码，如何利用

// 单页面配置 page.json
{
    "navigationStyle": "custom",
   // 其它配置项
  "navigationBarTextStyle":""
}

// 全局配置 app.json
{
    "window":{
        "navigationStyle": "custom",
    // 其它配置项
    "navigationBarTextStyle":""  
    }
}

注 1：对于navigationStyle

iOS/Android 客户端 7.0.0 以下版本，navigationStyle 只在 app.json 中失效。

iOS/Android 客户端 6.7.2 版本开始，navigationStyle: custom 对 web-view 组件有效

开启 custom 后，低版本客户端须要做好兼容。开发者工具根底库版本切到 1.7.0（不代表最低版本，只供调试用）可不便切到旧视觉

Windows 客户端 3.0 及以上版本，为了给用户提供更合乎桌面软件的应用体验，对立了小程序窗口的导航栏，navigationStyle: custom 不再失效

// navBar.wxml 
<view style="height:{{navigationHei}}px; top:{{navigationTop}}px; padding-left:{{paddingLeft}}px" class="nav-bar">
  <view class="nav-bar-left">
    <!-- 返回按钮标签 -->
    <image bindtap="back" src="{{imgArrow}}" class="nav-bar-arrow" mode=""></image>
    <!-- 左上角文字 -->
    <text class="nav-bar-left-text"> 返回 </text>
  </view>
  <!-- 题目内容 -->
  <view class="nav-bar-content">
    <slot></slot>
  </view>
</view>

// navBar.wxss 款式
.nav-bar{
  position: fixed;
  width:100vw;
  left:0;
  top:0;
  background: chartreuse;
  box-sizing: border-box;
}
.nav-bar-left{
  display: flex;
  height: 100%;
  align-items: center;
}
.nav-bar-arrow{
  width:19rpx;
  height: 34rpx;
  margin:0 24rpx;
}
.nav-bar-left-text{
  font-size:33rpx;
  color: #fff;
}

.nav-bar-content{
  position: absolute;
  left:0;
  top:0;
  width:100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

Component({properties: {},
  data: {
    navigationTop: 0, // 导航栏顶部高度
    navigationHei: 20, // 导航栏高度
    paddingLeft: 0, // 导航栏做内边距
    imgArrow: "http://m.jqtianxia.cn/rubbish/common/icon-arrow-left.png" // 返回箭头
  },
  ready: function () {
    // 状态栏高度
    const {screenWidth,statusBarHeight} = wx.getSystemInfoSync();
    // 胶囊按钮
    const {height,top,right} = wx.getMenuButtonBoundingClientRect();
    // 右边内边距
    const paddingLeft = screenWidth - right;
    const navigationHei = (top - statusBarHeight) * 2 + height;
    this.setData({
      navigationTop: statusBarHeight,
      navigationHei,
      paddingLeft
    })
  },
  methods: {back: function () {
      wx.navigateBack({delta: 1,})
    }
  }
})

{"usingComponents": {},
  "navigationStyle":"custom",
  "navigationBarTextStyle":"black"
}

在须要用的页面的 JSON 文件中引入组件

{
    "usingComponents": {"nav-bar":"component/navBar/index"},
}

在页面的 WXML 文件中应用

<view class="page">
    <!-- 自定义导航栏 navBar-->
    <nav-bar>
        <text class='nav-bar-title-text'> 题目内容 </text>
    </nav-bar>
</view>

波及 API

// 获取设施根底信息
wx.getSystemInfoSync()

// 获取右上角胶囊的布局地位信息
wx.getMenuButtonBoundingClientRect()

扩大

除了下面根底的自定义导航栏，咱们还能够对导航栏进行非凡的定制，比方在导航栏搁置搜寻框，日期抉择，工夫，日期和天气信息等

关于微信小程序:微信小程序开发最佳实践一

自定义导航栏

根本配置

组件封装

wxml

wxss

js

json

实际利用

其它