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文件

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 oneor more contributor license agreements.  See the NOTICE filedistributed with this work for additional informationregarding copyright ownership.  The ASF licenses this fileto you under the Apache License, Version 2.0 (the"License"); you may not use this file except in compliancewith the License.  You may obtain a copy of the License athttp://www.apache.org/licenses/LICENSE-2.0Unless 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 ANYKIND, either express or implied.  See the License for thespecific language governing permissions and limitationsunder 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

Cordova项目IphoneX适配，结合BUI前端框架项目（需要修改原生代码）相关推荐

Django项目中常使用的前端框架
文章目录 jQuery Bootstrap Bootswatch pure Materializecss Bluma 在项目开发中为了加快开发速度,提高研发效率,前端部分我们不会使用原生的技术去实现 ...
前后端分离微服务管理系统项目实战SaaS-HRM项目(二)——数据库设计与前端框架
文章目录二.数据库设计与前端框架 1.多租户SaaS平台的数据库方案 <1>.多租户概述 <2>.需求分析 <3>.多租户的数据库方案分析 (1).独立数据库 ( ...
分布式电商项目十四：Vue前端框架简介及使用
Vue前端框架简介及使用就像是后端我们使用springboot来进行开发一样,前端需要使用Vue框架进行开发.由于前端不是我们的主要内容,所以只介绍简单的使用内容.具体更深的内容请参考Vue的官方网 ...
bui前端框架+yii整理
这个是做bui前端样式整合的时候记录的. 首先当然是要下载一个yii的源码,搭建起来. 第一步将bui的样式迁移到yii的样式目录中去这里我在样式外面加了一个bui的文件夹,表示这个文件夹中存放的是 ...
IDEA将maven项目复制成一个新的框架/项目
1.将项目在本地的文件夹(源项目)复制一份并重命名(目标项目) 2.删掉IDEA配置文件以及.git 删掉子项目中的iml文件 3.修改项目中的pom文件其余子项目中也需要更改 4.使用idea打开 ...
vue3+quasar+capacitor开发多平台项目,使用cordova和capacitor插件(支持所有前端框架）
先看文档框架文档地址:https://quasar.dev/start/quasar-cli 创建项目 npm init quasar 运行与打包命令 npx quasar devnpx quasa ...
BUI前端框架·导航栏
图片 dom中有一个钩子J_Nav来绑定顶部导航的事件有以下几点说明: 导航项:.nav-item可以任意添加删除导航内容中 .nav-起始的样式决定导航项的图标,如:nav-home等 .dl- ...
BUI前端框架·首页代码
整体结构页面声明首页title 登录信息顶部导航二级菜单 tab 首页JS配置项几点说明文档声明为 <!doctype html>,文件格式是utf-8 css文件在 titl ...
easyui form 返回html,form（表单） - TopJUI前端框架，不用写JS代码的EasyUI
Form(表单) 使用$.fn.iForm.defaults重写默认值对象 form提供了各种方法来操作执行表单字段,比如:ajax提交, load, clear等等.当提交表单的时候可以调用vali ...

Cordova项目IphoneX适配，结合BUI前端框架项目（需要修改原生代码）

3、更换旧的 UIWebview 为 WKWebview

Cordova项目IphoneX适配，结合BUI前端框架项目（需要修改原生代码）相关推荐

最新文章

热门文章