一、基于vue项目在原生webview上白屏的问题主要有几个方面:
1、vue 的项目线上使用https安全链接,但是有很多资源使用的是http链接,由于chrome的安全机制,导致资源加载失败,所以加上了<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests”> 将http链接提升到https。
这就导致了一个问题,本地vue项目大部分都是用http协议启动的,localhost可以通过chorme安全机制访问,但是ip就不可以了,需要将上面代码注释才能正常访问页面。
ios wkwebview 调试h5代码:
1、添加info.plist 添加http请求权限:
2、wkwebview 请求
let webView = WKWebView( frame: CGRect(x:0, y:(navigationController?.navigationBar.frame.size.height ?? 64)+view.safeAreaInsets.top,width: UIScreen.main.bounds.size.width, height:UIScreen.main.bounds.size.height-64))
/// 设置访问的URL
webView.backgroundColor = .green
/// 设置代理
// web.uiDelegate = self
webView.navigationDelegate = self
view.addSubview(webView)
DispatchQueue.main.asyncAfter(deadline: DispatchTime.now()+2){
let url = NSURL(string: "http://10.29.75.33:8080/h5-app/#/home")
/// 根据URL创建请求
let requst = NSURLRequest(url: url! as URL)
/// WKWebView加载请求
webView.load(requst as URLRequest)
}
self.webView = webView
3、如果本地vue项目是带https的请求,要记得实现https证书验证代理(调试用-证书全部允许,正式环境请按情况处理)
// 凭证验证
func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
print("'challenge'")
print(challenge)
// 创建凭据对象
let cred = URLCredential(trust: challenge.protectionSpace.serverTrust!)
// 告诉服务器信任证书
DispatchQueue.global().async {
completionHandler(.useCredential, cred)
}
}
android webview 调试h5代码
1、在AndroidManifest.xml清单文件中,添加webview网络读取权限,允许http请求
<uses-permission android:name="android.permission.INTERNET" />
<application下 android:usesCleartextTraffic="true"
2、webview 请求
// 获取webview对象
val webView = binding.wvWebview
// //声明WebSettings子类
var webSettings = webView.getSettings();
webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK);
webSettings.setJavaScriptEnabled(true);
webSettings.setDomStorageEnabled(true);
webSettings.setBlockNetworkImage(false); // 解决图片不显示
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP ){
webSettings.setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
}
webView.loadUrl("http://10.29.75.33:8080/h5-app/#/home")
3、如果本地vue项目是带https的请求,要记得实现https证书验证代理(调试用-证书全部允许,正式环境请按情况处理)
webView.webViewClient = object : WebViewClient() {
override fun shouldOverrideUrlLoading(
view: WebView?,
request: WebResourceRequest?
): Boolean {
println("webSettings url = " + request?.getUrl())
// if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
// view?.loadUrl(request?.getUrl().toString());
// } else {
// view?.loadUrl(request.toString());
// }
webView.loadUrl(request?.getUrl().toString())
return true;
}
override fun onReceivedSslError(
view: WebView,
handler: SslErrorHandler,
error: SslError
) {
println("webSettings error = " +error.toString())
handler.proceed()
}
}