1. 程式人生 > >頭條小程式開發

頭條小程式開發

全域性配置
app.json是一個用來對頭條小程式進行全域性配置的檔案,用來配置頁面的路徑,視窗樣式表現等。

app.json的配置選項如下:

{
“pages”: [
“pages/index/index”,
“pages/logs/index”
],
“window”: {
“navigationBarTitleText”: “Demo”
},
“tabBar”: {
“list”: [{
“pagePath”: “pages/index/index”,
“text”: “首頁”
}, {
“pagePath”: “pages/logs/logs”,
“text”: “日誌”
}]
}
}

app.json 配置項說明

屬性 型別 必填 描述
pages String Array 是 配置頁面路徑
window Object 否 配置預設頁面的視窗表現
tabBar Object 否 配置底部 tab 的表現
debug Boolean 否 配置是否開啟 debug 模式

pages

這個欄位用於配置小程式用到的所有頁面路徑,配置每項是 路徑 + 檔名 這個結構。配置項的第一個頁面路徑就是小程式啟動展示的第一個頁面。

需要注意:保證單個頁面的.json, .js, .ttml, .ttss資源都放在每個頁面路徑的首層

如開發目錄如下:

|____app.ttss
|____app.json
|____project.config.json
|____pages
| |____index
| | |____index.js
| | |____index.json
| | |____index.ttml
| | |____index.ttss
|____app.js
那麼app.json應該這樣配置:

{
“pages”:[
“pages/index/index”
]
}

window

這個欄位用於設定小程式的狀態列、導航條、標題、視窗背景色。

屬性 型別 預設值 描述
navigationBarBackgroundColor HexColor #000000 導航欄背景顏色,如"#000000"
navigationBarTextStyle String white 導航欄標題顏色,僅支援 black/white
navigationBarTitleText String 導航欄標題文字內容
navigationStyle String default 導航欄樣式,僅支援 default/custom。custom 模式可自定義導航欄,只保留右上角膠囊狀的按鈕
backgroundColor HexColor #ffffff 視窗的背景色
backgroundTextStyle String dark 下拉 loading 的樣式,僅支援 dark/light
backgroundColorTop String #ffffff 頂部視窗的背景色,僅 iOS 支援
backgroundColorBottom String #ffffff 底部視窗的背景色,僅 iOS 支援
enablePullDownRefresh Boolean false 是否開啟下拉重新整理,詳見頁面相關事件處理函式
onReachBottomDistance Number 50 頁面上拉觸底事件觸發時距頁面底部距離,單位為px

tabBar

如果你的小程式包含多個tab(客戶端視窗的底部或頂部有 tab 欄可以切換頁面),可以通過 tabBar 配置項指定 tab 欄的表現,以及 tab 切換時顯示的對應頁面。比如設定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 時,此引數無效

page.json

頭條小程式的每一個頁面的視窗表現也可以通過頁面目錄下的.json檔案進行配置,這個頁面的獨立配置會比 app.json 要簡單;

如果 app.json 的 window 欄位裡面配置了某個頁面的視窗樣式,同時該頁面也在自己的 .json檔案中做了對應欄位的配置的話,框架會優先採用頁面裡面的 .json 相應配置項。

具體的配置欄位如下:

屬性 型別 預設值 描述
navigationBarBackgroundColor HexColor #000000 導航欄背景顏色,如"#000000"
navigationBarTextStyle String white 導航欄標題顏色,僅支援 black/white
navigationBarTitleText String 導航欄標題文字內容
backgroundColor HexColor #ffffff 視窗的背景色
backgroundTextStyle String dark 下拉 loading 的樣式,僅支援 dark/light
enablePullDownRefresh Boolean false 是否開啟下拉重新整理,詳見頁面相關事件處理函式。
disableScroll Boolean false 設定為 true 則頁面整體不能上下滾動;只在 page.json 中有效,無法在 app.json 中設定該項
onReachBottomDistance Number 50 頁面上拉觸底事件觸發時距頁面底部距離,單位為px
例子:

{
“navigationBarBackgroundColor”: “#ffffff”,
“navigationBarTextStyle”: “black”,
“navigationBarTitleText”: “頭條介面功能演示”,
“backgroundColor”: “#eeeeee”,
“backgroundTextStyle”: “light”