配置界面，路徑

可以通過配置app.json文件，設置SWAN的界面，路徑，多TAB等。

app.json配置項列表如下：

屬性

類型

必填

描述

網頁

{String，Array}

是

設置頁面路徑

窗口

目的

否

設置頁面展現

示例：{

"pages": [

"pages/index/index",

"pages/detail/detail"

],

"window": {

"navigationBarTitleText": "Demo"

}

}

pages

pages接受一個數組，每一項都是一個字符串，指定SWAN App都有哪些頁面。每一項代表頁面的[路徑+文件名]，數組第一項代表SWAN初始頁面。

SWAN中新增或減少頁面的話，需要在pages中進行配置。

配置項中不需要加文件后綴名，SWAN會自動解析。

如，開發目錄為：pages/

pages/index/index.swan

pages/index/index.css

pages/index/index.js

pages/detail/detail.swan

pages/detail/detail.css

pages/detail/detail.js

app.js

app.json

app.css

則需要在app.json中書寫：{

"pages":[

"pages/index/index",

"pages/detail/detail"

]

}

window

用于設置SWAN的狀態欄，導航條，標題，窗口背景色。

屬性

類型

必填

描述

navigationBarBackgroundColor

HexColor

＃000000

導航欄背景顏色，如“＃000000”

navigationBarTextStyle

String

white

導航欄標題顏色，目前僅支持黑/白

navigationBarTitleText

String

導航欄標題文字內容

backgroundColor

HexColor

#FFFFFF

背景顏色

backgroundTextStyle

String

dark

下拉背景字體，loading圖的樣式，僅支持暗/光

enablePullDownRefresh

Boolean

false

是否開啟下拉刷新

onReachBottomDistance

Number

50

頁面上拉觸底事件觸發時距頁面底部距離，單位為px

示例：{

"window":{

"navigationBarBackgroundColor": "#ffffff",

"navigationBarTextStyle": "black",

"navigationBarTitleText": "swan接口功能演示",

"backgroundColor": "#eeeeee",

"backgroundTextStyle": "light"

}

}

配置全局數據

app.js中存放全局的JS邏輯。

示例：App({

onLaunch: function () {

console.log('SWAN launch');

},

onShow: function () {

console.log('SWAN展現');

},

onHide: function () {

console.log('SWAN當前處于后臺');

},

onError: function () {

console.log('SWAN發生錯誤');

},

globalData: 'SWAN'

});

SWAN生命周期

屬性

類型

描述

觸發時機

onLaunch

Function

SWAN初始化的生命周期函數

當SWAN App初始化完成時，會觸發onLaunch(全局只觸發一次)

onShow

Function

SWAN App展示時調用的生命周期函數

SWAN App從后臺進入前臺，觸發onShow

onHide

Function

SWAN App隱藏時調用的生命周期函數

SWAN App從前臺進入后臺，觸發onHide

onLoad

Function

監聽頁面加載的生命周期函數

SWAN App頁面加載完成，觸發onLoad

onReady

Function

監聽頁面初次渲染完成的生命周期函數

SWAN App頁面渲染完成，觸發onReady

onunload

Function

監聽頁面卸載的生命周期函數

頁面卸載，觸發onUnload

onerror

Function

錯誤監聽函數

當SWAN App發生錯誤時，會觸發

總結

以上是生活随笔為你收集整理的百度小程序html转码,百度小程序全局配置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。