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ính	Kiểu dữ liệu	Bắt buộc	Mô tả
pages	array of strings	✓	Đường dẫn tương đối tới các pages
window	Object	✕	Cấu hình hành vi của window chưa page
tabBar	Object	✕	Cấ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ính	Kiểu dữ liệu	Giá trị mặc định	Mô tả
defaultTitle	string	""	Title mặc định của page.
pullRefresh	string	"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`
allowsBounceVertical	string	"YES"	Xác định cho phép kéo màn hình vượt quá size của window hay không?
transparentTitle	string	"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.
titleBarColor	HexColor	"#FFFFFF"	Quy định màu nền của navigation bar.
theme	string	"default"	Quy định theme của navigation bar. Giá trị là `reverse` hoặc `default`.
backgroundColor	HexColor	"#FFFFFF"	Quy định màu nền mặc định của page.
titleBarBottomColor	HexColor	"#EBEBF0"	Quy định màu cho border bottom của NavigationBar.
disableHardwareBack	string	"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ính	Kiểu dữ liệu	Giá trị mặc định	Mô tả
textColor	HexColor	"#000000"	Màu sắc của text trong tab bar item.
selectedColor	HexColor	"#000000"	Màu sắc của text trong tab bar item khi được lựa chọn.
backgroundColor	HexColor	"#FFFFFF"	Màu nền của tab bar.
borderTopActiveColor	HexColor	"#EBEBF0"	Màu border top của tab bar đối với tab được chọn.
borderTopColor	HexColor	"#EBEBF0"	Màu border top của tab bar.
items	Array	required	Cấ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ính	Kiểu dữ liệu	Giá trị mặc định	Mô tả
pagePath	String	required	Đường dẫn tới page.
name	String	required	Tên hiển thị của item.
icon	String	null	Đường dẫn tới icon khi item chưa được chọn.
activeIcon	String	null	Đườ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"
      }
    ]
  }
}

Cấu hình app.json​

pages​

window​

tabBar​

Cấu hình app.json

pages

window

tabBar