APP开发 最全日夜间模式

最近开发遇到日夜间模式的功能,初次接触比较迷茫,于是开始请教度娘,发现一篇不错的文章

http://www.jianshu.com/p/bae45500366b

使用DKNightVersion实现夜间模式

(转载作者的)作者在这篇文章中大概介绍了DKNightVersion的使用方法,各类控件没有一一列举,但是DKNightVersion文件中都有大概说明,在此我就举个作者没有列出来的。

改变按钮字体颜色:[creatBtn dk_setTitleColorPicker:DKColorPickerWithRGB(0x000000,0x999999) forState:UIControlStateNormal];

但是重点来了,我需要改变的不止原生界面的日夜间模式,还有网页的日夜间,像加载的淘宝网,携程网,时光网。。。。可是DKNightVersion只支持原生界面日夜间的修改,虽然我们有方法可以直接注入JS来改变网页,但想到网页css,html。。。。 而且不同页面设计风格不同,要想实现网页日夜间必须要一套较完善的JS代码,而且最好能够使用各个网页,一脸懵逼

APP开发 最全日夜间模式_第1张图片

别人只看结果,而你要自己独撑过程

所以不啰嗦,直接上代码,现在就将我们工程里面最终实现的JS代码分享给大家,虽然还是不够完善,但是基本没大问题了,需要的同行们可以直接使用。

night_js:var

parent = document.getElementsByTagName('head').item(0);var style =

document.createElement('style');style.type = 'text/css';style.id =

'eg-injected';style.innerHTML = 'html{background:#333!important}html

*{background-color:#333!important;color:#bbb!important;border-color:#333!important;border-width:0!important}html

a,html a

*{color:#5c8599!important;text-decoration:underline!important}html

a:visited,html a:visited *,html a:active,html a:active

*{color:#525f66!important}html a:hover,html a:hover

*{color:#cef!important;background:#023!important}html input,html

select,html button,html textarea{background:#4d4c40!important;border:1px

solid

#5c5a46!important;border-top-color:#474531!important;border-bottom-color:#7a7967!important}html

input[type=button],html input[type=submit],html input[type=reset],html

input[type=image],html

button{border-top-color:#7a7967!important;border-bottom-color:#474531!important}html

input:focus,html select:focus,html option:focus,html button:focus,html

textarea:focus{background:#5c5b3e!important;color:#fff!important;border-color:#474100

#665d00 #7a7849!important;outline:2px solid #041d29!important}html

input[type=button]:focus,html input[type=submit]:focus,html

input[type=reset]:focus,html input[type=image]:focus,html

button:focus{border-color:#7a7849 #665d00 #474100!important}html

input[type=radio]{background:none!important;border-color:#333!important;border-width:0!important}html

img[src],html input[type=image]{opacity:.5}html img[src]:hover,html

input[type=image]:hover{opacity:1}html,html

body{scrollbar-base-color:#4d4c40!important;scrollbar-face-color:#5c5b3e!important;scrollbar-shadow-color:#5c5b3e!important;scrollbar-highlight-color:#5c5b3e!important;scrollbar-dlight-color:#5c5b3e!important;scrollbar-darkshadow-color:#474531!important;scrollbar-track-color:#4d4c40!important;scrollbar-arrow-color:#000!important;scrollbar-3dlight-color:#7a7967!important}@media

all and (-webkit-min-device-pixel-ratio:0){html body

*{-webkit-transition:color 0 ease-in,background-color 0

ease-out!important}html a,html textarea,html input,html

select{-webkit-transition:color 0 ease-in,background-color 0

ease-out!important}html img[src],html

input[type=image]{-webkit-transition:opacity 0 ease-in!important}html

input:focus,html select:focus,html option:focus,html button:focus,html

textarea:focus{outline-style:outset!important}}';var tagHeadAdd =

parent.appendChild(style);window.alert(style);

nonight_js:var

parent = document.getElementsByTagName('head').item(0);var styles =

document.getElementsByTagName('style');for(var

i=0;i

'eg-injected'){styles[i].id='noeg-injected';styles[i].innerHTML = ''}};

1.下面是处理日夜间切换的时候,发送通知后接收到通知做的判断

NSString * const DKNightVersionCurrentThemeVersionKey = @"com.dknightversion.manager.themeversion";

NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];

DKThemeVersion * themeVersion = [userDefaults valueForKey:DKNightVersionCurrentThemeVersionKey];

if([themeVersion isEqualToString:DKThemeVersionNormal])

{

[wkWebView evaluateJavaScript:noeginjected_js completionHandler:^(id result, NSError *error) {

NSLog(@"error =%@",error);

}];

}

else

{

[wkWebView evaluateJavaScript:eginjected_js completionHandler:^(id result, NSError *error) {

NSLog(@"error =%@",error);

}];

}

2.ios8 以后使用的一般都是wkwebview,这里要做配置

//内容

WKUserScript

*nightModelScript = [[WKUserScript alloc]

initWithSource:nightModelCheck_js

injectionTime:WKUserScriptInjectionTimeAtDocumentEnd

forMainFrameOnly:YES];

WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];

[config.userContentController addUserScript:nightModelScript];

wkWebView

= [[WKWebView

alloc]initWithFrame:CGRectMake(0,CGRectGetMaxY(topLine.frame),

appSize.width, appSize.height - CGRectGetMaxY(topLine.frame)- 45)

configuration:config];

3.最后是在什么时候注入JS,开始我选择的是

//数据加载完

-

(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation

*)navigation  这个方法,但是这样就会出现一个问题,就是网页完全加载完成后才能显示夜间模式,会出现先白后闪一下才能变成夜间模式

所以就换了一种方式

/**web界面中有弹出警告框时调用**/

-(void)webView:(WKWebView

*)webView runJavaScriptAlertPanelWithMessage:(NSString *)message

initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void

(^)(void))completionHandler

{

if([message rangeOfString:@"nightModel_check"].location !=NSNotFound)

{

NSString * const DKNightVersionCurrentThemeVersionKey = @"com.dknightversion.manager.themeversion";

NSUserDefaults *userDefaults = [NSUserDefaults standardUserDefaults];

DKThemeVersion * themeVersion = [userDefaults valueForKey:DKNightVersionCurrentThemeVersionKey];

if([themeVersion isEqualToString:DKThemeVersionNormal])

{

}

else

{

[wkWebView evaluateJavaScript:eginjected_js completionHandler:^(id result, NSError *error) {

NSLog(@"error =%@",error);

}];

}

}

completionHandler();

}

注释*:nightModelCheck_js @"window.alert('nightModel_check');"

你可能感兴趣的:(APP开发 最全日夜间模式)