'trang. html')} /> ``` và trong 5. 7. 0, nó bị treo trên Android (vẫn hoạt động trên iOS). Tôi cho rằng điều đó xảy ra là do [dòng này](https. //github. com/react-native-community/react-native-webview/blob/24be864cebab84e31cf5cae229bd8cc7d9c09a3d/src/WebView. Android. tsx#L254), do js giới thiệu với ts viết lại ([cam kết này](https. //github. com/react-native-community/react-native-webview/commit/453b7dd3a0b821de6dd0578c5df7d4004d74f46c)). Có vẻ như tác giả của phần viết lại này đã quên xử lý việc sử dụng `require` trong `source` prop. Tôi hiện đang bỏ qua vấn đề theo cách này. ``` ``` Tuy nhiên, điều này cần được khắc phục và cần thêm thử nghiệm để đảm bảo điều đó không xảy ra lần nữa Tôi đã thảo luận trên CodeSpeedy về cách tạo ứng dụng Android tải trang web hoặc trang web trong ứng dụng Android bằng cách sử dụng lớp WebView dành cho Android có sẵn. Có thể bạn đã biết rằng bạn chỉ cần đặt URL bên trong loadUrl() và bạn sẽ có thể tải trang web đó từ ứng dụng Android của mình Show
Bây giờ, giả sử bạn cần tải trang HTML cục bộ hoặc tệp HTML ngoại tuyến trong WebView. Vậy bạn phải làm gì? . Nó thực sự sẽ rất dễ dàng. Hãy đi về phía trước Sử dụng lớp WebView của Android để tải tệp HTML cục bộ hoặc trang HTML ngoại tuyếnchúng ta đi đây. Chỉ cần nhớ loadUrl() nơi tôi chỉ cho bạn cách tải trang web này mWebView.loadUrl("http://170.187.134.184"); Nó sẽ tải trang web của chúng tôi trong ứng dụng Android. Bây giờ phải làm gì đối với tệp HTML ngoại tuyến hoặc cục bộ để nó cũng sẽ tải bên trong ứng dụng Android. Chà, để làm điều đó trước tiên, bạn cần tạo một thư mục tài nguyên Android mới và đặt tên cho nó là nội dung bên trong thư mục ứng dụng giống như hình bên dưới Chà, bạn có thể đính kèm CSS, JavaScript và tất cả những gì bạn cần cho một mẫu HTML. Điều đó có nghĩa là bạn có thể đặt mẫu HTML hoàn chỉnh bên trong thư mục này. Bây giờ để tải nó trong WebView, bạn cần sử dụng mã được cung cấp bên dưới myWebView.loadUrl("file:///android_asset/sample.html"); Tất cả các mã khác sẽ được giữ nguyên. Để xem mã đầy đủ của tệp bố cục và Java chính, tôi giới thiệu bạn đến bài đăng này – Chuyển đổi mẫu HTML thành ứng dụng Android – Android Studio Trong bản dựng AppStudio mới nhất của chúng tôi dành cho Android (được xây dựng qua Appstudio v. 5. 4. 142), khi chúng tôi cố gắng mở một địa phương. Tệp HTML trong WebView, ứng dụng hiển thị cho chúng tôi lỗi ERR_ACCESS_DENIED mà tôi cho rằng có liên quan đến sự cố Qt bên dưới. Chức năng này hoạt động trơn tru trong các bản phát hành trước (Mặc dù tôi nghĩ rằng bản dựng thành công cuối cùng là thông qua phiên bản 4. x. phát hành AppStudio) Tôi tò mò liệu vấn đề này có nằm trong tầm ngắm của nhóm AppStudio cho bản phát hành sắp tới hay không, xin cảm ơn rất nhiều, Bạn có thể cung cấp nội dung dựa trên web—chẳng hạn như HTML, JavaScript và CSS—để ứng dụng của bạn sử dụng mà bạn biên dịch tĩnh vào ứng dụng thay vì tìm nạp qua internet Nội dung trong ứng dụng không yêu cầu truy cập internet hoặc tiêu tốn băng thông của người dùng và nếu nội dung được thiết kế dành riêng cho chỉ dành cho WebView—nghĩa là nội dung đó phụ thuộc vào việc giao tiếp với ứng dụng gốc—thì người dùng không thể vô tình tải nội dung đó vào một Tuy nhiên, có một số nhược điểm đối với nội dung trong ứng dụng. Cập nhật nội dung dựa trên web yêu cầu gửi bản cập nhật ứng dụng mới và có khả năng nội dung không khớp giữa nội dung trên trang web và nội dung trong ứng dụng trên thiết bị của bạn nếu người dùng có phiên bản ứng dụng lỗi thời WebViewAssetLoaderprivate static class LocalContentWebViewClient extends WebViewClientCompat { private final WebViewAssetLoader mAssetLoader; LocalContentWebViewClient(WebViewAssetLoader assetLoader) { mAssetLoader = assetLoader; } @Override @RequiresApi(21) public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) { return mAssetLoader.shouldInterceptRequest(request.getUrl()); } @Override @SuppressWarnings("deprecation") // to support API < 21 public WebResourceResponse shouldInterceptRequest(WebView view, String url) { return mAssetLoader.shouldInterceptRequest(Uri.parse(url)); } }4 là một cách linh hoạt và hiệu quả để tải nội dung trong ứng dụng trong một đối tượng private static class LocalContentWebViewClient extends WebViewClientCompat { private final WebViewAssetLoader mAssetLoader; LocalContentWebViewClient(WebViewAssetLoader assetLoader) { mAssetLoader = assetLoader; } @Override @RequiresApi(21) public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) { return mAssetLoader.shouldInterceptRequest(request.getUrl()); } @Override @SuppressWarnings("deprecation") // to support API < 21 public WebResourceResponse shouldInterceptRequest(WebView view, String url) { return mAssetLoader.shouldInterceptRequest(Uri.parse(url)); } }5. Lớp này hỗ trợ
Bao gồm private static class LocalContentWebViewClient extends WebViewClientCompat { private final WebViewAssetLoader mAssetLoader; LocalContentWebViewClient(WebViewAssetLoader assetLoader) { mAssetLoader = assetLoader; } @Override @RequiresApi(21) public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) { return mAssetLoader.shouldInterceptRequest(request.getUrl()); } @Override @SuppressWarnings("deprecation") // to support API < 21 public WebResourceResponse shouldInterceptRequest(WebView view, String url) { return mAssetLoader.shouldInterceptRequest(Uri.parse(url)); } }4 trong hồ sơ hoạt động chính của bạn. Sau đây là một ví dụ về tải nội dung web đơn giản từ thư mục nội dung
Ứng dụng của bạn nên định cấu hình phiên bản private static class LocalContentWebViewClient extends WebViewClientCompat { private final WebViewAssetLoader mAssetLoader; LocalContentWebViewClient(WebViewAssetLoader assetLoader) { mAssetLoader = assetLoader; } @Override @RequiresApi(21) public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) { return mAssetLoader.shouldInterceptRequest(request.getUrl()); } @Override @SuppressWarnings("deprecation") // to support API < 21 public WebResourceResponse shouldInterceptRequest(WebView view, String url) { return mAssetLoader.shouldInterceptRequest(Uri.parse(url)); } }4 để phù hợp với nhu cầu của ứng dụng. Phần tiếp theo có một ví dụ Tạo nội dung và tài nguyên trong ứng dụngprivate static class LocalContentWebViewClient extends WebViewClientCompat { private final WebViewAssetLoader mAssetLoader; LocalContentWebViewClient(WebViewAssetLoader assetLoader) { mAssetLoader = assetLoader; } @Override @RequiresApi(21) public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) { return mAssetLoader.shouldInterceptRequest(request.getUrl()); } @Override @SuppressWarnings("deprecation") // to support API < 21 public WebResourceResponse shouldInterceptRequest(WebView view, String url) { return mAssetLoader.shouldInterceptRequest(Uri.parse(url)); } }4 dựa vào phiên bản private static class LocalContentWebViewClient extends WebViewClientCompat { private final WebViewAssetLoader mAssetLoader; LocalContentWebViewClient(WebViewAssetLoader assetLoader) { mAssetLoader = assetLoader; } @Override @RequiresApi(21) public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) { return mAssetLoader.shouldInterceptRequest(request.getUrl()); } @Override @SuppressWarnings("deprecation") // to support API < 21 public WebResourceResponse shouldInterceptRequest(WebView view, String url) { return mAssetLoader.shouldInterceptRequest(Uri.parse(url)); } }9 để tải tài nguyên tương ứng với đường dẫn tài nguyên nhất định. Mặc dù bạn có thể triển khai giao diện này để truy xuất tài nguyên khi ứng dụng của mình cần, nhưng thư viện Webkit sẽ gói 0 và 1 để tải nội dung và tài nguyên Android tương ứngĐể bắt đầu, hãy tạo một số nội dung và tài nguyên cho ứng dụng của bạn. Nói chung
Để thêm các tệp web dựa trên văn bản vào một dự án, hãy làm như sau
mục lục. html
biểu định kiểu. css
Để thêm tệp web dựa trên hình ảnh vào dự án của bạn, hãy làm như sau
Hình 4 hiển thị hình ảnh bạn đã thêm và văn bản từ các mẫu mã trước đó được hiển thị trong một ứng dụng hinh 4. Tệp HTML trong ứng dụng và tệp hình ảnh được hiển thị trong ứng dụng Để hoàn thành ứng dụng, hãy làm như sau
Kết hợp nội dung trong ứng dụng với các tài nguyên từ trang web của bạnỨng dụng của bạn có thể cần tải hỗn hợp nội dung trong ứng dụng và nội dung từ internet, chẳng hạn như trang HTML trong ứng dụng được tạo kiểu bởi CSS của trang web của bạn. private static class LocalContentWebViewClient extends WebViewClientCompat { private final WebViewAssetLoader mAssetLoader; LocalContentWebViewClient(WebViewAssetLoader assetLoader) { mAssetLoader = assetLoader; } @Override @RequiresApi(21) public WebResourceResponse shouldInterceptRequest(WebView view, WebResourceRequest request) { return mAssetLoader.shouldInterceptRequest(request.getUrl()); } @Override @SuppressWarnings("deprecation") // to support API < 21 public WebResourceResponse shouldInterceptRequest(WebView view, String url) { return mAssetLoader.shouldInterceptRequest(Uri.parse(url)); } }4 hỗ trợ trường hợp sử dụng này. Nếu không ai trong số 1 đã đăng ký có thể tìm thấy tài nguyên cho đường dẫn nhất định, thì WebView sẽ quay lại tải nội dung từ internet. Nếu bạn đang trộn nội dung trong ứng dụng với các tài nguyên từ trang web của mình, hãy đảm bảo dành riêng các đường dẫn thư mục, chẳng hạn như 2 hoặc 3, cho các tài nguyên trong ứng dụng. Tránh lưu trữ bất kỳ tài nguyên nào từ trang web của bạn ở những vị trí đó
Xem bản trình diễn WebView trên GitHub để biết ví dụ về trang HTML trong ứng dụng đang tìm nạp dữ liệu JSON được lưu trữ trên web tảiDataWithBaseURLKhi ứng dụng của bạn chỉ cần tải một trang HTML và không cần chặn các nguồn phụ, hãy cân nhắc sử dụng , không yêu cầu nội dung ứng dụng. Bạn có thể sử dụng nó như trong mẫu mã sau
Chọn giá trị đối số một cách cẩn thận
Chúng tôi thực sự khuyên bạn nên sử dụng URL HTTP(S) làm 5, vì điều này đảm bảo ứng dụng của bạn tuân thủ chính sách cùng nguồn gốcNếu bạn không thể tìm thấy 5 phù hợp cho nội dung của mình và muốn sử dụng , thì bạn phải mã hóa nội dung bằng mã hóa phần trăm hoặc. Chúng tôi thực sự khuyên bạn nên chọn mã hóa Base64 và sử dụng API Android để mã hóa mã này theo chương trình, như được hiển thị trong mẫu mã sau
val assetLoader = WebViewAssetLoader.Builder() .addPathHandler("/assets/", AssetsPathHandler(this)) .addPathHandler("/res/", ResourcesPathHandler(this)) .build() webView.webViewClient = LocalContentWebViewClient(assetLoader)6 yêu cầu dữ liệu HTML được mã hóa theo phần trăm. Mã hóa phần trăm bằng tay dễ bị lỗi và không có API Android nào để thực hiện việc này theo chương trình. Chúng tôi thực sự khuyên bạn nên chuyển sang 4 để tránh yêu cầu này hoặc sử dụng API Base64 để mã hóa nội dung, như được hiển thị trong mẫu mã trước đó.
Làm cách nào để tải HTML cục bộ trong WebView Android?Bước 1 − Tạo dự án mới trong Android Studio, đi tới Tệp ⇒ Dự án mới và điền tất cả các chi tiết cần thiết để tạo dự án mới. Bước 2 – Thêm đoạn mã sau vào res/layout/activity_main. xml . Trong đoạn mã trên, chúng tôi đã xem web để hiển thị nội dung html.
Làm cách nào để tải một trang trong WebView Android?Thêm WebView vào ứng dụng của bạn . Thêm một WebView trong bố cục hoạt động Thêm một WebView trong onCreate() Bật JavaScript Liên kết mã JavaScript với mã Android Xử lý các URL tùy chỉnh Điều hướng lịch sử trang web Xử lý thay đổi cấu hình thiết bị Có thể lấy dữ liệu từ các biểu mẫu HTML vào Android trong khi WebView không?Có, bạn có thể , bạn có thể sử dụng javascript để tải nội dung trang web. Sau đó sử dụng webview jsInterface để trả lại nội dung cho mã java của bạn.
Làm cách nào để tải tệp HTML cục bộ trong Android Studio?Bước 1. Để thêm tệp HTML cục bộ vào dự án Android của bạn, phải có một thư mục nội dung trong đó. Để tạo thư mục nội dung trong studio Android, trước tiên hãy mở dự án của bạn ở chế độ Android như trong hình bên dưới. Bước 2. Truy cập ứng dụng > nhấp chuột phải > Mới > Thư mục > Thư mục nội dung và tạo thư mục nội dung . |