即时通信 IM WebView

一、uni-app 使用 WebView

1. 在 vue 页面中引入 WebView 组件。

2. 新增如下请求权限的代码：

注意：说明：

注意：在使用 uni-app 打包 App 时，打包安卓应用，需要增加请求权限的代码；打包成 iOS 应用，无需进行额外配置。

import { onMounted, onBeforeMount } from "vue"const isIos = plus.os.name === 'iOS';onMounted(() => { if (isIos) return; watchPermission(); requestPermission();});const watchPermission = () => { const requestPermission = uni.createRequestPermissionListener(); // 可以根据弹出的弹框操作，来提示对应的语句 requestPermission.onConfirm((e) => { console.log('the permission request is confirm ', e); });};const requestPermisson = () => { // 请求对应的权限允许程序修改全局音频设置、允许程序录制音频、允许访问摄像头进行拍照 plus.android.requestPermissions(['android.permission.MODIFY_AUDIO_SETTINGS', 'android.permission.RECORD_AUDIO', 'android.permission.CAMERA']);};

二、Android 原生 App 使用 WebView

以 java 语言为例

1. 在 res/layout/activity_main.xml 文件中，添加一个 WebView 控件。

<?xml version="1.0" encoding="utf-8"?><androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <WebView android:id="@+id/web_view" android:layout_width="match_parent" android:layout_height="match_parent" /></androidx.constraintlayout.widget.ConstraintLayout>

2. 在 AndroidManifest.xml 文件中添加媒体权限。

<uses-permission android:name="android.permission.INTERNET"/><uses-permission android:name="android.permission.RECORD_AUDIO"/><uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/><uses-permission android:name="android.permission.CAMERA"/><uses-feature android:name="android.hardware.camera.autofocus" android:required="false"/><uses-feature android:name="android.hardware.camera" android:required="false"/>

3. 在 MainActivity.java 文件中，新增获取权限方法。

package com.example.webview_test; // 替换为自己项目import androidx.appcompat.app.AppCompatActivity;import androidx.core.app.ActivityCompat;import androidx.core.content.ContextCompat;import android.Manifest;import android.annotation.TargetApi;import android.content.pm.PackageManager;import android.os.Build;import android.os.Bundle;import android.webkit.PermissionRequest;import android.webkit.WebChromeClient;import android.webkit.WebSettings;import android.webkit.WebView;import android.webkit.WebViewClient;public class MainActivity extends AppCompatActivity { private static final int MY_PERMISSIONS_RECORD_AUDIO = 1; private static final int MY_PERMISSIONS_CAMERA = 1; private static final int MY_PERMISSIONS_MODIFY_AUDIO_SETTINGS = 1; private WebView webView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); webView=(WebView) findViewById(R.id.web_view); webView.setWebViewClient(new WebViewClient()); webView.loadUrl("https://www.example.com"); WebSettings webSettings=webView.getSettings(); webSettings.setJavaScriptEnabled(true); webSettings.setDomStorageEnabled(true); webSettings.setMediaPlaybackRequiresUserGesture(false); webView.setWebChromeClient(new WebChromeClient(){ @TargetApi(Build.VERSION_CODES.LOLLIPOP) @Override public void onPermissionRequest(final PermissionRequest request) { request.grant(request.getResources()); } }); if (ContextCompat.checkSelfPermission(this, Manifest.permission.RECORD_AUDIO) != PackageManager.PERMISSION_GRANTED) { ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.RECORD_AUDIO}, MY_PERMISSIONS_RECORD_AUDIO); } if (ContextCompat.checkSelfPermission(this, Manifest.permission.CAMERA) != PackageManager.PERMISSION_GRANTED) { ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.CAMERA}, MY_PERMISSIONS_CAMERA); } if (ContextCompat.checkSelfPermission(this, Manifest.permission.MODIFY_AUDIO_SETTINGS) != PackageManager.PERMISSION_GRANTED) { ActivityCompat.requestPermissions(this, new String[]{Manifest.permission.MODIFY_AUDIO_SETTINGS}, MY_PERMISSIONS_MODIFY_AUDIO_SETTINGS); } }}

三、鸿蒙原生 App 使用 WebView

1. 在 ability_main.xml ，新增 WebView 控件。

<?xml version="1.0" encoding="utf-8"?><DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent" ohos:orientation="vertical"> <WebView ohos:id="$+id:web_view" ohos:height="match_parent" ohos:width="match_parent" ohos:background_element="#FFFFFF"/></DirectionalLayout>

2. 在 MainAbility.java 中增加获取权限代码：

// MainAbility.javaimport ohos.aafwk.ability.Ability;import ohos.aafwk.content.Intent;import ohos.agp.components.webengine.WebView;import ohos.agp.components.webengine.WebConfig;import ohos.agp.components.Component;import ohos.bundle.IBundleManager;public class MainAbility extends Ability { private WebView webView; private static final int PERMISSION_REQUEST_CODE = 1001; @Override public void onStart(Intent intent) { super.onStart(intent); super.setUIContent(ResourceTable.Layout_ability_main); // 请求必要的权限 requestPermissions(); // 初始化WebView initWebView(); } private void requestPermissions() { String[] permissions = { "ohos.permission.MICROPHONE", "ohos.permission.CAMERA" }; requestPermissionsFromUser(permissions, PERMISSION_REQUEST_CODE); } private void initWebView() { // 获取 WebView 实例 webView = (WebView) findComponentById(ResourceTable.Id_web_view); // 配置 WebView WebConfig webConfig = webView.getWebConfig(); // 启用 JavaScript webConfig.setJavaScriptPermit(true); // 加载 URL webView.loadUrl("https://www.example.com"); }}

3. 在 config.json 中添加必要的权限声明：

{ "app": { "bundleName": "com.example.webview", "vendor": "example", "version": { "code": 1000000, "name": "1.0.0" } }, "deviceConfig": {}, "module": { "requestPermissions": [ { "name": "ohos.permission.INTERNET" }, { "name": "ohos.permission.CAMERA" }, { "name": "ohos.permission.MICROPHONE" } ] }}

四、iOS 原生 App 使用 WebView

1. 打开 ViewController.swift 文件。

2. 导入 WebKit 框架：

import UIKitimport WebKit

3. 在 ViewController 类中添加 WebView 并加载网页：

class ViewController: UIViewController, WKNavigationDelegate { var webView: WKWebView! override func viewDidLoad() { super.viewDidLoad() // 创建 WebView webView = WKWebView(frame: self.view.frame) webView.navigationDelegate = self self.view.addSubview(webView) // 加载网页 if let url = URL(string: "https://www.example.com") { let request = URLRequest(url: url) webView.load(request) } }}

4. 确保你的应用有访问相机和麦克风的权限。你可以在 Info.plist文件中添加以下键值对：

<key>NSCameraUsageDescription</key><string>We need access to your camera to use certain features.</string><key>NSMicrophoneUsageDescription</key><string>We need access to your microphone to use certain features.</string>

5. 如果你需要在运行时请求权限，可以在 ViewController 中添加权限请求的代码：

import UIKitimport WebKitclass ViewController: UIViewController { private var webView: WKWebView! override func viewDidLoad() { super.viewDidLoad() setupWebView() requestPermissions() loadWebContent() } private func setupWebView() { webView = WKWebView(frame: view.frame) webView.navigationDelegate = self view.addSubview(webView) } private func loadWebContent() { guard let url = URL(string: "https://www.example.com") else { return } let request = URLRequest(url: url) webView.load(request) } private func requestPermissions() { requestCameraPermission() requestMicrophonePermission() } private func requestCameraPermission() { let status = AVCaptureDevice.authorizationStatus(for: .video) switch status { case .authorized: print("Camera access granted") case .notDetermined: AVCaptureDevice.requestAccess(for: .video) { [weak self] granted in DispatchQueue.main.async { if granted { print("Camera access granted") } else { self?.showPermissionDeniedAlert(for: "Camera") } } } case .denied, .restricted: showPermissionDeniedAlert(for: "Camera") @unknown default: print("Unknown camera access status") } } private func requestMicrophonePermission() { let status = AVCaptureDevice.authorizationStatus(for: .audio) switch status { case .authorized: print("Microphone access granted") case .notDetermined: AVCaptureDevice.requestAccess(for: .audio) { [weak self] granted in DispatchQueue.main.async { if granted { print("Microphone access granted") } else { self?.showPermissionDeniedAlert(for: "Microphone") } } } case .denied, .restricted: showPermissionDeniedAlert(for: "Microphone") @unknown default: print("Unknown microphone access status") } } private func showPermissionDeniedAlert(for device: String) { let alert = UIAlertController( title: "\\(device) Access Required", message: "Please enable \\(device.lowercased()) access in Settings to use this feature.", preferredStyle: .alert ) alert.addAction(UIAlertAction(title: "Settings", style: .default) { _ in if let settingsURL = URL(string: UIApplication.openSettingsURLString) { UIApplication.shared.open(settingsURL) } }) alert.addAction(UIAlertAction(title: "Cancel", style: .cancel)) present(alert, animated: true) }}extension ViewController: WKNavigationDelegate { func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { print("Web page loaded successfully") } func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) { print("Failed to load web page: \\(error.localizedDescription)") }}

五、WebView 是否支持屏幕共享？

目前 WebView 不支持屏幕共享。