Uni-app入坑筆記(二)

Uni-app配置文件--------pages.json:

pages.json文件用來對uni-app進行全局配置,決定頁面文件的路徑,窗口表現,設置多tab等

pages.json配置項列表:

globalStyle     Object    　　　　否    設置默認界面的窗口表現

pages   　　   Object  Array  　 是    設置頁面路徑及窗口表現

tabBar     　   Object     　　　   否    設置底部  tab  的表現

condition        Object    　　　　否    啟動模式設置

以下是包含了所有配置選項的pages.json:

{
  "pages": [{
    "path": "pages/component/index",
    "style": {
      "navigationBarTitleText": "組件"
    }
  }, {
    "path": "pages/API/index",
    "style": {
      "navigationBarTitleText": "接口"
    }
  }, {
    "path": "pages/component/view/index",
    "style": {
      "navigationBarTitleText": "view"
    }
  }],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "演示",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
      "pagePath": "pages/component/index",
      "iconPath": "static/image/icon_component.png",
      "selectedIconPath": "static/image/icon_component_HL.png",
      "text": "組件"
    }, {
      "pagePath": "pages/API/index",
      "iconPath": "static/image/icon_API.png",
      "selectedIconPath": "static/image/icon_API_HL.png",
      "text": "接口"
    }]
  }
}

globalStyle:

用於設置應用的導航欄,導航條,標題,窗口顏色等,是全局樣式,范圍比pages.style大

navigationBarBackgroundColor HexColor #000000 導航欄背景顏色 
navigationBarTextStyle String white 導航欄標題顏色，僅支持 black/white 
navigationBarTitleText String  導航欄標題文字內容 
navigationStyle String default 導航欄樣式，僅支持 default/custom。 
backgroundColor HexColor #ffffff 窗口的背景色 微信小程序

注意:navigationStyle只在pages.json  ->  globalStyle中設置生效.開啟custom后,所有窗口均無導航欄

pages:

接收一個數組,來指定應用的頁面組成.每一項表示對應的頁面信息,應用中新增/減少頁面都需要對pages數組進行修改

文件名你需要寫后綴,框架會自動找尋路徑下的頁面資源.

注意:pages節點的第一頁為應用入口頁(既首頁).

代碼示例:

路徑

則需要在pages.json 中填寫如下代碼:

{
  "pages": [{
      "index": {
        "path": "pages/index/index"
      }
    },
//向數組中分別添加兩個對象,對象內以對象為屬性,內層對象的屬性值為路徑
    {
      "login": {
        "path": "pages/login/login"
      }
    }
  ]
}

pages.style:

用於設置每個頁面的狀態欄,導航條,標題,窗口背景顏色等,是針對各個獨立的頁面進行設置.

navigationBarBackgroundColor HexColor #000000 導航欄背景顏色，如"#000000" 
navigationBarTextStyle String white 導航欄標題顏色，僅支持 black/white 
navigationBarTitleText String  導航欄標題文字內容 
backgroundColor HexColor #ffffff 窗口的背景色 微信小程序
backgroundTextStyle String dark 下拉 loading 的樣式，僅支持 dark/light 
enablePullDownRefresh Boolean false 是否開啟下拉刷新，詳見頁面相關事件處理函數 
onReachBottomDistance Number 50 頁面上拉觸底事件觸發時距頁面底部距離，單位為px 
navigationStyle String default 導航欄樣式，僅支持 default/custom。custom 模式可自定義導航欄，只保留右上角膠囊狀的按鈕。 微信小程序
backgroundColorTop String #ffffff 頂部窗口的背景色。 微信小程序且為 iOS
backgroundColorBottom String #ffffff 底部窗口的背景色。 微信小程序且為 iOS

 代碼示例:

{
  "pages": [{
      "index": {
        "path": "pages/index/index",
        //在index頁面下創建style對象進行頁面設置
        "style": {
            "navigationBarTitleText": "首頁",//設置頁面標題文字
          "enablePullDownRefresh":true//開啟下拉刷新
        }
      }
    },
    ...
  ]
}    

tabBar:

如果應用是一個多tab應用,可以通過tabBar配置項指定tab欄的表現以及tab切換時顯示的對應頁.

tips:當設置position為top時,將不顯示icon

tabBar中的list是一個數組,只能配置2~5個tab,tab按數組的順序排序.

color HexColor 是  tab 上的文字默認顏色
selectedColor HexColor 是  tab 上的文字選中時的顏色
backgroundColor HexColor 是  tab 的背景色
borderStyle String 否 black tabbar 上邊框的顏色，僅支持 black/white
list Array 是  tab 的列表，詳見 list 屬性說明，最少2個、最多5個 tab
position String 否 bottom 可選值 bottom、top

其中list接收一個數組,數組中的每一項都是一個對象,其屬性如下:

pagePath String 是 頁面路徑，必須在 pages 中先定義
text String 是 tab 上按鈕文字
iconPath String 否 圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px，當 postion 為 top 時，此參數無效，不支持網絡圖片
selectedIconPath String 否 選中時的圖片路徑，icon 大小限制為40kb，建議尺寸為 81px * 81px ，當 postion 為 top 時，此參數無效

condition:

啟動模式配置.僅開發期間生效,用於模擬直達頁面的場景,例如小程序轉發之后,用戶點擊所打開的界面

current Number 是 當前激活的模式，list節點的索引值
list Array 是 啟動模式列表

list說明:

name String 是 啟動模式名稱

path String 是 啟動頁面路徑

query String 否 啟動參數，可在頁面的 onLoad 函數里獲得

注意:在5+app里真機運行可以直接打開配置的頁面,微信開發者工具里需要手動改變編譯模式:

代碼示例:

"condition": { //模式配置，僅開發期間生效
    "current": 0, //當前激活的模式（list 的索引項）
    "list": [{
            "name": "swiper", //模式名稱
            "path": "pages/component/swiper/swiper", //啟動頁面，必選
            "query": "interval=4000&autoplay=false" //啟動參數，在頁面的onLoad函數里面得到。
        },
        {
            "name": "test",
            "path": "pages/component/switch/switch"
        }
    ]
}

配置文件---------manifest.json

manifest.json文件是應用的配置文件,用於指定應用的名稱,圖標,權限等.

name String  應用名稱
appid String 新建uni-app項目時，DCloud雲端分配。 應用標識
description String  應用描述
versionName String  版本名稱，例如：1.0.0
versionCode String  版本號，例如：36
app-plus Object  5+App 特有配置
quickapp Object  快應用特有配置，即將支持
mp-weixin Object  微信小程序特有配置
mp-baidu Object  百度小程序特有配置，即將支持
mp-alipay Object  支付寶小程序特有配置，即將支持

 app-plus:

modules Object 權限模塊
distribute Object 5+App 發布信息

plus----->modules 可配置的權限模塊:

Contacts 系統通訊錄
Fingerprint 指紋識別
Maps 地圖
Messaging 短彩郵件消息
OAuth 登錄授權
Payment 支付
Push 消息推送
Share 社交分享
Speech 語音識別
Statistic 統計
VideoPlayer 視頻播放
LivePusher 直播推流

plus----->distribute配置說明:

android Object  Android 應用配置
ios Object  iOS 應用配置
sdkConfigs Object  SDK配置

tips:　　manifest.json文件的配置推薦在HBuilderX提供的可視化操作界面完成.

部分配置在打包時的操作界面補全,例如證書等信息

Native.js全縣部分會根據配置的模塊權限,在打包后自動填充

部分 modules 是默認的,不需要配置.

mp-weixin:

appid String 微信小程序的AppID，登錄  申請