iOS暗黑模式(Dark Mode)WKWebview适配【附代码】

今天爱分享给大家带来iOS暗黑模式(Dark Mode)WKWebview适配【详细讲解】,希望能够帮助到大家。

现在大部分需要注册登录的APP都有一个隐私协议,而这个网页通常是使用WKWebview进行加载的(说到这里在提醒大家一下:webview也被废弃了,所以大家快转换到WKWebview上来)。这时候如果大家能叫前端帮忙适配,那肯定非常省事了。但是如果需要自己进行适配,那么也是可以的。核心就是通过JS代码去动态的修改HTML的背景色。先上代码在进行解释:

#import "ViewController.h"
#import <WebKit/WebKit.h>
@interface ViewController ()<WKNavigationDelegate>
@property (nonatomic, strong) WKWebView *webView;
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    [self loadHtmlWithWKView];
}

-(void)loadHtmlWithWKView{
    WKWebViewConfiguration *wkWebconfigura = [[WKWebViewConfiguration alloc]init];
    WKWebView *wkView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:wkWebconfigura];
    [wkView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"https://juejin.im/welcome/ios"]]];
    wkView.navigationDelegate = self;
    self.webView = wkView;
    [self.view addSubview:wkView];
    self.webView.hidden = YES;
}
//navigationDelegate 当网页加载完毕后会调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
    NSString *backgroundColor = @"";
    NSString *labelColor = @"";
    if (@available(iOS 13.0, *)) {
        if (UITraitCollection.currentTraitCollection.userInterfaceStyle == UIUserInterfaceStyleDark) {
            backgroundColor = @"\"#001A1A\"";
            labelColor = @"'#FF0000'";
        }else{
            backgroundColor = @"\"#FFFFFF\"";
            labelColor = @"'#666666'";
        }
    } else {
        self.webView.hidden = NO;
        return;
    }
    //写入JS代码
    [self.webView evaluateJavaScript:[NSString stringWithFormat:@"document.body.style.backgroundColor=%@",backgroundColor] completionHandler:nil];
    [self.webView evaluateJavaScript:[NSString stringWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextFillColor=%@",labelColor] completionHandler:nil];
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.5 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        self.webView.hidden = NO;
    });
    
}

@end

核心思想就是通过JS代码去动态的修改网页的背景颜色和文字颜色。在webView:(WKWebView *)webView didFinishNavigation的时候进行当前模式的判断,在通过JS代码进行修改网页的颜色。有人可能会问,为什么不用WKUserScript去进行设置了,我试过了,不起作用。用下面的同一句代码进行设置,没有任何反应,我以为是因为后加载的网页覆盖掉了之前设置的背景颜色,说以在开始的JS代码里面加入了!important,结果也是不行的。为什么先对webView进行隐藏呢,这是因为我的APP隐私协议的背景颜色默认就是白色的,所以加载的时候会先显示白色,然后马上闪到我设置的颜色,对于用户来说,体验不是很好,所以先进行隐藏,而进行0.5s的延时在显示是因为那时候还没设置完,所以有时候会出现没改过来,或者是也会出现闪现的情况。下面看下效果:

iOS暗黑模式(Dark Mode)WKWebview适配【附代码】插图

修改成功,但是由于示例的li也是有背景颜色的,而我们修改的是body的背景,所以会有白色的cell。可以看到勾选swift/flutter的背景就是我们设置的背景,而我们的隐私协议一般都是P标签组成的,所以如果你的隐私协议修改body的背景不成功的话可以具体针对你的具体需求进行修改。

人已赞赏
IOS

IOS 暗黑模式下APP启动页LaunchScreen 适配【详细讲解】

2020-10-19 14:37:05

IOS

iOS暗黑模式(Dark Mode)轮播图(网络图片)适配【附代码】

2020-10-19 14:44:07

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
'); })();