react-native-miniapp-webview

Module react-native hỗ trợ việc hiển thị website trên ứng dụng và giao tiếp nội dung, mã hóa dữ liệu giữa web và app.

Cài đặt

npm install react-native-miniapp-webview

hoặc

yarn add react-native-miniapp-webview

Yêu cầu

• React-native: >= 0.63
• Nodejs : >= 18
• Android: >= 10
• iOS: >= 10

Chi tiết props của RNWebviewOnboard

Các props cơ bản của react-native-webview

source

| Kiểu dữ liệu | Bắt buộc | Platform | |--------------|----------|--------------| | object | có | IOS, Android |

Cho phép truyền vào là url của website hoặc source html

• Properties

  • uri : là url của website

  • html : là code html

• ví dụ:

source : {{ uri : “https://domain-name.com” }}

automaticallyAdjustContentInsets

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|--------------|----------| | boolean | không | IOS, Android | true |

Kiểm soát xem có điều chỉnh phần nội dung lồng ghép cho các chế độ xem web được đặt phía sau thanh điều hướng, thanh tab hoặc thanh công cụ hay không.

injectedJavaScript

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|--------------|----------| | string | không | IOS, Android | n/a |

Cho phép nhúng mã javascript và thực thi chúng trên website

injectedJavaScriptBeforeContentLoaded

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|--------------|----------| | boolean | không | IOS, Android | n/a |

Đặt tùy chọn này cho phép đoạn javascript sẽ được nhúng vào head của trang web

injectedJavaScriptObject

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|----------|----------| | object | không | Android | n/a |

Cho phép nhúng object lên website

onError

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | function | không | Android/IOS | n/a |

Hàm được gọi khi tải website không thành công

onLoad

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | function | không | Android/IOS | n/a |

Hàm được gọi khi website tải

onLoadEnd

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | function | không | Android/IOS | n/a |

Hàm được gọi khi website được tải xong ( thành công , thất bại )

onLoadStart

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | function | không | Android/IOS | n/a |

Hàm được gọi trước khi webview tải trang web

onScroll

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | function | không | Android/IOS | n/a |

Hàm được gọi khi website được cuộn

originWhitelist

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | list | không | Android/IOS | n/a |

Cho phép điều hướng đến danh sách các trang web được cấu hình. Nếu khi điều hướngđến trang web không có trong danh sách sẽ bị chặn

renderError

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | function | không | Android/IOS | n/a |

Hàm được gọi khi render webview bị lỗi.

onShouldStartLoadWithRequest

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|-------------| | function | không | Android/IOS | Return true |

Cho phép tùy chỉnh request , header của website khi được render. Return ‘True’ nếu muốn tiếp tục render webview hoặc ‘false’ để dừng render webview

javaScriptEnabled

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|-------------| | boolean | không | Android/IOS | Return true |

Cho phép bật quản lý javascript của website

thirdPartyCookiesEnabled

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | boolean | không | Android/IOS | true |

Cho phép bật cookie của bên thứ 3 trên website

allowsFullscreenVideo

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | boolean | không | Android/IOS | false |

Cho phép bật video ở chế độ toàn màn hình

scrollEnabled

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | boolean | không | Android/IOS | false |

Cho phép tắt hoặc bật thanh scroll của website

cacheEnabled

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | boolean | không | Android/IOS | true |

Cấu hình webview có nên hiển thị nội dung website qua bộ nhớ đệm của trình duyệt hay không.

Danh sách props custom

hideToolbar

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | boolean | không | Android/IOS | false |

Cho phép hiển ẩn thanh điều hướng webview

hideSpinLoading

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | boolean | không | Android/IOS | false |

Cho phép ẩn loading khi tải website

onMessageEventsCallback

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | function | không | Android/IOS | false |

Cho phép app lắng nghe những sự kiện web giao tiếp với webview.

Danh sách các event_name mà app có thể listen từ web.

| Tên event | Dữ liệu | Platform | Mô tả | |---------------|---------|--------------|------------------------------------------------| | EXIT | | Android, iOS | Thông báo cho app khi web thực hiện event EXIT | | LOGIN_SUCCESS | | ANDROID, iOS | Thực hiện login vào web thành công |

onInitComponents

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | object | không | Android/IOS | false |

App truyền dữ liệu của nghiệp vụ, dữ liệu lưu trữ tại App khi khởi tạo webview. Sau khi webview được render xong thì dữ liệu sẽ được truyền tải lên web để ghi nhận thông qua events ‘INIT’

enableDebug

| Kiểu dữ liệu | Bắt buộc | Platform | Mặc định | |--------------|----------|-------------|----------| | boolean | không | Android/IOS | false |

Bật debug hiển thị log của module webview trên console

Giao tiếp giữa Website và Mobile App

Giao tiếp giữa website và app dựa trên cơ chế chuyền tải message giữa web và app. Trong quá trình giao tiếp sẽ định nghĩa các message cơ bản phục vụ cho các nghiệp vụ đặc trưng riêng.

INIT

| Tên Event | Request | Response | Sender | |-----------|---------|----------|---------| | INIT | | N/A | Webview |

SDK gửi thông tin INIT lên web sau khi webview tải xong web. Dữ bao gồm thông tin tài khoản đã đăng nhập , thông tin thiết bị , các thông tin khác do app muốn truyền tải.

EXIT

| Tên Event | Request | Response | Sender | |-----------|---------|----------|---------| | EXIT | | N/A | Webview |

Website gửi yêu cầu báo user thao tác thoát khỏi flow webview

OPEN_PHONE_CALL

| Tên Event | Request | Response | Sender | |-----------------|---------|----------|---------| | OPEN_PHONE_CALL | | N/A | Webview |

Website báo app mở ứng dụng gọi điện.

LOGIN_SUCCESS

| Tên Event | Request | Response | Sender | |---------------|---------|----------|---------| | LOGIN_SUCCESS | | N/A | Webview |

Gửi yêu cầu từ webview báo đăng nhập viettel money thành công

DEVICE_CONFIG

| Tên Event | Request | Response | Sender | |---------------|---------|----------|---------| | DEVICE_CONFIG | | | Webview |

Website yêu cầu app cung cấp thông tin thiết bị

ENCRYPT_DATA

| Tên Event | Request | Response | Sender | |--------------|---------|----------|---------| | ENCRYPT_DATA | | | Webview |

Website yêu cầu mã hóa dữ liệu

DECRYPT_DATA

| Tên Event | Request | Response | Sender | |--------------|---------|----------|---------| | DECRYPT_DATA | | | Webview |

Website gửi yêu cầu giải mã dữ liệu

Mã lỗi

| errorCode | errorMessageVN | errorMessageEN | |-----------|---------------------------------------------|---------------------------------------------------| | SDK000 | Thành công | Success | | SDK010 | Lỗi chung trong quá trình đăng nhập | General login error | | SDK011 | Lỗi thông tin đăng nhập không chính xác | Incorrect login information error | | SDK020 | Lỗi kết nối khi đăng nhập | Connection error during login | | SDK030 | Lỗi xác thực đa yếu tố trong đăng nhập | Multi-factor authentication error in login | | SDK040 | Lỗi hết hạn phiên đăng nhập | Session expiration error | | SDK050 | Lỗi quyền truy cập khi đăng nhập | Access permission error during login | | SDK060 | Các lỗi đăng nhập khác | Other login errors | | SDK200 | Lỗi mã hóa dữ liệu chung | General data encryption error | | SDK201 | Lỗi không tìm thấy khóa mã hóa | Encryption key not found error | | SDK210 | Lỗi kích thước khóa mã hóa không phù hợp | Inappropriate encryption key size error | | SDK220 | Lỗi trong thuật toán mã hóa | Encryption algorithm error | | SDK230 | Lỗi mã hóa do dữ liệu đầu vào không hợp lệ | Invalid input data encryption error | | SDK240 | Lỗi mã hóa do vấn đề hệ thống | System-related encryption error | | SDK250 | Lỗi bảo mật trong quá trình mã hóa | Security error during encryption | | SDK260 | Lỗi mã hóa khác | Other encryption errors | | SDK300 | Lỗi giải mã dữ liệu chung | General data decryption error | | SDK301 | Lỗi không tìm thấy khóa giải mã | Decryption key not found error | | SDK310 | Lỗi kích thước khóa giải mã không phù hợp | Inappropriate decryption key size error | | SDK320 | Lỗi trong thuật toán giải mã | Decryption algorithm error | | SDK330 | Lỗi giải mã do dữ liệu đầu vào không hợp lệ | Invalid input data decryption error | | SDK340 | Lỗi giải mã do vấn đề hệ thống | System-related decryption error | | SDK350 | Lỗi bảo mật trong quá trình giải mã | Security error during decryption | | SDK360 | Lỗi giải mã khác | Other decryption errors | | SDK400 | Lỗi cấu hình thiết bị chung | General device configuration error | | SDK401 | Lỗi không tìm thấy cấu hình thiết bị | Device configuration not found error | | SDK410 | Lỗi cấu hình không hợp lệ | Invalid device configuration error | | SDK420 | Lỗi cấu hình do phần mềm không tương thích | Software compatibility device configuration error | | SDK430 | Lỗi cấu hình liên quan đến bảo mật | Security-related device configuration error | | SDK440 | Lỗi cấu hình thiết bị khác | Other device configuration errors | | SDK500 | Lỗi camera chung | General camera error | | SDK501 | Lỗi không có quyền truy cập camera | No camera access permission error | | SDK510 | Lỗi kỹ thuật camera | Camera technical error | | SDK520 | Lỗi camera do vấn đề phần cứng | Hardware-related camera error | | SDK530 | Lỗi camera do vấn đề phần mềm | Software-related camera error | | SDK540 | Lỗi camera do môi trường sử dụng | Environmental camera error | | SDK550 | Lỗi bảo mật camera | Camera security error | | SDK560 | Lỗi camera khác | Other camera errors |