Cordova项目IphoneX适配,结合BUI前端框架项目(需要修改原生代码)
先吐槽一下苹果,每年都要出一下幺蛾子,你还没有办法。
Hybrid App适配只能说一开始研究难一点,后面基本没什么问题,下面就把我自己的研究出来的跟大家分享一下。
部分参考:点击打开链接
1、meta 标签中 添加 viewport-fit=cover,这是 ios 11 新增的设置,可以让页面全屏展示。
<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">
这部分BUI是自带的,基本不需要做修改,这里展示是给不是BUI框架的朋友使用的
2、更新启动图
在cordova项目的配置文件config.xml中添加,具体参考:启动图规范
<platform name="android"> <allow-intent href="market:*" /> <preference name="orientation" value="portrait" /> <icon density="ldpi" src="res/icon/android/mipmap-ldpi/ic_launcher.png" /> <icon density="mdpi" src="res/icon/android/mipmap-mdpi/ic_launcher.png" /> <icon density="hdpi" src="res/icon/android/mipmap-hdpi/ic_launcher.png" /> <icon density="xhdpi" src="res/icon/android/mipmap-xhdpi/ic_launcher.png" /> <splash density="land-hdpi" src="res/screen/android/splash-port-hdpi.png" /> <splash density="land-ldpi" src="res/screen/android/splash-port-ldpi.png" /> <splash density="land-mdpi" src="res/screen/android/splash-port-mdpi.png" /> <splash density="land-xhdpi" src="res/screen/android/splash-port-xhdpi.png" /> <splash density="port-hdpi" src="res/screen/android/splash-port-hdpi.png" /> <splash density="port-mdpi" src="res/screen/android/splash-port-mdpi.png" /> <splash density="port-xhdpi" src="res/screen/android/splash-port-xhdpi.png" /> </platform> <platform name="ios"> <allow-intent href="itms:*" /> <allow-intent href="itms-apps:*" /> <preference name="orientation" value="portrait" /> <splash src="res/screen/ios/Default@2x~universal~anyany.png" /> </platform>
我这边使用的图片大小为640*960
3、更换旧的 UIWebview 为 WKWebview
项目添加插件cordova-plugin-ionic-webview,这个是Ionic框架WKWebview 插件的一个变种,实际在Cordava项目中也可以使用。
4、修改源码,是页面上下置顶
这一部还没涉及到适配,先通过修改代码是页面顶部置顶,顶部上移动20px达到这种效果
修改MainViewController.m文件
修改MainViewController.m文件
viewBounds.origin.y跟viewBounds.size.height=viewBounds.size.height的高度可以自己修改,一般20~30之间差不多
方法顶部增加:
#define kDeviceIsiPhoneX ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO)
- (void)viewWillAppear:(BOOL)animated 中 增加
- (void)viewWillAppear:(BOOL)animated { if ([[[UIDevice currentDevice] systemVersion] floatValue]>=7) { [self.view addSubview:view]; CGRect viewBounds=[self.webView bounds]; viewBounds.origin.y=20; viewBounds.size.height=viewBounds.size.height-20; self.webView.frame=viewBounds; } if(kDeviceIsiPhoneX){ [self.view addSubview:view]; CGRect viewBounds=[self.webView bounds]; viewBounds.origin.y=30; viewBounds.size.height=viewBounds.size.height+5; self.webView.frame=viewBounds; } }
5、修改顶部颜色
还是在- (void)viewWillAppear:(BOOL)animated 方法中
UIView *view=({ UIView *view=[UIView new]; view.frame=CGRectMake(0, 0, self.view.frame.size.width, 20); view.backgroundColor=[UIColor colorWithRed: 0 / 255.f green: 127 / 255.f blue: 134 / 255.f alpha: 5.f]; view; });
view.backgroundColor中的值为颜色的RGB值,自己可修改
5、最后效果
实际使用过程中,BUI前端框架对于IOS的适配还是蛮友好的,如果你也是Hybrid App开发者,推荐使用BUI框架。
最后贴上这个修改后的文件
/* Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ // // MainViewController.h // 佳纺国际 // // Created by ___FULLUSERNAME___ on ___DATE___. // Copyright ___ORGANIZATIONNAME___ ___YEAR___. All rights reserved. // #import "MainViewController.h" #define kDeviceIsiPhoneX ([UIScreen instancesRespondToSelector:@selector(currentMode)] ? CGSizeEqualToSize(CGSizeMake(1125, 2436), [[UIScreen mainScreen] currentMode].size) : NO) @implementation MainViewController - (id)initWithNibName:(NSString*)nibNameOrNil bundle:(NSBundle*)nibBundleOrNil { self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil]; if (self) { // Uncomment to override the CDVCommandDelegateImpl used // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self]; // Uncomment to override the CDVCommandQueue used // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self]; } return self; } - (id)init { self = [super init]; if (self) { // Uncomment to override the CDVCommandDelegateImpl used // _commandDelegate = [[MainCommandDelegate alloc] initWithViewController:self]; // Uncomment to override the CDVCommandQueue used // _commandQueue = [[MainCommandQueue alloc] initWithViewController:self]; } return self; } - (void)didReceiveMemoryWarning { // Releases the view if it doesn't have a superview. [super didReceiveMemoryWarning]; // Release any cached data, images, etc that aren't in use. } #pragma mark View lifecycle - (void)viewWillAppear:(BOOL)animated { if ([[[UIDevice currentDevice] systemVersion] floatValue]>=7) { UIView *view=({ UIView *view=[UIView new]; view.frame=CGRectMake(0, 0, self.view.frame.size.width, 20); view.backgroundColor=[UIColor colorWithRed: 0 / 255.f green: 127 / 255.f blue: 134 / 255.f alpha: 5.f]; view; }); [self.view addSubview:view]; CGRect viewBounds=[self.webView bounds]; viewBounds.origin.y=20; viewBounds.size.height=viewBounds.size.height-20; self.webView.frame=viewBounds; } if(kDeviceIsiPhoneX){ UIView *view=({ UIView *view=[UIView new]; view.frame=CGRectMake(0, 0, self.view.frame.size.width, 30); view.backgroundColor=[UIColor colorWithRed: 0 / 255.f green: 127 / 255.f blue: 134 / 255.f alpha: 5.f]; view; }); [self.view addSubview:view]; CGRect viewBounds=[self.webView bounds]; viewBounds.origin.y=30; viewBounds.size.height=viewBounds.size.height+5; self.webView.frame=viewBounds; } } - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view from its nib. } - (void)viewDidUnload { [super viewDidUnload]; // Release any retained subviews of the main view. // e.g. self.myOutlet = nil; } /* Comment out the block below to over-ride */ /* - (UIWebView*) newCordovaViewWithFrame:(CGRect)bounds { return[super newCordovaViewWithFrame:bounds]; } - (NSUInteger)supportedInterfaceOrientations { return [super supportedInterfaceOrientations]; } - (BOOL)shouldAutorotateToInterfaceOrientation:(UIInterfaceOrientation)interfaceOrientation { return [super shouldAutorotateToInterfaceOrientation:interfaceOrientation]; } - (BOOL)shouldAutorotate { return [super shouldAutorotate]; } */ @end @implementation MainCommandDelegate /* To override the methods, uncomment the line in the init function(s) in MainViewController.m */ #pragma mark CDVCommandDelegate implementation - (id)getCommandInstance:(NSString*)className { return [super getCommandInstance:className]; } - (NSString*)pathForResource:(NSString*)resourcepath { return [super pathForResource:resourcepath]; } @end @implementation MainCommandQueue /* To override, uncomment the line in the init function(s) in MainViewController.m */ - (BOOL)execute:(CDVInvokedUrlCommand*)command { return [super execute:command]; } @end