この記事の内容は、WeChat アプレットの下部ナビゲーション バーの実装コードに関するものです。必要な方は参考にしていただければ幸いです。
下部ナビゲーションバーを実装するにはどうすればよいですか?つまり、下部のナビゲーションをクリックすると、対応するさまざまなページが切り替わります。
まず、実装したい下部ナビゲーション バーのレンダリングを見てみましょう: (3 つのナビゲーション アイコンの例、WeChat アプレットは最大 5 つまで追加できます) 1. アイコンの準備 Alibaba アイコン ライブラリ http:// www.iconfont.cn/collections/show/29スタッフのアバター、ホームページ、その他のよく使用されるアイコンなど、この Web サイトで使用したいアイコンをいくつかダウンロードし、「ダウンロード」をクリックしてローカルに保存し、名前を変更します。 UI 対応のアイコンを使用することもできます。 プロジェクトに戻り、新しい画像フォルダーを作成し、ダウンロードしたアイコンを後で使用できるようにそのフォルダーの下に置き、上記の名前のアイコンをミニ プログラム プロジェクト ディレクトリに新しく作成された画像フォルダーに保存します。準備は完了です。 2. 構成ファイルを追加しますプロジェクトのルート ディレクトリで構成ファイル app.json を見つけ、次の構成情報を追加します (app.json ファイルは WeChat アプレットをグローバルに構成し、決定するために使用されます)ページ ファイルのパス、ウィンドウのパフォーマンス、ネットワーク タイムアウトの設定、複数のタブの設定など)"tabBar": { "color": "#a9b7b7", "selectedColor": "#11cd6e", "borderStyle": "white", "list": [ { "selectedIconPath": "images/1.png", "iconPath": "images/2.png", "pagePath": "pages/index/index", "text": "首页" }, { "selectedIconPath": "images/1.png", "iconPath": "images/2.png", "pagePath": "pages/logs/logs", "text": "日志" }, { "selectedIconPath": "images/1.png", "iconPath": "images/2.png", "pagePath": "pages/test/test", "text": "测试" } ] }
。参考ドキュメント:
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html#tabBar
=== ===========
付録: 完全なコード (無視できる程度)
{ "pages":[ "pages/index/index", "pages/category/category", "pages/topic/topic", "pages/user/user", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#000", "navigationBarTitleText": "WeiCMS", "navigationBarTextStyle":"white" }, "tabBar": { "color": "#8c8c8c", "selectedColor": "#f4645f", "backgroundColor": "white", "list": [{ "pagePath": "pages/index/index", "text": "首页", "iconPath":"images/48.png", "selectedIconPath":"images/48.png" }, { "pagePath": "pages/category/category", "text": "分类", "iconPath":"images/48.png", "selectedIconPath":"images/48.png" }, { "pagePath": "pages/topic/topic", "text": "话题", "iconPath":"images/48.png", "selectedIconPath":"images/48.png" }, { "pagePath": "pages/user/user", "text": "我的", "iconPath":"images/48.png", "selectedIconPath":"images/48.png" } ], "position": "bottom" } }
WeChat アプレット開発における下部ナビゲーション バーのタブバーの使用例
WeChatミニプログラムの下部ナビゲーション列の開発(コード付き)
以上がWeChat アプレットの下部ナビゲーション バーの実装コードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。