前端使用vue+cordova開發app-webview遇到的ios兼容性解決方案

cordova的webview環境下，ios和Android的兼容性差別整理

好像都是ios的鍋。😂

一、ios上下有2個黑色塊

解決方案: 添加啓動屏

1cordova plugin add cordova-plugin-splashscreen
複製代碼

1<!-- config.xml -->
2<platform name="ios">
3    <splash height="1136" src="res/screen/ios/screen-portrait-640x1136.png" width="640" />
4</platform>
複製代碼

二、ios下new Date()不支持"xxxx-xx-xx"的日期時間格式

解決方案: 改成"xxxx/xx/xx"

1new Date("2018-11-26".replace(/-/g,'/'));
複製代碼

三、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})
複製代碼

四、ios下橫豎屏切換沒法正確監聽window.resize事件

解決方案: 監聽屏幕方向切換事件

1cordova plugin add cordova-plugin-screen-orientation
複製代碼

1window.addEventListener('orientationchange', someFn);
複製代碼

五、部分移動設備沒法正確兼容Promise.prototype.finally方法

解決方案: 在catch方法後使用then

1SomePromise.then().catch().then();
複製代碼

六、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 */
複製代碼

七、ios下輸入框input沒法自動獲取焦點(ios默認策略禁止自動聚焦)

解決方案: 配置ios策略開啓輸入框聚焦功能

1<!-- UIWEBVIEW -->
2<preference name="KeyboardDisplayRequiresUserAction" value="false" />
複製代碼

1wkwebview
2cordova plugin add cordova-plugin-wkwebview-inputfocusfix
複製代碼

八、ios推送通知在生產環境（production）沒法正確推送

解決方案: 手動注入aps-environment權限

1<!-- /platforms/ios/projectname/Entitlements-Release.plist -->
2<plist version="x.x.x">
3    <dict>
4        <key>aps-environment</key>
5        <string>production</string>
6    </dict>
7</plist>
複製代碼

持續更新