WeChat ミニプログラムをゼロから開発する手順 (3)

先ほど、新しいページを作成してページ タイトルを設定する方法を説明しました。この章では、下部ナビゲーション バーの実装方法について説明します。つまり、下部のナビゲーションをクリックすると、対応するさまざまなページが切り替わります。まず、実装したい下部ナビゲーション バーのレンダリングを見てみましょう: (ナビゲーション アイコンの例は 3 つ、WeChat アプレットは最大 5 つまで追加できます)。

1. アイコンの準備

Alibaba Icon Library 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

OK、終了し、保存してコンパイルして、クラシックな最下部を実現します。ミニ プログラムのナビゲーション効果

==============
付録: 完全なコード (無視できる程度)

picture.png

{  "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 ミニ アプリをゼロから開発する プログラム (1)

WeChat ミニ プログラムをゼロから開発する (2)

WeChat ミニ プログラムの簡単な紹介

以上がWeChat ミニプログラムをゼロから開発する手順 (3)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。