关于ios和android webview调试vue项目的相关问题

一、基于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()
            }
        }