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

列印頁面