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允许您的应用点击图片并访问相机图库中的图像。
2Ext.device.Connection
该API用于检查设备是否连接了互联网。
3Ext.device.Notification
此API用于显示本机消息窗口。
4Ext.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作为相机捕获图像。我们也可以将资源作为库来访问画廊图像。

成功是一个回调函数,在成功捕获图像时调用。当未成功捕获图像时,我们可以进行失败回调。

上面的示例打开了相机应用程序,然后单击图片。

连接

此API用于检查您的设备是否已与Internet连接。如今,几乎所有应用程序都需要Internet才能运行。因此,此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);
});

作者:terry,如若转载,请注明出处:https://www.web176.com/senchatouch/1561.html

(0)
打赏 支付宝 支付宝 微信 微信
terryterry
上一篇 2021年1月22日 下午3:45
下一篇 2021年1月22日 下午3:58

相关推荐

发表回复

登录后才能评论