微信小程式的配置

高洛峰
發布: 2017-03-01 11:38:01
原創
1852 人瀏覽過

我們使用app.json檔案來對微信小程式進行全域配置,決定頁面檔案的路徑、視窗表現、設定網路逾時時間、設定多 tab 等。
以下是一個包含了所有設定選項的簡單設定app.json

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  },
  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true
}
登入後複製

配置屬性有:

微信小程式的配置

我們講解了APP的頁面配置,window配置,tabBar配置,網路配置等資訊

微信小程式的配置

pages

接受一個數組,每一項都是字串,來指定小程式由哪些頁面組成。每一項代表對應頁面的【路徑+檔名】訊息,數組的第一項代表小程式的初始頁面。小程式中新增/減少頁面,都需要對 pages 陣列進行修改。

檔案名稱不需要寫檔案後綴,因為框架會自動去尋找路徑.json,.js,.wxml,.wxss的四個檔案進行整合。

如開發目錄為:

pages/

pages/index/index.wxml

pages/index/index.js

#pages/index/index.wxss

pages/logs/logs.wxml

pages/logs/logs.js

app.js

#app .json

app.wxss

則,我們需要在app.json 中寫

{
  "pages":[
    "pages/index/index"
    "pages/logs/logs"
  ]
}
登入後複製

window

用於設定小程式的狀態列、導航條、標題、視窗背景色。相關屬性如下:

微信小程式的配置

{
  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}
登入後複製

編譯後的顯示結果如下圖所示:

微信小程式的配置

##tabBar

如果我們的小程式是一個多tab 應用程式(客戶端視窗的底部或頂部有tab 欄可以切換頁面),那麼我們可以透過tabBar 配置項目指定tab 欄的表現,以及tab 切換時顯示的對應頁面。

Tip: 透過頁面跳躍(wx.navigateTo)或頁面重新導向(wx.redirectTo)所到達的頁面,即使它是定義在tabBar 設定中的頁面,也不會顯示底部的tab 欄。

tabBar 是一個數組,只能配置最少2個、最多5個 tab,tab 會依數組的順序排序。

微信小程式的配置

更多微信小程式的設定相關文章請關注PHP中文網!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板