cordova-plugin-nativeview 1.0.10

cordova-plugin-nativeview 1.0.10

×

由 Michel Felipe，Adelmo Júnior 维护。

cordova-plugin-nativeview 1.0.10

  • 由
  • Michel Felipe

npm version

标题：NativeView 描述：从 cordova 应用启动原生视图或其他应用。

cordova-plugin-nativeview

从 cordova 应用启动 UIViewController（iOS）或 Activity（Android），或者启动外部应用（基于 cordova 插件 startapp）

您可以在独立项目（基本 cordova 项目）中使用此插件，或者将其添加到现有的原生 Android/IOS 应用程序中，如 在原生应用中嵌入 Cordova 中所述

注意：如果您只想从 cordova 应用 退出 或返回到原生视图（仅限 Android），请使用：navigator['app'].exitApp()

安装

cordova plugin add cordova-plugin-nativeview --save

# using IONIC
ionic cordova plugin add cordova-plugin-nativeview --save

附加：原生应用程序（Android/IOS 原生代码）

所有平台

确保 config.xml 文件包含以下 <feature> 标签

<feature name="NativeView">
    <param name="android-package" value="br.com.mfdeveloper.cordova.NativeView" />
    <param name="onload" value="true" />
</feature>

IOS

  • 将您的 cordova 项目中的 config.xml 复制到 XCode 项目根目录。
  • 安装 cocoapods
  • 将此插件添加为 pod 依赖项
# Objective-C version (Default)
pod 'cordova-plugin-nativeview', '~> 1.0.7'

# Swift version (needs update to latest Objective-c implementations)
pod 'cordova-plugin-nativeview', :git => 'https://github.com/mfdeveloper/cordova-plugin-nativeview.git', :branch => 'swift'

ANDROID

将以下代码片段添加到您的 build.gradle 文件中

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

implementation ('com.github.mfdeveloper:cordova-plugin-nativeview:1.0.7')

此依赖项使用 jitpack 添加

或者，直接将 NativeView 类添加到您的 Android 项目中

  • 从您的 cordova 项目

    • 将 platforms/android/assets/www 文件夹的内容复制到您的 Android 项目中（通常是 app/src/main/assets）。或者创建一个 gradle 作业来完成此操作。
    • 将 config.xml 文件复制到 src/main/res/xml Android 项目文件夹中。

  • 克隆此仓库，并将以下类复制到您的 Android 项目中：src/android/NativeView.java

  • 或者创建包含此类的 .jar 或 .aar，并像添加 Android 库依赖项 一样导入

  • 验证以下代码片段是否存在于您的 AndroidManifest.xml 文件中。这是从 Intent (使用 [package + activityName]) 打开特定 Activity 所必需的

<activity android:name=".MyActivity" >
    <intent-filter>
        <action android:name="com.mypackage.MyActivity" />
        <category android:name="android.intent.category.DEFAULT" />
    </intent-filter>
</activity>

如果 AndroidManifest.xml 中不存在此过滤器，您将得到以下错误： 没有 Activity 可以处理 Intent splash screen

  • 构建/运行您的 Android 项目！

支持的平台

  • Android Android
  • iOS iOS

方法

NativeView.show(packageOrClassName: string, className: string)

或者

NativeView.show(params: object)

显示一个本地视图。

ANDROID

document.addEventListener("deviceready", function() {
    //  pass a package name and a activity by params
    cordova.plugins.NativeView.show('com.mycompany', 'MyActivity')
    .then(function() {
      
      /**
       * Do something when open the activity.
       * This code here will be executed in paralell,
       * not after open.
       */
    }).catch(function(error) {
        
        /**
         * error.success => Will be "false"
         * error.name => Exception type from the captured error 
         * error.message => A exception message
         */
    });

    // Preferably, pass the Package and Activity in a json
    cordova.plugins.NativeView.show({
        packageName: 'com.mycompany',
        className: 'MyActivity',
    });

}, false);

IOS

  • 传入 Storyboard 名称和 storyboard id
document.addEventListener("deviceready", function() {

    /*
     * The first param is a storyboard name, and
     * the second param is a storyboardId 
     * (conventionally the same name of the ViewController class name)
     */
    cordova.plugins.NativeView.show('MyStoryboard', 'MyUIViewController')
    .then(function() {
      
      /**
       * Do something when open the activity.
       * This code here will be executed in paralell,
       * not after open.
       */
    });

    // Preferably, pass the ViewController and Storyboard in a json
    cordova.plugins.NativeView.show({
        storyboardName: 'MyStoryboard',
        viewControllerName: 'MyUIViewController'
    });

}, false);
  • 仅传入 ViewController 类/xib 名称
/*
*  Or, pass only the UIViewController name, if you don't
*  use storyboards in your project. This plugin try instantiate
*  from a ".xib" file. If not exists, try instantiate just by
*  UIViewController class.
* 
*  By convention, your ViewController class/xib needs contains 'Controller' 
*  string in any part of the name 
* .
*/
cordova.plugins.NativeView.show('MyUIViewController');

// Preferably, pass the ViewController in a json
cordova.plugins.NativeView.show({
    viewControllerName: 'MyUIViewController'
});
  • 仅传入 Storyboard 名称
/*
*  Or, pass only the Storyboard name. If you don't pass a 
*  ViewController class name in second param, the 
*  "rootViewController" of your storyboard will be
*  instantiated. 
* 
*  By convention, your Storyboard name needs contains 'Storyboard' 
*  string in any part of the name
*/
cordova.plugins.NativeView.show('MyStorboard');

// Preferably, pass the Storyboard in a json
cordova.plugins.NativeView.show({
    storyboardName: 'MyStorboard'
});

NativeView.checkIfAppInstalled(uri: string)

或者

NativeView.checkIfAppInstalled(params: { uri: string })

验证设备上是否安装了响应 uri 的其他应用程序。

cordova.plugins.NativeView.checkIfAppInstalled('another-app://custom-host')
.then(function() {
    console.log('The app is INSTALLED!');
}).catch(function(error) {
    console.log("The app is NOT INSTALLED!");
    throw error;
});

// Preferably, pass the uri in a json
cordova.plugins.NativeView.show({
    uri: 'another-app://custom-host'
});

NativeView.showMarket(marketId: string)

或者

NativeView.showMarket(params: { marketId: string })

打开已安装在设备中的应用商店（Apple Store/Google Play）或浏览器。

ANDROID

// Pass a app package on Android (found this on Google Play)
cordova.plugins.NativeView.showMarket('my.company.other.app');

// Preferably, pass the marketId in a json
cordova.plugins.NativeView.show({
    marketId: 'my.company.other.app'
});

IOS

// Pass a app id from the Apple Store
cordova.plugins.NativeView.showMarket('idxyz1?mt=x');

// Preferably, pass the marketId in a json
cordova.plugins.NativeView.showMarket({
    marketId: 'idxyz1?mt=x'
});

NativeView.getBuildVariant(params: { catchError: boolean })

获取当前在

安卓(仅限)

/*
* Pass the param "catchError", and use the `catch()` method to verify an 
* error (if happens)
*
* Otherwise, this method will return the variant like a string,
* or null if not found.
*
* This is useful if you need show a NativeView by environment
*/
cordova.plugins.NativeView.getBuildVariant({
    catchError: true
}).then(function(value) {
    console.log('My environment is: ' + value);
}).catch(function(error) {
    if (!error.success && error.message) {
        console.log(error.message);
    }
});

/* Optionally, don't pass any parameter and get the Build Variant 
 * value, or NULL
 */
cordova.plugins.NativeView.getBuildVariant()
.then(function(value) {
    console.log('My environment is: ' + value);
});

IONIC

将 document.addEventListener 事件替换为 this.platform.ready().then(...) 服务方法。参见 IONIC 平台文档

许可协议

该项目采用 MIT 许可协议许可 - 详细信息请见 LICENSE 文件

待办事项

  • 在 JS 中更好地捕获 IOS 异常
  • 更新 Swift 实现方案
  • 增加 cordova 集成测试