前端使用vue+cordova开发app-webview遇到的ios兼容性解决方案

cordova的webview环境下，ios和Android的兼容性差异整理

好像都是ios的锅。?

1、ios上下有2个黑色块

解决方案: 添加启动屏

1cordova plugin add cordova-plugin-splashscreen
复制代码

1
2<platform name="ios">
3    <splash height="1136" src="res/screen/ios/screen-portrait-640x1136.png" width="640" />
4platform>
复制代码

2、ios下new Date()不支持"xxxx-xx-xx"的日期时间格式

解决方案: 改为"xxxx/xx/xx"

1new Date("2018-11-26".replace(/-/g,'/'));
复制代码

3、ios下全屏(横屏)浏览时，当进入后台运行后，回到前台无法正确识别屏幕状态(竖屏/横屏)

解决方案: 每次从后台进入前台时，重新定位屏幕方向

1cordova plugin add cordova-plugin-screen-orientation
2cordova plugin add cordova-plugin-background-mode
复制代码

1window.cordova.plugins.backgroundMode.on('deactivate', ()=>{
2    const type = window.screen.orientation.type.split('-')[0];
3    window.screen.orientation.lock(type);
4})
复制代码

4、ios下横竖屏切换无法正确监听window.resize事件

解决方案: 监听屏幕方向切换事件

1cordova plugin add cordova-plugin-screen-orientation
复制代码

1window.addEventListener('orientationchange', someFn);
复制代码

5、部分移动设备无法正确兼容Promise.prototype.finally方法

解决方案: 在catch方法后使用then

1SomePromise.then().catch().then();
复制代码

6、cordova在ios下使用wkwebview无法正常启动项目(和background-mode插件冲突)

wkwebview相对于uiwebview可以明显提升app运行性能

解决方案: 打包后修改background-mode插件代码

 1/**
 2 * APPBackgroundMode.m 文件
 3 */
 4/**
 5 * ···
 6 * ···
 7 * ···
 8 */
 9+ (void) swizzleWKWebViewEngine
10{
11    if (![self isRunningWebKit])
12        return;
13
14    Class wkWebViewEngineCls = NSClassFromString(@"CDVWKWebViewEngine");
15    SEL selector = NSSelectorFromString(@"createConfigurationFromSettings:");
16
17    SwizzleSelectorWithBlock_Begin(wkWebViewEngineCls, selector)
18    ^(CDVPlugin *self, NSDictionary *settings) {
19        id obj = ((id (*)(id, SEL, NSDictionary*))_imp)(self, _cmd, settings);
20
21        [obj setValue:[NSNumber numberWithBool:YES]
22               forKey:[APPBackgroundMode wkProperty]];
23
24        [obj setValue:[NSNumber numberWithBool:NO]
25               forKey:@"requiresUserActionForMediaPlayback"];
26
27        return obj;
28    }
29    SwizzleSelectorWithBlock_End;
30}
31
32@end
33
34/**
35 *    forKey:@"_requiresUserActionForMediaPlayback"]      
36 *    ===>forKey:@"requiresUserActionForMediaPlayback"];
37 */
复制代码

7、ios下输入框input无法自动获取焦点(ios默认策略禁止自动聚焦)

解决方案: 配置ios策略开启输入框聚焦功能

1
2<preference name="KeyboardDisplayRequiresUserAction" value="false" />
复制代码

1wkwebview
2cordova plugin add cordova-plugin-wkwebview-inputfocusfix
复制代码

8、ios推送通知在生产环境（production）无法正确推送

解决方案: 手动注入aps-environment权限

1
2<plist version="x.x.x">
3    <dict>
4        <key>aps-environmentkey>
5        <string>productionstring>
6    dict>
7plist>
复制代码

持续更新