具備基礎

vue框架：vue官方文檔

mpvue框架：mpvue官方文檔

全局配置

•找到全局的app.json文件，在配置中添加如下內容：

"navigationStyle": "custom""window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black", "navigationStyle": "custom" // 這個配置}

組件思維

•使用mpvue開發小程序，src目錄下默認會生成一個components文件夾；
•由于自定義組件所有webview頁面都要使用，所以把它歸類為公共組件；
•可以在components文件夾下新建一個common文件夾，專門放置公共組件，如下：

├── src                    源碼目錄 
│  ├── main.js             入口js文件
│  ├── app.json            全局配置
│  ├── components          組件目錄
│  │  └── common           公共組件
          └── topBar.vue   頂部自定義導航復制代碼

組件內容

•由于不同設備statusBarHeight值可能有差異，自定義組件的高度取決于statusBarHeight值；
•找到全局App.vue文件，在這里面執行小程序的onLaunch生命周期（監聽小程序初始化）；
•具體獲取方法如下：

const that = thislet systemInfo = wx.getSystemInfoSync()that.setBarHeight(systemInfo.statusBarHeight)

• 通過vuex存儲statusBarHeight值，不清楚vuex如何在小程序中使用的可參考mpvue如何使用vuex；
•.vue文件的html相關結構如下：

<template> <div class="top-bar"> <div class="bar" :style="'height:'+(systemInfo.barHeight+46)+'px;'">  <span class="title">{{title}}</span>  <button v-if="way && way==='/pages/mine/main'" open-type="getUserInfo" @getuserinfo="toMine">  <image class="icon" :src="icon" />  </button>  <image v-else-if="way && way!=='/pages/mine/main'" class="icon-back" :src="icon" @tap="toPage(way)" />  <span v-else></span> </div> <p class="place-holder" :style="'padding-top:'+(systemInfo.barHeight+6)+'px;'"></p> </div></template>

•結構分析如下，可看做兩部分，一部分是fixed定位在頂部的class="bar"的div;另一部分是class="place-holder"的p；
•之所以要放一個p標簽，是因為不用每次引入topBar.vue時都要考慮class="bar"的div都會遮擋內容區的問題；