Last active
April 8, 2025 08:19
-
-
Save TheMelody/6ec3fcba6d57f544465651acc480ff39 to your computer and use it in GitHub Desktop.
Jetpack Compose - WebView 使用方法
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @Composable | |
| fun CustomWebView(modifier: Modifier = Modifier, | |
| url:String, | |
| onBack: (webView:WebView?) -> Unit, | |
| onProgressChange: (progress:Int)->Unit = {}, | |
| initSettings: (webSettings:WebSettings?) -> Unit = {}, | |
| onReceivedError: (error: WebResourceError?) -> Unit = {}){ | |
| val webViewChromeClient = object:WebChromeClient(){ | |
| override fun onProgressChanged(view: WebView?, newProgress: Int) { | |
| //回调网页内容加载进度 | |
| onProgressChange(newProgress) | |
| super.onProgressChanged(view, newProgress) | |
| } | |
| } | |
| val webViewClient = object: WebViewClient(){ | |
| override fun onPageStarted(view: WebView?, url: String?, | |
| favicon: Bitmap?) { | |
| super.onPageStarted(view, url, favicon) | |
| onProgressChange(-1) | |
| } | |
| override fun onPageFinished(view: WebView?, url: String?) { | |
| super.onPageFinished(view, url) | |
| onProgressChange(100) | |
| } | |
| override fun shouldOverrideUrlLoading( | |
| view: WebView?, | |
| request: WebResourceRequest? | |
| ): Boolean { | |
| if(null == request?.url) return false | |
| val showOverrideUrl = request.url.toString() | |
| try { | |
| if (!showOverrideUrl.startsWith("http://") | |
| && !showOverrideUrl.startsWith("https://")) { | |
| //处理非http和https开头的链接地址 | |
| Intent(Intent.ACTION_VIEW, Uri.parse(showOverrideUrl)).apply { | |
| addFlags(Intent.FLAG_ACTIVITY_NEW_TASK) | |
| view?.context?.applicationContext?.startActivity(this) | |
| } | |
| return true | |
| } | |
| }catch (e:Exception){ | |
| //没有安装和找到能打开(「xxxx://openlink.cc....」、「weixin://xxxxx」等)协议的应用 | |
| return true | |
| } | |
| return super.shouldOverrideUrlLoading(view, request) | |
| } | |
| override fun onReceivedError( | |
| view: WebView?, | |
| request: WebResourceRequest?, | |
| error: WebResourceError? | |
| ) { | |
| super.onReceivedError(view, request, error) | |
| //自行处理.... | |
| onReceivedError(error) | |
| } | |
| } | |
| var webView:WebView? = null | |
| val coroutineScope = rememberCoroutineScope() | |
| AndroidView(modifier = modifier,factory = { ctx -> | |
| WebView(ctx).apply { | |
| this.webViewClient = webViewClient | |
| this.webChromeClient = webViewChromeClient | |
| //回调webSettings供调用方设置webSettings的相关配置 | |
| initSettings(this.settings) | |
| webView = this | |
| loadUrl(url) | |
| } | |
| }) | |
| BackHandler { | |
| coroutineScope.launch { | |
| //自行控制点击了返回按键之后，关闭页面还是返回上一级网页 | |
| onBack(webView) | |
| } | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var rememberWebViewProgress: Int by remember { mutableStateOf(-1) } | |
| Box { | |
| CustomWebView( | |
| modifier = Modifier.fillMaxSize(), | |
| url = "https://www.baidu.com/", | |
| onProgressChange = { progress -> | |
| rememberWebViewProgress = progress | |
| }, | |
| initSettings = { settings -> | |
| settings?.apply { | |
| //支持js交互 | |
| javaScriptEnabled = true | |
| //将图片调整到适合webView的大小 | |
| useWideViewPort = true | |
| //缩放至屏幕的大小 | |
| loadWithOverviewMode = true | |
| //缩放操作 | |
| setSupportZoom(true) | |
| builtInZoomControls = true | |
| displayZoomControls = true | |
| //是否支持通过JS打开新窗口 | |
| javaScriptCanOpenWindowsAutomatically = true | |
| //不加载缓存内容 | |
| cacheMode = WebSettings.LOAD_NO_CACHE | |
| } | |
| }, onBack = { webView -> | |
| if (webView?.canGoBack() == true) { | |
| webView.goBack() | |
| } else { | |
| finish() | |
| } | |
| }, onReceivedError = { | |
| if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { | |
| //Log.d("AAAA", ">>>>>>${it?.description}") | |
| } | |
| } | |
| ) | |
| LinearProgressIndicator( | |
| progress = rememberWebViewProgress * 1.0F / 100F, | |
| modifier = Modifier | |
| .fillMaxWidth() | |
| .height(if (rememberWebViewProgress == 100) 0.dp else 5.dp), | |
| color = Color.Red | |
| ) | |
| } |
页面加载出来 但是样式没有加载成功，使用的是http的url，onReceivedError返回的是null
页面加载出来 但是样式没有加载成功，使用的是http的url，onReceivedError返回的是null
你看看是不是vue哪里不对，baidu是可以加载出来的吧
感谢您的帮助，排查出问题原因，已解决，抱歉浪费了您的时间
class WebUiActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) //enableEdgeToEdge() //沉浸式状态栏 setContent { MarkStudyTheme { var rememberWebViewProgress: Int by remember { mutableStateOf(-1) } Box { CustomWebView( modifier = Modifier.fillMaxSize(), url = "https://www.baidu.com/", onProgressChange = { progress -> rememberWebViewProgress = progress }, initSettings = { settings -> settings?.apply { //支持js交互 javaScriptEnabled = true //将图片调整到适合webView的大小 useWideViewPort = true //缩放至屏幕的大小 loadWithOverviewMode = true //缩放操作 setSupportZoom(true) builtInZoomControls = true displayZoomControls = true //是否支持通过JS打开新窗口 javaScriptCanOpenWindowsAutomatically = true //不加载缓存内容 cacheMode = WebSettings.LOAD_NO_CACHE } }, onBack = { webView -> if (webView?.canGoBack() == true) { webView.goBack() } else { finish() } }, onReceivedError = { if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) { //Log.d("AAAA", ">>>>>>${it?.description}") } } ) LinearProgressIndicator( progress = rememberWebViewProgress * 1.0F / 100F, modifier = Modifier .fillMaxWidth() .height(if (rememberWebViewProgress == 100) 0.dp else 5.dp), color = androidx.compose.ui.graphics.Color.Red ) } } } }
@Composable fun CustomWebView( modifier: Modifier = Modifier, url: String, onBack: (webView: WebView?) -> Unit, onProgressChange: (progress: Int) -> Unit = {}, initSettings: (webSettings: WebSettings?) -> Unit = {}, onReceivedError: (error: WebResourceError?) -> Unit = {} ) { val webViewChromeClient = object : WebChromeClient() { override fun onProgressChanged(view: WebView?, newProgress: Int) { //回调网页内容加载进度 onProgressChange(newProgress) super.onProgressChanged(view, newProgress) } } val webViewClient = object : WebViewClient() { override fun onPageStarted( view: WebView?, url: String?, favicon: Bitmap? ) { super.onPageStarted(view, url, favicon) onProgressChange(-1) } override fun onPageFinished(view: WebView?, url: String?) { super.onPageFinished(view, url) onProgressChange(100) } override fun shouldOverrideUrlLoading( view: WebView?, request: WebResourceRequest? ): Boolean { if (null == request?.url) return false val showOverrideUrl = request.url.toString() try { if (!showOverrideUrl.startsWith("http://") && !showOverrideUrl.startsWith("https://") ) { //处理非http和https开头的链接地址 Intent(Intent.ACTION_VIEW, Uri.parse(showOverrideUrl)).apply { addFlags(Intent.FLAG_ACTIVITY_NEW_TASK) view?.context?.applicationContext?.startActivity(this) } return true } } catch (e: Exception) { //没有安装和找到能打开(「xxxx://openlink.cc....」、「weixin://xxxxx」等)协议的应用 return true } return super.shouldOverrideUrlLoading(view, request) } override fun onReceivedError( view: WebView?, request: WebResourceRequest?, error: WebResourceError? ) { super.onReceivedError(view, request, error) //自行处理.... onReceivedError(error) } } var webView: WebView? = null val coroutineScope = rememberCoroutineScope() AndroidView(modifier = modifier, factory = { ctx -> WebView(ctx).apply { this.webViewClient = webViewClient this.webChromeClient = webViewChromeClient //回调webSettings供调用方设置webSettings的相关配置 initSettings(this.settings) webView = this loadUrl(url) } }) BackHandler { coroutineScope.launch { //自行控制点击了返回按键之后，关闭页面还是返回上一级网页 onBack(webView) } } }} 麻烦问一下 我打开百度加载成功了，但是不显示内容是为什么啊
啥意思？打开百度加载成功？不显示内容？你想表达什么
抱歉，我的问题 😂
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
方法正确执行了吗？没有日志输出吗？onReceivedError也没有吗？是http的url?