深入剖析钉钉小程序webview的奇特行为：iOS白屏，Android受限

Android

2023-12-04 06:05:29

钉钉小程序 WebView 怪异行为大揭秘

引言

钉钉小程序作为企业协作利器，深受开发者青睐。然而，在使用 WebView 时，一些奇怪的行为让人头疼不已。本文将深入剖析 iOS 白屏和 Android 页面受限问题，提供切实可行的解决方案，助力开发者扫清障碍，打造流畅的钉钉小程序体验。

iOS 白屏之谜

症结所在

iOS 设备中钉钉小程序嵌入的 WebView 出现白屏，究其原因有三：

WKWebView 代理设置不当： iOS 11 引入的 WKWebView，取代了 UIWebView，但代理设置不当会导致 WebView 加载失败，一片空白。
网络请求被阻： 钉钉对网络请求把控严格，如果 WebView 试图访问小程序清单中未列出的域名，请求将被阻断，导致白屏。
跨域资源共享（CORS）问题： WebView 中资源（脚本、图片）需跨域访问小程序主域，若未配置正确 CORS 头，资源无法加载，引发白屏。

解药

正确设置 WKWebView 代理： 在小程序清单中指定自定义代理，实现必要的委托方法。
允许网络请求： 小程序清单中添加 WebView 需访问的所有域名至网络请求白名单。
配置 CORS 头： 服务器端配置 CORS 头，允许 WebView 跨域访问资源。

代码示例：

public class MyWKWebViewClient extends WKWebViewClient {
    @Override
    public void didStartProvisionalNavigation(WKWebView webView, WKNavigation navigation) {
        super.didStartProvisionalNavigation(webView, navigation);
        // 允许网络请求
        webView.evaluateJavaScript("document.domain='" + BuildConfig.DOMAIN + "'", null);
    }
}

Android 页面受限的困境

根源剖析

Android 设备钉钉小程序中 WebView 受到页面限制，无法访问摄像头、麦克风等功能，且无法与本地设备交互，原因如下：

权限未授权： WebView 需特定权限才能访问某些功能，若未在小程序清单中授予，则无法正常运行。
WebViewClient 设置不当： WebViewClient 负责 WebView 与 Android 平台交互，配置不当导致 WebView 受限或无法使用。
系统限制： 部分 Android 设备对 WebView 实施系统限制，提高安全性和隐私性，限制其执行某些操作，导致页面受限。

对策妙招

授予必要权限： 小程序清单中 <uses-permission> 标签添加 WebView 所需权限。
配置 WebViewClient： 创建自定义 WebViewClient，覆写回调方法，处理与 Android 平台的交互。
了解系统限制： 熟悉目标设备的系统限制，调整 WebView 使用方式。

代码示例：

public class MyWebViewClient extends WebViewClient {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        // 授予权限
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
            view.getSettings().setMixedContentMode(WebSettings.MIXED_CONTENT_ALWAYS_ALLOW);
        }
        return super.shouldOverrideUrlLoading(view, request);
    }
}

结语

钉钉小程序中 WebView 的怪异行为不再是开发者头疼的难题。通过了解根源并实施恰当的解决方案，开发者可以保障 WebView 在钉钉小程序中顺畅运行，为企业用户提供强大的协作平台。

常见问题解答

1. iOS 白屏问题是否仅限于 WKWebView？

不，使用 UIWebView 时也可能出现白屏。

2. Android 页面受限问题是否影响所有 WebView？

否，只有嵌入钉钉小程序中的 WebView 受限。

3. 如何在 WebView 中使用定位功能？

需要在小程序清单中添加 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 权限，并在 WebViewClient 中覆写 shouldOverrideUrlLoading 方法，允许混合内容加载。

4. 钉钉小程序中是否有其他 WebView 限制？

是的，还有针对文件系统、剪贴板和缓存的限制。

5. 对于无法解决的 WebView 问题，如何寻求帮助？

可以访问钉钉开放平台开发者论坛或联系钉钉技术支持团队。