iOS 将 Cordova 应用程序作为 web 视图嵌入到另一个应用程序中

Posted

技术标签:

【中文标题】iOS 将 Cordova 应用程序作为 web 视图嵌入到另一个应用程序中【英文标题】:iOS Embed Cordova App into another as a webview 【发布时间】:2019-10-07 12:08:27 【问题描述】:

我在工作中有一个在 Cordova 开发的应用程序,现在我被要求“插入”该应用程序,以便能够从另一个也将在 Cordova 开发的应用程序打开它。总而言之,他们想从另一个应用程序打开一个应用程序。在 android 中,我已经能够通过这样的 webviews 做到这一点:

这两个应用都是用 Ionic 制作的。 我编译它以获得www 文件夹。 我将www文件夹复制到插件项目的src文件夹中。

对于 Android,我使用以下代码:

PhonePlugin.java

public class PhonePlugin extends CordovaPlugin 

@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException 
    try 
        actionExecutor(action, args);
        callbackContext.success("launched!");
     catch (Exception e) 
        callbackContext.error(e.getLocalizedMessage());
    

    return true;


private void actionExecutor(String action, JSONArray args) throws Exception 
    if ("start".equals(action)) 
        JSONObject jsonObject = new JSONObject(args.getString(0));
        final String poi = jsonObject.getString("poi");
        final String email = jsonObject.getString("email");
        final String apikey = jsonObject.getString("apikey");

        cordova.getThreadPool().execute(new Runnable() 
            @Override
            public void run() 
                start(poi, email, apikey);
            
        );
     else if("finish".equals(action)) 
        cordova.getThreadPool().execute(new Runnable() 
            @Override
            public void run() 
                finish();
            
        );
     else 
        throw new IllegalStateException("Unknown action: " + action);
    


private void start(String poi, String email, String apikey) 
    Intent intent = new Intent(cordova.getActivity(), PhoneActivity.class);
    intent.putExtra(PhoneActivity.EMAIL, email);
    intent.putExtra(PhoneActivity.APIKEY, apikey);
    intent.putExtra(PhoneActivity.POI, poi);

    cordova.getActivity().startActivity(intent);
    cordova.getActivity().overridePendingTransition(android.R.anim.fade_in, android.R.anim.fade_out);


private void finish() 
    cordova.getActivity().finish();

PhoneActivity.java

public class PhoneActivity extends CordovaActivity 
    public static String POI = "POI";
    public static String EMAIL = "EMAIL";
    public static String APIKEY = "APIKEY";

    @Override
    public void onCreate(Bundle savedInstanceState) 
        super.onCreate(savedInstanceState);
        super.init();

        String poi = getIntent().getStringExtra(POI);
        String email = getIntent().getStringExtra(EMAIL);
        String apikey = getIntent().getStringExtra(APIKEY);

        String indexUrl = "file:///android_asset/www/phoneplugin/index.html?poi=" + poi + "&apikey=" + apikey + "&email=" + email;
        loadUrl(indexUrl);
    


使用此代码,它可以在我想要实现的 Android 上运行(不是文件夹 android_asset/www/phoneplugin 是我的“插件化”离子应用程序中的 www。有了这个我可以使用按钮打开我的“插件化”应用程序调用我的start 方法,它运行良好,启动屏幕出现,然后应用程序运行(我真的不喜欢这个,但这是我老板想要的,所以 idc)。

现在我的问题来自 ios。我不知道 Swift,我只是进入“插件化”应用程序的启动屏幕,然后插件化应用程序关闭。

这是我到目前为止所拥有的,但我知道如何完成它,或者如果它是正确的并且问题出在其他问题上的话:

@objc(电话插件) 类 PhonePlugin : CDVPlugin

@objc(start:)
func start(_ command: CDVInvokedUrlCommand) 

    let json = try? JSON(data: jsonData)
    let authToken = json["token"]
    let key = json["secret_key"]

    let vc = CDVViewController(nibName: nil, bundle: nil)

    vc.startPage = "phoneplugin/index.html"

    let rootVC = UIApplication.shared.keyWindow?.rootViewController

    rootVC?.presentedViewController?.dismiss(animated: false, completion: nil)
    rootVC?.present(vc, animated: true, completion: nil)


@objc(finish:)
func finish(_ command: CDVInvokedUrlCommand) 
    let rootVC = UIApplication.shared.keyWindow?.rootViewController
    rootVC?.presentedViewController?.dismiss(animated: false, completion: nil)

如果需要,我的plugin.xml 如下:

<?xml version='1.0' encoding='utf-8'?>
<plugin id="ionic-phone-plugin" version="1.0.0" 
    xmlns="http://apache.org/cordova/ns/plugins/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android">

    <name>PhonePlugin</name>

    <js-module name="PhonePlugin" src="www/PhonePlugin.js">
        <clobbers target="window.cordova.plugins.PhonePlugin" />
    </js-module>

    <engines>
        <engine name="cordova" version=">=6.5.0" />
    </engines>

    <asset src="src/www" target="phoneplugin" />
    <dependency id="cordova-android-support-gradle-release" version="2.1.0" />
    <dependency id="cordova-android-play-services-gradle-release" version="3.0.0" />
    <dependency id="cordova-android-firebase-gradle-release" version="3.0.0" />
    <dependency id="cordova-plugin-bluetooth-serial" version="0.4.7" />
    <dependency id="cordova-plugin-geolocation" version="4.0.1" />
    <dependency id="cordova-plugin-insomnia" version="4.3.0" />
    <dependency id="cordova-plugin-network-information" version="2.0.1" />
    <dependency id="cordova-plugin-request-location-accuracy" version="2.2.3" />
    <dependency id="cordova-plugin-tts" version="0.2.3" />
    <dependency id="cordova.plugins.diagnostic" version="4.0.9" />
    <dependency id="cordova-sqlite-storage" version="2.3.3" />
    <dependency id="cordova-open-native-settings" version="1.5.2" />
    <dependency id="cordova-plugin-statusbar" version="2.4.2" />
    <dependency id="situm-cordova-plugin-official" version="1.14.2" />
    <dependency id="cordova-plugin-screen-orientation" version="3.0.1" />
    <dependency id="cordova-plugin-add-swift-support" version="1.7.2"/>

    <platform name="android">
        <config-file parent="/*" target="res/xml/config.xml">
            <feature name="PhonePlugin">
                <param name="android-package" value="com.test.phoneplugin.PhonePlugin" />
            </feature>
        </config-file>


        <config-file target="AndroidManifest.xml" parent="/manifest/application">
            <activity android:name="com.test.phoneplugin.PhonePluginActivity" android:screenOrientation="portrait" />
        </config-file>

        <source-file src="src/android/com/test/phoneplugin/PhonePlugin.java" target-dir="src/com/test/phoneplugin" />
        <source-file src="src/android/com/test/phoneplugin/PhoneActivity.java" target-dir="src/com/test/phoneplugin" />
    </platform>


    <platform name="ios">
        <config-file parent="/*" target="config.xml">
            <feature name="PhonePlugin">
                <param name="ios-package" value="PhonePlugin" />
            </feature>
        </config-file>

        <source-file src="src/ios/PhonePlugin.swift" />
    </platform>

</plugin>

我试图安装这个插件化应用程序的config.xml 是这样的:

<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.adadadasasdfffgg" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>MyApp</name>
    <description>An awesome Ionic/Cordova app.</description>
    <author email="hi@ionicframework.com" href="http://ionicframework.com/">Ionic Framework Team</author>
    <content src="index.html" />
    <access origin="*" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <allow-navigation href="*" />
    <preference name="ScrollEnabled" value="false" />
    <preference name="android-minSdkVersion" value="19" />
    <preference name="BackupWebStorage" value="none" />
    <preference name="SplashMaintainAspectRatio" value="true" />
    <preference name="FadeSplashScreenDuration" value="300" />
    <preference name="SplashShowOnlyFirstTime" value="false" />
    <preference name="SplashScreen" value="screen" />
    <preference name="SplashScreenDelay" value="3000" />
    <platform name="android">
        <allow-intent href="market:*" />
        <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
        <icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
        <icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
        <icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
        <icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
        <icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
        <splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
        <splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
        <splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
        <splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
        <splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
        <splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
        <splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
        <splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
        <splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
        <splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
        <splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
        <splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
        <icon  src="resources/ios/icon/icon.png"  />
        <icon  src="resources/ios/icon/icon@2x.png"  />
        <icon  src="resources/ios/icon/icon-40.png"  />
        <icon  src="resources/ios/icon/icon-40@2x.png"  />
        <icon  src="resources/ios/icon/icon-40@3x.png"  />
        <icon  src="resources/ios/icon/icon-50.png"  />
        <icon  src="resources/ios/icon/icon-50@2x.png"  />
        <icon  src="resources/ios/icon/icon-60.png"  />
        <icon  src="resources/ios/icon/icon-60@2x.png"  />
        <icon  src="resources/ios/icon/icon-60@3x.png"  />
        <icon  src="resources/ios/icon/icon-72.png"  />
        <icon  src="resources/ios/icon/icon-72@2x.png"  />
        <icon  src="resources/ios/icon/icon-76.png"  />
        <icon  src="resources/ios/icon/icon-76@2x.png"  />
        <icon  src="resources/ios/icon/icon-83.5@2x.png"  />
        <icon  src="resources/ios/icon/icon-small.png"  />
        <icon  src="resources/ios/icon/icon-small@2x.png"  />
        <icon  src="resources/ios/icon/icon-small@3x.png"  />
        <icon  src="resources/ios/icon/icon-1024.png"  />
        <splash  src="resources/ios/splash/Default-568h@2x~iphone.png"  />
        <splash  src="resources/ios/splash/Default-667h.png"  />
        <splash  src="resources/ios/splash/Default-736h.png"  />
        <splash  src="resources/ios/splash/Default-Landscape-736h.png"  />
        <splash  src="resources/ios/splash/Default-Landscape@2x~ipad.png"  />
        <splash  src="resources/ios/splash/Default-Landscape@~ipadpro.png"  />
        <splash  src="resources/ios/splash/Default-Landscape~ipad.png"  />
        <splash  src="resources/ios/splash/Default-Portrait@2x~ipad.png"  />
        <splash  src="resources/ios/splash/Default-Portrait@~ipadpro.png"  />
        <splash  src="resources/ios/splash/Default-Portrait~ipad.png"  />
        <splash  src="resources/ios/splash/Default@2x~iphone.png"  />
        <splash  src="resources/ios/splash/Default~iphone.png"  />
        <splash  src="resources/ios/splash/Default@2x~universal~anyany.png"  />
    </platform>
    <plugin name="cordova-plugin-whitelist" spec="1.3.3" />
    <plugin name="cordova-plugin-statusbar" spec="2.4.2" />
    <plugin name="cordova-plugin-device" spec="2.0.2" />
    <plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
    <plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" />
    <plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
    <plugin name="cordova-plugin-googlemaps" spec="~2.4.4">
        <variable name="API_KEY_FOR_IOS" value="AIzaSyBpAjztTxH4ldWJBOWiJXvRZZsBVw0y_oI" />
        <variable name="API_KEY_FOR_ANDROID" value="AIzaSyD3RIddnImiOjtE0ep8mV6FrXEEcc6Uaz8" />
        <variable name="LOCATION_WHEN_IN_USE_DESCRIPTION" value="This app wants to get your location while this app runs only." />
        <variable name="LOCATION_ALWAYS_USAGE_DESCRIPTION" value="This app wants to get your location always, even this app runs in background." />
        <variable name="PLAY_SERVICES_VERSION" value="15.0.1" />
        <variable name="ANDROID_SUPPORT_V4_VERSION" value="27.+" />
    </plugin>
    <plugin name="ionic-phone-plugin" spec="/Users/macbookairdt/Desktop/test/PhonePlugin" />
    <engine name="browser" spec="~5.0.4" />
    <engine name="android" spec="~7.1.4" />
</widget>

有人知道它为什么不起作用吗?

谢谢!

【问题讨论】:

【参考方案1】:

我通过以下方式解决了这个问题:

vc.startPage = "file:///phoneplugin/index.html"

【讨论】:

以上是关于iOS 将 Cordova 应用程序作为 web 视图嵌入到另一个应用程序中的主要内容,如果未能解决你的问题,请参考以下文章

混合 cordova web 和原生 iOS 代码

如何将现有的 Angular1 Web 应用程序转换为 Cordova 应用程序?

Cordova:无论如何,是不是可以在 Javascript 中检测 iOS 应用程序是作为调试版还是作为发布版构建的?

Cordova/jQuery - 识别您的应用程序是在 Web/移动浏览器还是移动应用程序 (Android/iOS) 上运行

CSS 动画在 iOS 上无法原生运行,但带有 Cordova 端口

Cordova iOS 的 UIWebView 策略