Skip to main content

Cấu hình chung

Trong một dự án, file app.json sẽ được dùng để cấu hình cho một ứng dụng Tini App. Nội dung cấu hình sẽ được áp dụng cho việc quản lý các pages và path tới các page trong ứng dụng, hay cấu hình giao diện cho app như title, tabBar, ...

Dưới đây là ví dụ của một app.json với một vài cấu hình thông dụng:

{
"pages": [
"pages/tabBar/API/index",
"pages/tabBar/component/index",
"pages/component/view/index",
"pages/component/scrollview/index"
],
"window": {
"defaultTitle": "My App",
"titleBarColor": "#fff",
"theme": "reverse",
"backgroundColor": "#F5F7FC",
"allowsBounceVertical": "NO"
},
"tabBar": {
"items": [
{
"name": "API",
"pagePath": "pages/tabBar/API/index",
"icon": "images/icon_API.png",
"activeIcon": "images/icon_API_HL.png"
},
{
"name": "Components",
"pagePath": "pages/tabBar/component/index",
"icon": "images/icon_component.png",
"activeIcon": "images/icon_component_HL.png"
}
]
}
}

Cấu hình app.json

Thuộc tínhKiểu dữ liệuBắt buộcMô tả
pagesarray of stringsĐường dẫn tương đối tới các pages
windowObjectCấu hình hành vi của window chưa page
tabBarObjectCấu hình TabBar ở dưới của một page

pages

Đây là cấu hình giúp cho Tini App Framework xác định được các pages và đường dẫn tới các files của page. Khi định nghĩa không cần xác định đuôi của file, framework sẽ tự động tìm kiếm file .json, .js, .jsx và .style dựa trên page path được quy định.

Lưu ý:

  • Các pages không được quy định ở đây sẽ không được bundle khi app được build. Việc chuyển tới một page thường bị lỗi có thể do quên trong việc quy định page ở đây.
  • Item đầu tiên trong array sẽ được chọn làm trang khởi tạo khi app được mở lên. Nên cần lưu ý khi thay đổi thứ tự của item đầu tiên.

Giả sử project có cấu trúc thư mục như sau:

- miniapp-project/
|- src/
|- pages/
|- index/
| index.js
| index.json
| index.jsx
| index.style
| app.js
| app.json
| app.style
| package.json

Cấu hình để framework có thể load được page/index/index như sau:

{
"pages": ["pages/index/index"]
}

window

Đây là cấu hình dùng để quy định cách hiển thị và hành vi của StatusBar, NavigationBar, Titles và window background colors.

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
defaultTitlestring""Title mặc định của page.
pullRefreshstring"YES"Xác định xem có cho phép pull down to refresh hay không ? Lưu ý: cấu hình này chỉ có ý nghĩa khi allowsBounceVertical = YES
allowsBounceVerticalstring"YES"Xác định cho phép kéo màn hình vượt quá size của window hay không?
transparentTitlestring"none"Cấu hình thuộc tính trong suốt của navigation bar. Hỗ trợ 3 giá trị none - có màu. always - trong suốt. auto sẽ tự động chuyển giữa trong suốt và có màu tuỳ theo vị trí scroll trên màn hình.
titleBarColorHexColor"#FFFFFF"Quy định màu nền của navigation bar.
themestring"default"Quy định theme của navigation bar. Giá trị là reverse hoặc default.
backgroundColorHexColor"#FFFFFF"Quy định màu nền mặc định của page.
titleBarBottomColorHexColor"#EBEBF0"Quy định màu cho border bottom của NavigationBar.
disableHardwareBackstring"YES"Xác định cho phép vuốt để quay lại trang trước đó hay không?

Ví dụ:

{
"window": {
"defaultTitle": "My App",
"titleBarColor": "#fff",
"theme": "reverse",
"backgroundColor": "#F5F7FC",
"allowsBounceVertical": "NO",
"disableHardwareBack": "NO"
}
}

tabBar

Nếu ứng dụng có sử dụng Tab Bar, bạn có thể dùng cấu hình này để quy định cách hiển thị cũng như hành vi của Tab Bar.

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
textColorHexColor"#000000"Màu sắc của text trong tab bar item.
selectedColorHexColor"#000000"Màu sắc của text trong tab bar item khi được lựa chọn.
backgroundColorHexColor"#FFFFFF"Màu nền của tab bar.
borderTopActiveColorHexColor"#EBEBF0"Màu border top của tab bar đối với tab được chọn.
borderTopColorHexColor"#EBEBF0"Màu border top của tab bar.
itemsArrayrequiredCấu hình từng item trong tab bar.

Với mỗi tab bar item có thể cấu hình với các thuộc tính sau:

Thuộc tínhKiểu dữ liệuGiá trị mặc địnhMô tả
pagePathStringrequiredĐường dẫn tới page.
nameStringrequiredTên hiển thị của item.
iconStringnullĐường dẫn tới icon khi item chưa được chọn.
activeIconStringnullĐường dẫn tới icon khi item được chọn.

Để hiển thị tối ưu, bạn nên chọn hình cho icon với kích cỡ 60x60 px.

Ví dụ cấu hình tabBar trong app.json:

{
"tabBar": {
"items": [
{
"name": "API",
"pagePath": "pages/tabBar/API/index",
"icon": "images/icon_API.png",
"activeIcon": "images/icon_API_HL.png"
},
{
"name": "Components",
"pagePath": "pages/tabBar/component/index",
"icon": "images/icon_component.png",
"activeIcon": "images/icon_component_HL.png"
}
]
}
}