零基礎學習微信小程序(3):全局配置文件

app.json:

文件截圖:
在這裏插入圖片描述

pages字段:

用於描述當前小程序的所有頁面路徑
裏面的內容即爲小程序的頁面,可以在該文件裏直爲小程序添加頁面。並且pages裏的書寫順序和pages文件夾裏的文件順序是對應的。
這裏說一個添加頁面的好用的小技巧:
即:直接再pages裏添加內容,可以直接爲小程序添加一個新頁面:
在這裏插入圖片描述
其中pages第一行,即爲小程序的首頁,不信你看:
在這裏插入圖片描述
在VS Code裏這麼做也是一樣的效果,注意點在於:寫完VS Code以後需進行保存,保存以後再到微信開發者工具裏進行編譯。

window字段:

定義小程序所有頁面的頂部背景顏色和文字顏色定義等,是全局默認窗口表現
原樣式:
在這裏插入圖片描述
修改以後:
在這裏插入圖片描述
注意點:
(1)”navigationBarTextStyle“字段必須爲black或者white(不能太花裏胡哨的)
(2)"backgroundTextStyle"是一個下拉loading的樣式,僅支持dark和light,需要配合上“enablePullDownRefresh”來使用

tabbar字段:

在這裏插入圖片描述
在這裏插入圖片描述
(1)pagesPath:裏面填寫的是路徑,即進行點擊圖標後,向某個頁面跳轉。其中的pagesPath必須是存在玉pages中的,不能是不存在的頁面路徑
(2)text:圖標下方的文字
(3)iconPath:未選擇的圖標路徑
(4)selectedIconPath:已選擇的圖標路徑

在進行實驗之前需要準備圖標,並且需要兩種圖標,一種是未被選中的狀態時的圖標,另一種是已經選中時的圖標。
在這裏插入圖片描述
隨後將放有圖標的文件夾,放到微信小程序的文件夾下
首先根據需要添加新的頁面:

"pages":[
    "pages/index/index",
    "pages/cart/cart",
    "pages/category/category",
    "pages/my/my",
    "pages/demo01/demo01",
    "pages/demo02/demo02",
    "pages/logs/logs"
  ],
"tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁",
      "iconPath": "icons/home.png",
      "selectedIconPath": "icons/home-o.png"
    },
    {
      "pagePath": "pages/category/category",
      "text": "分類",
      "iconPath": "icons/category.png",
      "selectedIconPath": "icons/category-o.png"
    },
    {
      "pagePath": "pages/cart/cart",
      "text": "購物車",
      "iconPath": "icons/cart.png",
      "selectedIconPath": "icons/cart-o.png"
    },
    {
      "pagePath": "pages/my/my",
      "text": "個人中心",
      "iconPath": "icons/my.png",
      "selectedIconPath": "icons/my-o.png"
    }
  ]
  },

在這裏插入圖片描述
在這裏插入圖片描述
點擊圖標時圖標改變,以及樣式也改變了。
如果要對樣式進行改變,那麼可以自己查找開發文檔,添加新的樣式

sitemap配置:

用於配置小程序及其頁面是否允許被微信索引
開發者可以通過sitemap.json配置,或者是管理後臺頁面收錄開關來配置其小程序頁面是否允許微信索引。當開發者允許微信索引時,微信會通過爬蟲的形式,爲小程序的頁面內容建立索引。當用戶的搜索詞條觸發該索引時,小程序的頁面將展示再搜索結果中。如果小程序爬蟲發現的頁面數據和真實用戶展示的不一樣,那麼該頁面就不會進入到索引中。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章