WeChatミニプログラム例：ナビゲーションバーカスタマイズの実装方法-ミニプログラム開発-php.cn

WeChatミニプログラム例：ナビゲーションバーカスタマイズの実装方法

不言

リリース： 2018-08-21 17:29:12

オリジナル

4930 人が閲覧しました

この記事の内容は、WeChat アプレットの例、つまりカスタムナビゲーションバーの実装方法に関するもので、必要な友人が参考になれば幸いです。

WeChat アプレットでは、ナビゲーションバーの色とコピーの一部の属性を app.json のウィンドウで設定するか、特定のページの json ファイルで構成されている場合は単一のページで設定できます。ウィンドウを削除する必要があります。たとえば、app.json 構成:

{
    "window":{
       "backgroundTextStyle":"light",
       "navigationBarBackgroundColor": "#fff",
       "navigationBarTitleText": "WeChat",
       "navigationBarTextStyle":"black",
       "navigationStyle": "custom"
     } }

ログイン後にコピー

特定のページの json ファイル構成:

{
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#405f80",
  "navigationBarTitleText": "文与字",
  "navigationBarTextStyle": "white"}

ログイン後にコピー

詳細については、公式ドキュメントを参照してください: https://developers.weixin .qq.com/miniprogram/dev/framework/config.html

しかし、ビジネスで必要とされるナビゲーションバーは非常に特殊な場合があり、現時点ではミニプログラムが提供するナビゲーションバーだけではニーズを満たすことができません。

まず、ナビゲーションバーをカスタマイズする手順について説明します。

app.json のウィンドウに "navigationStyle": "custom" 属性を追加します (デフォルトの属性は "navigationStyle": "default) ")。この時点で、図に示すように、ミニプログラムのデフォルトのナビゲーションバーが消えます。
その後、必要に応じて各ページに独自のナビゲーションバーを追加します。

注:navigationStyle は app.json でのみ有効です。カスタムを有効にした後は、下位バージョンのクライアントに互換性がある必要があります。開発者ツールの基本ライブラリのバージョンは 1.7.0 (デバッグ専用であり、最低バージョンを表すものではありません) に切り替えられ、古いビジョンに簡単に切り替えることができます。
つまり、この属性はアプリ内でのみ設定できます。 .json を 1 つで設定したい場合は、ページ内のナビゲーションバーをカスタマイズすることはできません。個人的には、これは少し難しいと思います。将来最適化される予定です