使用 Ext.device 访问 Native API

Native 打包最重要的好处之一是能够访问 Native API。Sencha Touch 通过其 Ext.device API 提供对 Native API 的访问。Ext.device API 本身不提供 Native API 功能，它只是一个包装器，您可以使用它来访问由 Sencha Packager 或第三方解决方案（如 Apache Cordova 或模拟器或仿真器）驱动的 Native API。

Sencha Touch Ext.device 提供以下 API

• Ext.device.Camera - 允许您的应用拍照或从相机库中选择图像（需要用户许可）。
• Ext.device.Connection - 指示设备当前是否已连接到 Internet。
• Ext.device.Notification - 使您能够使用 Native 通知窗口（Ext.Msg 的 Native 版本）。
• Ext.device.Orientation - 提供有关设备当前方向的信息。

您还可以使用 Ext.device.Device 从一个应用程序启动另一个应用程序。

注意： 有关适用于 Accelerometer、Browser、Camera、Capture、Compass、Connection、Contacts、Device、FileSystem、Geolocation、Globalization、Media、Notification、Push、Splashscreen 和 SQLite（存储）的 Apache Cordova Ext.device API，请参阅 开发 Cordova 应用。Cordova 指南还描述了如何为 Android、iOS 和 BlackBerry 模拟和打包您的应用。

入门

因为我们希望保持应用程序的小巧，并且因为 Native API 仅适用于 Native 打包的应用程序，所以 Ext.device API 未包含在 Sencha Touch 的标准构建中。当您要使用任何 Device API 时，必须使用 Ext.require 来引入它们

Ext.require('Ext.device.Connection');

Ext.application({
    name: 'MyApp'
    // the rest of your app follows
});

连接

Connection API 确定设备当前是否在线。此 API 公开两个主要方法 - isOnline 和 getType

if (Ext.device.Connection.isOnline()) {
    Ext.Msg.alert('You are currently connected via ' + Ext.device.Connection.getType());
} else {
    Ext.Msg.alert('You are not currently connected');
}

这可能是 Ext.device 提供的 API 中最简单的 API。如果您在设备上或模拟器内加载此代码，您将看到一个 Sencha Touch 消息框出现，指示您处于离线状态，或者指示您的连接类型（wifi、2g、3g 等），如果您在线。有关可能的连接类型的完整列表，请参阅 Ext.device.Connection 文档。

通知

通知用于显示 Native 对话框。通知的工作方式非常类似于 Ext.Msg，并且可以通过多种不同的方式进行配置。例如，以下示例演示了如何显示带有标题和消息的 Native 通知框

Ext.device.Notification.show({
    title: 'One Button',
    message: 'This is a simple notification with one button.'
});

此代码导致出现一个 Native 通知窗口，如下图所示

以下代码显示一个带有配置标题和消息的 Native 消息框。它还添加了一个“确定”按钮，以便用户可以关闭消息。当用户点击按钮时，将调用回调 - 在此示例中，我们通过打开第二个通知来响应按钮点击

Ext.device.Notification.show({
    title: 'One Button',
    message: 'This is a simple notification with one button.',

    callback: function(button) {
        //When the user taps a button, show another notification
        Ext.device.Notification.show({
            message: 'You pressed: "' + button + '"'
        });
    }
});

我们没有为第二条消息提供标题，这没问题 - 它只显示消息和一个“确定”按钮。我们可以按如下方式自定义呈现给用户的按钮

Ext.device.Notification.show({
    title: 'Multiple Buttons',
    message: 'This is a notification with multiple buttons.',
    buttons: ["Cancel", "Login", "Another"],

    callback: function(button) {
        //When the user taps a button, show another notification
        Ext.device.Notification.show({
            message: 'You pressed: "' + button + '"'
        });
    }
});

这次，我们在 buttons 数组中提供了三个按钮文本字符串。当我们运行此代码时，我们现在看到按钮彼此堆叠在一起，如下图所示

振动

通知 API 的另一项功能是使设备振动。您可以按照以下代码所示进行此操作

Ext.device.notification.vibrate();

此方法调用使设备短暂振动，并且可以根据需要经常调用。

相机

Camera API 允许您使用手机的摄像头拍照，或者从手机上现有的照片库中选择图像。以下代码示例演示了如何拍摄新照片

Ext.device.Camera.capture({
    source: 'camera',
    destination: 'file',

    success: function(url) {
        //show the newly captured image in a full screen Ext.Img component:
        Ext.create('Ext.Img', {
            src: url,
            fullscreen: true
        });
    }
});

在此示例中，我们指定了两个选项（除了我们的 success 回调）- source 和 destination。我们可以将 source 设置为“camera”或“library” - 第一个选项打开相机以拍摄新照片，第二个选项打开 Native 照片浏览器窗口以选择现有图像。此示例打开相机应用并将新图像保存到文件，最后调用我们的 success 函数，并使用该文件的本地 URL。

可以传递到 Ext.device.Camera#capture 调用的其他选项如下

• success - 如果成功获取图像，则调用。
• failure - 如果无法获取图像，则调用。
• scope - 设置运行 success 和 failure 函数的 this 值。
• quality - 为相机提供有关图像压缩质量的提示 (0-100)。
• width - 指示新图像的所需宽度，以像素为单位。
• height - 指示新图像的所需高度，以像素为单位。
• source - 指示“camera”或“library” - “camera”拍摄新照片，“library”选择现有照片。
• destination - 指示“file”或“data” - file 返回新图像的本地 url，“data”返回图像的 Base64 编码字符串。
• encoding - 指示“jpeg”、“jpg”或“png” - 前两个选项将图像编码为 JPEG，第三个选项编码为 PNG。

可以将任意数量的选项传递到您的 Ext.device.Camera#capture 调用中。

方向

Orientation API 提供有关设备当前方向的信息。此示例注册一个处理程序函数，该函数在每次检测到设备方向更改时调用

Ext.device.Orientation.on('orientation', function(e) {
    var alpha = Math.round(e.alpha),
        beta = Math.round(e.beta),
        gamma = Math.round(e.gamma);

    console.log(alpha, beta, gamma);
});

此示例提供一系列控制台消息，其中包含设备的 alpha、beta 和 gamma 方向。这些值对应于设备可以围绕其旋转的三个维度，并以 0 到 360 度表示。

自定义 Scheme URL

您可以使用自定义 Scheme URL 从一个应用程序启动另一个应用程序

Ext.application({
    name: 'Sencha',
    requires: ['Ext.device.Device'],
    launch: function() {
        if (Ext.device.Device.scheme) {
            // The application was opened via another application. Do something:
            alert('Applicaton opened via another application: ' + Ext.device.Device.scheme.url);
        }

        // Listen for future changes
        Ext.device.Device.on('schemeupdate', function(device, scheme) {
            // The application was launched, closed, and then launched another from another application
            // this means onReady is not called again (because the application is already running  
            // in the background) - but this event will be fired
            alert('Applicated reopened via another application: ' + scheme.url);
        }, this);
    }
});

为了使此代码工作，在打包应用程序时，通过在 package.json 文件（Sencha Native Packager 配置文件）内的 rawConfig 属性中添加以下代码来添加自定义 URL

{
    ...
    "rawConfig": "<key>CFBundleURLTypes</key><array><dict><key>CFBundleURLSchemes</key><array><string>sencha</string></array><key>CFBundleURLName</key><string>com.sencha.example</string></dict></array>"
    ...
}

您可以从上一个示例中更改可用的 URL scheme 和应用程序标识符。

您可以通过打包并将应用程序安装到设备或 iOS 模拟器上，打开 Safari，然后键入：sencha:testing 来测试代码。应用程序启动并显示带有指定 URL 的警报。

注意： 这目前仅适用于 Sencha Native Packager。如果您尝试在使用 Apache Cordova 打包或仅在浏览器中时监听此事件，它将不起作用。有关 Apache Cordova Ext.device.device.Cordova 事件，请参阅 开发 Cordova 应用。

打包

现在您已经了解了如何使用 Ext.device API 访问 Native 设备功能，请继续阅读有关 Native 打包 的指南，开始在真机上测试应用。