本文章是一個系列(lie)文章，以(yi)一個完整的(de)可(ke)用(yong)于生產(chan)的(de)實際項目探索微信小程序開(kai)發中我們經常會遇到的(de)問題，希望能(neng)提供完美的(de)解決方案，這(zhe)次是本系列(lie)文章的(de)第二篇了，一下列(lie)出(chu)該系列(lie)文章鏈接(jie)。

微信小程序及h5，基于taro，zoro最佳實踐探索 
微信小程序電商實戰(zhan)-解決你的(de)登陸難(nan)問題

微信自6.6.0版本之后提供了自定義底部導航欄的功能，這使得我們的全屏頁面設計成為了可能 
首(shou)先(xian)演示(shi)下最終的實現效果

我(wo)們實(shi)現(xian)了一(yi)個(ge)與微(wei)信之前的導航欄行為基(ji)本(ben)一(yi)致，樣式可(ke)自定義的導航欄，接下來讓(rang)我(wo)們一(yi)步一(yi)步實(shi)現(xian)它，這里主要需要考慮如下幾點(dian)

不同的手機，狀態欄高度不同，需要進行相關適配 
當開啟小程序下拉刷新時，如何讓頂部導航不會跟著下拉 
自定義(yi)導航欄封裝成獨(du)立組件，實現(xian)僅需引入到頁(ye)面(mian)，無需對頁(ye)面(mian)樣式做相(xiang)關適配工作

該項目托管于github，有興趣的可以直接查看源碼，weapp-clover，如何運行項目源碼請查看ztaro 
要想實(shi)現自定義導航，首(shou)先我(wo)們需要配(pei)置navigationStyle為custom(src/app.js)

1. config = { window: { navigationStyle: 'custom' } }

再實際(ji)情(qing)況中(zhong)，我們往往需要對(dui)(dui)自定(ding)義導(dao)(dao)(dao)航(hang)進行各種各樣(yang)(yang)的定(ding)制(zhi)(zhi)化，因此我們希望，封裝(zhuang)一個最基(ji)本(ben)(ben)的導(dao)(dao)(dao)航(hang)欄，用(yong)(yong)于(yu)(yu)解(jie)決(jue)適(shi)配(pei)問題(ti)，其他樣(yang)(yang)式的導(dao)(dao)(dao)航(hang)欄僅需對(dui)(dui)其進行二次封裝(zhuang)，無需在關(guan)心適(shi)配(pei)問題(ti)，對(dui)(dui)于(yu)(yu)這個項(xiang)目，我們封裝(zhuang)組(zu)件(jian)(jian)如下：  ComponentBaseNavigation 導(dao)(dao)(dao)航(hang)欄基(ji)本(ben)(ben)組(zu)件(jian)(jian)，用(yong)(yong)于(yu)(yu)解(jie)決(jue)適(shi)配(pei)問題(ti)  ComponentHomeNavigation 引(yin)入基(ji)本(ben)(ben)導(dao)(dao)(dao)航(hang)組(zu)件(jian)(jian)，定(ding)制(zhi)(zhi)化首頁(ye)導(dao)(dao)(dao)航(hang)欄組(zu)件(jian)(jian)  ComponentCommonNavigation 引(yin)入基(ji)本(ben)(ben)導(dao)(dao)(dao)航(hang)組(zu)件(jian)(jian)，定(ding)制(zhi)(zhi)化其他頁(ye)面(mian)導(dao)(dao)(dao)航(hang)組(zu)件(jian)(jian)

ComponentBaseNavigation實現

對于適配不(bu)通手機頂部的(de)狀(zhuang)態欄高(gao)度，我們需要利用微信(xin)wx.getSystemInfo獲(huo)取(qu)狀(zhuang)態欄的(de)高(gao)度，因此在user model中新增如(ru)下代碼(src/models/user.js)

1. // 省略其他無關代碼 import Taro from '@tarojs/taro' export default { namespace: 'user', mixins: ['common'], state: { systemInfo: {}, }, async setup({ put }) { // 新增初始化獲取用戶手機系統相關信息，存儲到redux全局狀態中 Taro.getSystemInfo().then(systemInfo => put({ type: 'update', payload: { systemInfo } }), ) } }

實現組件邏輯(src/components/base/navigation/navigation.js)

1. import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' import { connect } from '@tarojs/redux' import './navigation.scss' @connect(({ user }) => ({ // 鏈接redux中存儲的狀態欄高度到組件中 statusBarHeight: user.systemInfo.statusBarHeight, })) class ComponentBaseNavigation extends Component { static defaultProps = { color: 'white', backgroundColor: '#2f3333', } render() { const { statusBarHeight, backgroundColor, color } = this.props const barStyle = { paddingTop: `${statusBarHeight}px`, backgroundColor, color, } return ( <View className="navigation"> <View className="bar" style={barStyle}> {this.props.children} </View> <View className="placeholder" style={barStyle} /> </View> ) } }

export default ComponentBaseNavigation

1. 樣式如下(src/components/base/navigation.scss) // 大寫的PX單位是為了告訴Taro，不要轉換成單位rpx // 通過測試和觀察發現，微信頂部的膠囊寬高如下，并且各個屏幕下一致 // 因此采用PX單位 $capsule-padding: 6PX; // 膠囊的上下padding距離 $capsule-height: 32PX; // 膠囊的高度 $capsule-width: 88PX; // 膠囊的寬度 $navigation-height: $capsule-padding * 2 + $capsule-height; $navigation-font-size: 15PX; $navigation-icon-font-size: 25PX; $navigation-box-shadow: 0 2PX 2PX #222; .navigation { position: relative; background: transparent; .bar { position: fixed; top: 0; left: 0; display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; height: $navigation-height; z-index: 1; font-size: $navigation-font-size; } .placeholder { display: block; height: $navigation-height; background: transparent; } }

要解決我(wo)們先(xian)前(qian)提到(dao)的(de)(de)(de)問題當開啟小(xiao)程序下拉刷(shua)新(xin)時(shi)，如(ru)何讓(rang)頂(ding)部導(dao)航(hang)不會(hui)(hui)跟著下拉，僅(jin)(jin)僅(jin)(jin)只需設置(zhi).bar樣(yang)式為position: fixed，這樣(yang)當我(wo)們下拉刷(shua)新(xin)時(shi)導(dao)航(hang)欄就不會(hui)(hui)跟著動了，那(nei)為什么我(wo)們還需要.placeholder標(biao)簽(qian)呢  如(ru)果你(ni)嘗試著去掉(diao)它，并且(qie)運行(xing)查(cha)看效(xiao)果時(shi)，你(ni)會(hui)(hui)發現(xian)，頁(ye)(ye)面(mian)的(de)(de)(de)內容(rong)會(hui)(hui)被頂(ding)部導(dao)航(hang)欄遮(zhe)擋(dang)了，我(wo)們需要對每個頁(ye)(ye)面(mian)進行(xing)額外(wai)的(de)(de)(de)設置(zhi)以使它如(ru)預期一(yi)樣(yang)顯示，比如(ru)給每個頁(ye)(ye)面(mian)設置(zhi)頂(ding)部padding，這樣(yang)的(de)(de)(de)消耗太大，因此我(wo)們專門設置(zhi)placeholder標(biao)簽(qian)占據與導(dao)航(hang)欄相同的(de)(de)(de)高度(du)，使頁(ye)(ye)面(mian)不被遮(zhe)擋(dang)，且(qie)無需額外(wai)處理

ComponentHomeNavigation實現

有了這樣一個基礎組(zu)件，我們(men)要實現(xian)首(shou)頁導航欄效果就變得(de)相當(dang)的簡(jian)單了，直接上代碼(ma)(src/components/home/navigation/navigation.js)

1. import Taro, { Component } from '@tarojs/taro' import { View, Image, Text } from '@tarojs/components' import { noop } from '../../../utils/tools' import ComponentBaseNavigation from '../../base/navigation/navigation' import './navigation.scss' class ComponentHomeNavigation extends Component { static defaultProps = { onSearch: noop, } render() { const { onSearch } = this.props return ( <ComponentBaseNavigation> <View className="navigation"> <Image className="logo" src="@oss/logo.png" /> <View className="search" onClick={onSearch}> <View className="icon iconfont icon-search" /> <Text className="text">搜索</Text> </View> </View> </ComponentBaseNavigation> ) } } export default ComponentHomeNavigation

引(yin)入導航組件到首頁中, 省略樣式(shi)代碼(src/pages/home/home.js)

1. import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' import { dispatcher } from '@opcjs/zoro' import ComponentCommonLogin from '../../components/common/login/login' import ComponentCommonSlogan from '../../components/common/slogan/slogan' // 引入導航組件 import ComponentHomeNavigation from '../../components/home/navigation/navigation' import ComponentHomeCarousel from '../../components/home/carousel/carousel' import ComponentHomeBrand from '../../components/home/brand/brand' import './home.scss' class PageHome extends Component { config = { enablePullDownRefresh: true, } state = { // 請到README.md中查看此參數說明 __TAB_PAGE__: true, // eslint-disable-line } componentDidMount() { dispatcher.banner.getBannerInfo() dispatcher.brand.getHotBrandList() } onPullDownRefresh() { Promise.all([ dispatcher.banner.getBannerInfo(), dispatcher.brand.getHotBrandList(), ]) .then(Taro.stopPullDownRefresh) .catch(Taro.stopPullDownRefresh) } handleGoSearch = () => Taro.navigateTo({ url: '/pages/search/search' }) render() { return ( <View className="home"> <ComponentCommonLogin /> <ComponentHomeNavigation onSearch={this.handleGoSearch} /> <ComponentHomeCarousel /> <View class="content"> <ComponentCommonSlogan /> <ComponentHomeBrand /> </View> </View> ) } } export default PageHome

ComponentCommonNavigation實現

該組件(jian)的(de)(de)實(shi)(shi)現(xian)方式與首頁基(ji)本(ben)一致，需(xu)要(yao)提的(de)(de)一點就(jiu)是返(fan)回鍵(jian)的(de)(de)實(shi)(shi)現(xian)，我(wo)們該如(ru)何統一的(de)(de)判斷(duan)該頁面是否需(xu)要(yao)返(fan)回鍵(jian)呢，這(zhe)里需(xu)要(yao)利用微信接口wx.getCurrentPages()，實(shi)(shi)現(xian)代碼(ma)如(ru)下(src/components/common/navigation/navigation.js)

1. import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' import classNames from 'classnames' import ComponentBaseNavigation from '../../base/navigation/navigation' import './navigation.scss' class ComponentCommonNavigation extends Component { static defaultProps = { title: '', } state = { canBack: false, } componentDidMount() { // 獲取當前頁面是否需要返回鍵 const canBack = Taro.getCurrentPages().length > 1 this.setState({ canBack }) } handleGoHome = () => Taro.switchTab({ url: '/pages/home/home' }) handleGoBack = () => Taro.navigateBack() render() { const { title } = this.props const { canBack } = this.state return ( <ComponentBaseNavigation> <View className={classNames('navigation', { padding: !canBack })}> <View className="tools"> {canBack && ( <View className="iconfont icon-arrow-left back" onClick={this.handleGoBack} /> )} <View className="iconfont icon-home home" onClick={this.handleGoHome} /> </View> <View className="title">{title}</View> </View> </ComponentBaseNavigation> ) } } export default ComponentCommonNavigation