Sencha Touch - 原生 API

Sencha Touch 最大的优势在于它提供了包含原生 API 的打包功能。

Ext.device API 用于提供对不同原生 API 的访问。它充当一个包装器，可以进一步用于访问不同的 API，例如 Ext.device.Camera、Ext.device.Connection 等。

Ext.device 提供以下 API：

序号	API 及描述
1	Ext.device.Camera 此 API 允许您的应用程序拍摄照片并从相机图库访问图像。
2	Ext.device.Connection 此 API 用于检查设备是否已连接到互联网。
3	Ext.device.Notification 此 API 用于显示原生消息窗口。
4	Ext.device.Orientation 此 API 用于检查手机的方向，例如纵向或横向。

相机

此 API 允许使用设备相机拍摄照片，并授予访问手机图库中可用图像的权限。

要访问任何 API，我们需要使用 Ext.require('Ext.device.Camera') 来引入该 API。

以下代码用于使用此 API 拍摄照片。

Ext.device.Camera.capture({
   source: 'camera',
   destination: 'file',
   success: function(url) {
      Ext.create('Ext.Img', {
         src: url,
         fullscreen: true
      });
   }
});

在上面的示例中，我们使用 source 作为相机来捕获图像。我们还可以将 source 设置为库来访问图库图像。

Success 是一个回调函数，在成功捕获图像时调用。如果图像未成功捕获，我们可以使用 failure 回调函数。

以上示例打开相机应用程序并拍摄照片。

连接

此 API 用于检查您的设备是否已连接到互联网。如今，几乎所有应用程序都需要互联网才能运行。因此，此 API 可用于进行预先检查，并在未连接网络时发送连接网络的通知。

以下程序显示了 Connection API 的用法

实时演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.require('Ext.device.Connection');
         Ext.application({
            name: 'Sencha',
            launch: function() {
               if (Ext.device.Connection.isOnline()) {
                  Ext.Msg.alert('You are currently connected');
               } else {
                  Ext.Msg.alert('You are not currently connected');
               }
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

它将产生以下结果：

通知

此 API 用于显示通知，类似于 Ext.Msg，并带有多个按钮。

以下程序显示了通知 API 的工作原理。

实时演示

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/resources/css/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-all.js"></script>
      <script type = "text/javascript">
         Ext.require('Ext.device.Notification');
         Ext.application({
            name: 'Sencha',
            launch: function() {
               Ext.device.Notification.show({
                  title: 'Multiple Buttons',
                  message: 'This is a notification with multiple buttons.',
                  buttons: ["Yes", "No", "Cancel"],
                  callback: function(button) {
                     Ext.device.Notification.show({
                        message: 'You pressed: "' + button + '"'
                     });
                  }
               });
            }
         });
      </script>
   </head>
   <body>
   </body>
</html>

它将产生以下结果：

方向

此 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);
});

sencha_touch_packaging.htm

打印页面