ナビゲーションバーとは何ですか?
- WeChat アプレットには通常、ナビゲーション バーとタブバー (アプレットの下にある切り替えボタンの列) の 2 つのバーがあります。下のタブバーをカスタマイズする方法は一般に比較的簡単です。ここでは、上のカスタム ナビゲーション バーの実現に焦点を当てます。 . .
アプレットのレイアウト
- ナビゲーション バーとカスタム ナビゲーション バーに関しては、WeChat アプレットのレイアウトを説明する必要があります。システム情報を取得するには、アプレット開発で wx.getSystemInfo() メソッドを使用します。
- 取得した情報の一部を上の図に示します (WeChat アプレット開発者ドキュメントから抜粋) レイアウトを理解するのに役立つ情報は、画面の高さと現在の画面の幅など、幅と高さに関連する上記のプロパティです。デバイス、利用可能な高さと幅、および保存領域。
- 上の図は、Apple X のノッチ スクリーンを例として、systemInfo から取得したデータの実際のパフォーマンスを示しています (すべての Android ノッチ スクリーンは同様の原理を持っています)。 一番外側の赤いボックスは画面サイズ、青いボックスは画面サイズです。安全な領域。開発者が操作できるページ領域です。上の黄色のボックスは携帯電話のステータス バー、緑色の領域はカスタマイズしたいナビゲーション バーです。
- ナビゲーションバーがセーフエリアの上部付近にあることがわかりますが、ネイティブナビゲーションバーを使用する場合、ナビゲーションバーの下部が実際に制御可能な範囲になります。
- 実際、カスタム ナビゲーション バーも、このセーフエリア内のカプセルと最も調和して配置されています。主な理由は、WeChat が右上隅にあるカプセル ボタンを組み込みコンポーネントとして使用しているためです。このボタンには黒と白の 2 色しかなく、サイズ、位置、透明度などを変更できません。同じ場所にあります。上の写真。
ナビゲーションバーをカスタマイズする理由
ネイティブ ナビゲーション バーの制限事項
- カプセル ボタンに加えて、ネイティブ ナビゲーション バーには、戻るボタンと、ユーザーが開いたミニ プログラムの最下位ページがホームページではない場合にデフォルトで表示される「ホームに戻る」ボタンのみが表示されます。
- ネイティブナビゲーションバーのタイトルテキストの色は白黒のみです。
- レイアウトの変更やカスタマイズはできません。
製品需要
-
ネイティブ ナビゲーションバーの制限がカスタム ナビゲーションバーを導入するのに十分でない場合は、製品の需要がより大きな要因であることは間違いありません。
-
カプセルボタンはカスタマイズできないことに加えて、カスタムナビゲーションバーはプログラマの制御下にあるため、カスタムナビゲーションバーを使用することで製品のさまざまなニーズに確実に対応できます。
図1
図2
- あなたの製品が上の図の要件を備えている場合、明らかにノーとは言えず、要件を満たしてカスタム NavigationBar を追加することしかできません。
ナビゲーションバーをカスタマイズするにはどうすればよいですか?
ネイティブのナビゲーション バーを削除します。
- NavigationBar ページをカスタマイズする必要がある page.json の NavigationBarTitleText を削除します。
- "navigationStyle": "custom" を追加すると、元のナビゲーション バーが消え、戻るキーも表示されなくなり、カスタマイズする必要があります。
- さらに、2016 年には、WeChat は没入型ステータス バーへの適応を開始しており、現在、WeChat のほぼすべてのモデルに没入型ステータス バーが搭載されています。プログラマブル領域。
ナビゲーションバーの高さを計算します。
- もちろん、ネイティブ カプセル ボタンは存在するため、次のステップはカスタム ナビゲーション バーの高さと位置を特定することです。
- 機種やシステムが異なると、ステータスバーやカプセルボタンの位置が不定になるため、どの機種でも冷静に判断できるよう、ある程度の計算が必要となります。
- 「wx.getSystemInfo()」を使用して「statusBarHeight」を取得します。これは、画面上部からナビゲーション バーまでの最も基本的な距離を決定します。
- 「wx.getMenuButtonBoundingClientRect()」を使用してアプレットのカプセル情報を取得します（この API にはさまざまな問題があり、パフォーマンスが異なるエンドで一貫していないことに注意してください。この API 呼び出しの失敗の処理については後述します） ）を実行すると、下図のように画面上に以下の座標情報が表示されます。左上隅が原点となります。
- 次の図を例に挙げます。上の赤いボックスはステータスバーで、高さは既知です。下の赤いボックスはテキストコンテンツで、中央のボックスはnavigationBarHeightです。黄色のボックスは元のカプセルボタンです。これも垂直中央の位置にあり、高さはカプセルです。ボタンは左上隅の座標情報に基づいてわかります。取得するのは難しくありません。navigationBarHeight = 青いボックスの高さ × 2 + Capsule button.height 。(青いボックスの高さ = カプセルボタン.トップ - statusBarHeight)
-
最終的な計算式は、navigationBarHeight = (capsule button.top - statusBarHeight) × 2 + Capsule button.height となります。NavigationBar と画面の上部の間の距離は、navigationBarHeight です。
-
この計算方法は様々な機種やAndroid iosに適用できます。
-
"wx.getMenuButtonBoundingClientRect()" がエラーを取得するかデータが 0 になる非常にまれなケースについては、シミュレートすることしかできません。Android の場合、一般的な NavigationBarHeight は 48 ピクセルですが、iOS の場合は通常 40 ピクセルであり、カプセル ボタンの高さはすべてのモデルの 32 ピクセルは、インターネット上の多くの記事やセルフテストからも得られており、このエラーは通常は無視できます。もちろん、最も理想的なのは、WeChat がすべてのモデルを保持できることです。最後に、開発者ツールのバグは言うまでもなく、実際のデバイスのみが優先されることを思い出していただきたいと思います。
コード
ローカルマシンの情報を取得するには、通常、作成者はアプリのonLaunchにそれを書き込みます。
App.js
// App.js
...
onLaunch(){
const { statusBarHeight, platform, windowHeight }=wx.getSystemInfoSync()
const { top, height } = wx.getMenuButtonBoundingClientRect()
// 状态栏高度
wx.setStorageSync('statusBarHeight', statusBarHeight)
// 屏幕高度
wx.setStorageSync('windowHeight', windowHeight)
// 胶囊按钮高度 一般是32 如果获取不到就使用32
wx.setStorageSync('menuButtonHeight', height ? height : 32)
// 判断胶囊按钮信息是否成功获取
if (top && top !== 0 && height && height !== 0) {
const navigationBarHeight = (top - statusBarHeight) * 2 + height
// 导航栏高度
wx.setStorageSync('navigationBarHeight', navigationBarHeight)
} else {
wx.setStorageSync('navigationBarHeight', platform === 'android' ? 48 : 40)
}
}
...- 作成者はこれらの高さ情報を storage に保存し、コンポーネント内でこれらのデータを使用する NavigationBar カスタム コンポーネントを作成します。
ナビゲーションバー.js
// navigationBar.js
...
data: {
// 状态栏高度
statusBarHeight: wx.getStorageSync('statusBarHeight') + 'px',
// 导航栏高度
navigationBarHeight: wx.getStorageSync('navigationBarHeight') + 'px',
// 胶囊按钮高度
menuButtonHeight: wx.getStorageSync('menuButtonHeight') + 'px',
// 导航栏和状态栏高度
navigationBarAndStatusBarHeight: wx.getStorageSync('statusBarHeight') + wx.getStorageSync('navigationBarHeight') + 'px'
}
...- NavigationBar.wxml のレイアウトについては詳しく説明しませんが、一般的にナビゲーション バーは固定配置で、カスタムの戻るボタンは行の垂直方向の中央に配置され、ナビゲーション タイトルは中央に配置され、省略記号が表示されます。言葉が多すぎるとき。
ナビゲーションバー.wxml
<!--Components/navigationBar.wxml-->
<view class="navigation-container" style="{
{'height: ' + navigationBarAndStatusBarHeight}}">
<!--空白来占位状态栏-->
<view style="{
{'height: ' + statusBarHeight}}"></view>
<!--自定义导航栏-->
<view class="navigation-bar" style="{
{'height:' + navigationBarHeight}}">
<image class="nav-img" src='/icon/edit.png' />
<view class="navigation-title" style="{
{'line-height:' + navigationBarHeight}}">{
{title}}</view>
</view>
</view>
<!--空白占位fixed空出的位置-->
<view style="{
{'height: ' + navigationBarAndStatusBarHeight}}"></view>ナビゲーションバー.wxss
/* Components/navigationBar.wxss */
.navigation-container {
position: fixed;
width: 100%;
z-index: 99;
top: 0;
left: 0;
}
.navigation-bar {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.navigation-buttons {
display: flex;
align-items: center;
margin-left: 10px;
border: 1px solid rgba(0, 0, 0, 0.05);
box-sizing: border-box;
border-radius: 15px;
background-color: transparent;
}
.nav-img {
height: 22px;
margin-left: 28rpx;
width: 22px;
}
.navigation-title {
position: absolute;
left: 104rpx;
right: 104rpx;
text-align: center;
font-size: 16px;
font-weight: bold;
color: #ffffff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
要約する
- カスタム ナビゲーション バーの中核はナビゲーション バーの高さの位置決めであり、カスタムの戻るボタンやその他のボタンの位置をネイティブ カプセルと一致して正確に配置できます。wxmlの各種レイアウト方法に関して、上記はあくまで筆者が書いた書き方です。
- アプレットの学習とナビゲーション バーのカスタマイズは非常に重要なスキルであり、ロジックは複雑ではありませんが、フロント エンドの学習と同様に、詳細を行うには細心の注意と忍耐が必要です。