Cấu hình chung cho H5 App

Trong một dự án, file app-config.json sẽ được dùng để cấu hình cho một ứng dụng V-MiniApp. 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-config.json với một vài cấu hình thông dụng:

{
  "appIdentifier": "YOUR_APP_ID",
  "appName": "YOUR_APP_NAME",
  "h5App": "YES",
  "window": {
    "defaultTitle": "Mini App",
    "titleBarColor": "#000000",
    "titleColor": "#fff",
    "transparentTitle": "none"
  },
  "permissions": {
    "vi": {
      "userInfo": "Để sử dụng cho mục đích cá nhân hóa trải nghiệm cho app demo",
      "authCode": "Để xác thực tài khoản và đồng bộ dữ liệu cho app demo",
      "camera": "Để chụp ảnh, quét mã QR, hoặc quay video cho app demo",
      "media": "Để lưu ảnh hoặc video về thiết bị của bạn cho app demo",
      "location": "Để lấy vị trí của thiết bị dùng cho mục đích định vị và chỉ đường cho app demo",
      "contact": "Để lấy thông tin liên hệ mà bạn chọn từ Danh bạ trên thiết bị cho app demo",
      "bluetooth": "Để kết nối với các thiết bị ngoại vi cho app demo",
      "clipboard": "Để giúp bạn copy và paste thông tin nhanh cho app demo",
      "biometrics": "Để sử dụng xác thực sinh trắc học (vân tay, FaceID) cho bảo mật và ký số cho app demo"
    },
    "en": {
      "userInfo": "To personalize your experience in app demo",
      "authCode": "To authenticate your account and sync data for app demo",
      "camera": "To take photos, scan QR codes, or record videos for app demo",
      "media": "To save photos or videos to your device for app demo",
      "location": "To get your device's location for navigation and directions in app demo",
      "contact": "To access the contact information you select from your device's Contacts for app demo",
      "bluetooth": "To connect to peripheral devices for app demo",
      "clipboard": "To help you quickly copy and paste information for app demo",
      "biometrics": "To use biometric authentication (fingerprint, FaceID) for security and digital signatures in app demo"
    }
  }
}

Cấu hình app-config.json

Thuộc tính	Kiểu dữ liệu	Bắt buộc	Mô tả
appIdentifier	string	✓	Định danh duy nhất của ứng dụng, thường sử dụng định dạng reverse domain (VD: `com.example.myapp`)
appName	string	✓	Tên hiển thị của ứng dụng, được sử dụng để hiển thị cho người dùng cuối
h5App	string	✓	Đối với H5 thì giá trị này bắt buộc bằng `"YES"` nếu không sẽ render MiniApp DSL
window	Object	✕	Cấu hình hành vi của window chứa page
permissions	Object	✕	Cấu hình message cho popup xin quyền cho từng permission. Có thể truyền đa ngôn ngữ.
disableKeyboardAvoiding	string	✓	Mặc định sẽ có 1 lớp keyboard avoiding view để đẩy keyboard ko bị overrlap input, có thể gán giá trị YES để tự handle phần keyboard

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.
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.

Ví dụ:

{
  "appIdentifier": "myapp.vapp.com",
  "appName": "My App Name",
  "h5App": "YES",
  "window": {
    "defaultTitle": "Mini App",
    "titleBarColor": "#000000",
    "titleColor": "#fff",
    "transparentTitle": "none"
  },
  "permissions": {
    "vi": {
      "userInfo": "Để sử dụng cho mục đích cá nhân hóa trải nghiệm cho app demo",
      "authCode": "Để xác thực tài khoản và đồng bộ dữ liệu cho app demo",
      "camera": "Để chụp ảnh, quét mã QR, hoặc quay video cho app demo",
      "media": "Để lưu ảnh hoặc video về thiết bị của bạn cho app demo",
      "location": "Để lấy vị trí của thiết bị dùng cho mục đích định vị và chỉ đường cho app demo",
      "contact": "Để lấy thông tin liên hệ mà bạn chọn từ Danh bạ trên thiết bị cho app demo",
      "bluetooth": "Để kết nối với các thiết bị ngoại vi cho app demo",
      "clipboard": "Để giúp bạn copy và paste thông tin nhanh cho app demo",
      "biometrics": "Để sử dụng xác thực sinh trắc học (vân tay, FaceID) cho bảo mật và ký số cho app demo"
    },
    "en": {
      "userInfo": "To personalize your experience in app demo",
      "authCode": "To authenticate your account and sync data for app demo",
      "camera": "To take photos, scan QR codes, or record videos for app demo",
      "media": "To save photos or videos to your device for app demo",
      "location": "To get your device's location for navigation and directions in app demo",
      "contact": "To access the contact information you select from your device's Contacts for app demo",
      "bluetooth": "To connect to peripheral devices for app demo",
      "clipboard": "To help you quickly copy and paste information for app demo",
      "biometrics": "To use biometric authentication (fingerprint, FaceID) for security and digital signatures in app demo"
    }
  }
}

Cấu hình app-config.json​

window​

Cấu hình app-config.json

window