Rumah > applet WeChat > Pembangunan program mini > Navigasi bawah pembangunan program mini WeChat

Navigasi bawah pembangunan program mini WeChat

**
Lepaskan: 2022-03-22 17:25:23
asal
4231 orang telah melayarinya

Pembangunan Program Mini WeChat

Pengenalan:

Seni bina aplikasi set perisian termasuk lapisan data, lapisan logik perniagaan, perkhidmatan lapisan, Terdapat pelbagai peringkat seperti lapisan kawalan, lapisan persembahan dan pengguna.

App.json fail konfigurasi utama:

App.json fail konfigurasi utama terletak dalam direktori utama projek dan digunakan untuk mengkonfigurasi projek semasa secara global .

Contoh kod adalah seperti berikut:

{
  "pages": [
    "pages/index/index",
    "pages/new/new",
  ],
  "window": {
    "backgroundColor": "#F6F6F6",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#F6F6F6",
    "navigationBarTitleText": "我的第一个小程序",
    "navigationBarTextStyle": "black"
  }
}
Salin selepas log masuk

Terdapat dua halaman dalam kod di atas Ini adalah objek json Halaman atribut digunakan untuk mentakrifkan halaman program mini . Kod di atas menunjukkan bahawa terdapat dua halaman, satu bernama "index" dan terletak di bawah "pages/index", dan satu lagi bernama new dan terletak di bawah "page/new".

Item pertama dalam tatasusunan halaman mewakili halaman awal program mini, iaitu halaman yang akan dijalankan dan dipaparkan apabila program mini dimulakan. Jika anda terus menambah halaman, anda boleh menambahkannya pada tatasusunan halaman.

Status konfigurasi:

Warna latar belakang: digunakan untuk menetapkan warna latar belakang tetingkap, yang sama dengan tetapan warna dalam HTML Gunakan rgb heksadesimal untuk menetapkan warna. Lalai ialah putih.

backgroundTextStyle: digunakan untuk menetapkan fon latar belakang lungsur turun dan memuatkan gaya imej, dengan dua nilai: "gelap" dan "terang".

enablePullDownRefresh: digunakan untuk menetapkan sama ada untuk mendayakan muat semula tarik-turun, lalainya adalah palsu.

navigationBarBackgroundColor: digunakan untuk menetapkan warna latar belakang bar navigasi.

navigationBarTextStyle: Tetapkan warna tajuk bar navigasi.

navigationBarTitleText: Tetapkan kandungan teks tajuk bar navigasi.

Konfigurasikan navigasi bawah:

"tabBar": {
    "list": [
      {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/icon_HOME.png",
      "selectedIconPath": "images/icon_HOMEED.png",
      "lang":"pagePath显示的页面,text文本,iconPath未激活的图标,selectedIconPath激活的图标"
    }, 
    {
      "pagePath": "pages/new/new",
      "text": "广场",
      "iconPath": "images/icon_GUANGCHANG.png",
      "selectedIconPath": "images/icon_GUANGCHANGED.png",
      "lang":"pagePath显示的页面,text文本,iconPath未激活的图标,selectedIconPath激活的图标"
    },
    {
      "pagePath": "pages/userConsole/userConsole",
      "text": "设置",
      "iconPath": "images/icon_SET.png",
      "selectedIconPath": "images/icon_SETED.png",
      "lang":"pagePath显示的页面,text文本,iconPath未激活的图标,selectedIconPath激活的图标"
    }]
  }
Salin selepas log masuk

tabBar ialah navigasi bawah Terdapat tiga navigasi bawah dalam kod di atas

Warna: tab Tetapan tidak diaktifkan Warna teks status.

warna terpilih: Tetapkan warna teks keadaan pengaktifan tab.

borderStyle: Tetapkan sempadan navigasi bawah.

Warna latar belakang: Tetapkan warna latar belakang navigasi bawah.

senarai: Ini ialah nombor, tetapkan nombor navigasi bawah, minimum 2, maksimum 5.

teks: Tetapkan teks navigasi.

Halaman yang dipaparkan oleh pagePath, teks teks, iconPath ikon tidak aktif, terpilihIconPath ikon diaktifkan.

Atas ialah kandungan terperinci Navigasi bawah pembangunan program mini WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan