原生包装最大的好处之一是访问的原生API。煎茶触摸2提供了一个原生API,通过其Ext.device的
API 访问。Ext.device
API本身不提供原生API的功能-它只是一个包装,可以用来访问本地API采用煎茶包装机或第三方解决方案的PhoneGap和iPhone模拟器等的。在写作的时候,Ext.device
提供的API:
- -告诉您是否该器件具有当前连接到互联网。
- -允许您使用本机通知窗口(本机版本的),。
- -让您的设备提供尽可能多的信息,其目前的方向。
- -让您的应用程序来拍照或选择从相机库(用户的权限)。
入门
因为我们要保持我们的应用程序小,因为原生API只适用于本地的打包应用程序,Ext.device
API不包含在标准的建立煎茶触摸2。当您要使用的任何设备API,你必须要求他们使用:
('');({ name:'MyApp'// the rest of your app follows});
连接
连接API是用来确定是否该设备是目前在线。它暴露了两个主要的方法- isOnline
和的getType
:
if(()){ ('You are currently connected via '+());} else{ ('You are not currently connected');}
这可能是最简单的API提供Ext.device
。如果你加载的设备上或内部的模拟器,你会看到一个煎茶触摸消息框出现可以告诉你,你是离线状态,或者如果你在线,连接类型(WIFI,2G,3G等) 。可能的连接类型的完整列表,请参阅文档。
通知
通知是用来显示本地的对话框。通知的工作非常像和可以在许多不同的方式进行配置。例如,我们在此可以显示本机的标题和消息通知框:
({ title:'One Button', message:'This is a simple notification with one button.'});
这将导致原生的通知窗口出现这样的:
这是会弹出一个本地消息框,我们配置的标题和消息。它增加了一个“确定”按钮,这样用户就可以关闭该消息。当用户点击该按钮时,我们调用回调函数 - 在这种情况下,我们会回答他们的按钮,水龙头打开第二个通知:
({ title:'One Button', message:'This is a simple notification with one button.', callback:function(button){ //When the user taps a button, show another notification({ message:'You pressed: "'+ button +'"'});}});
第二个消息,这是很好的,我们没有提供一个标题 - 它只是显示消息和一个“确定”按钮。我们可以自定义的按钮,很容易呈现给用户:
({ 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({ message:'You pressed: "'+ button +'"'});}});
这一次,我们提供了三个按钮中的文本字符串的按钮阵列-当我们运行这个代码,现在我们看到堆积在彼此顶部的按钮:
振动
最终的能力的通知API的振动设备。实现这一点是显而易见的:
Ext.device.notification.vibrate();
这将导致设备的振动的时间很短,并且可以根据需要多次调用。
相机
的相机API允许你拍照使用手机的摄像头,或者选择现有的照片库中的图像可在手机。下面是我们如何能要求的设备,以提示用户采取新的图片:
({ source:'camera', destination:'file', success:function(url){ //show the newly captured image in a full screen component:('',{ src: url, fullscreen:true});}});
请注意,我们在这里指定了两个选项(除了我们的成功回调) -源和目标。我们可以设置源 “相机”或“图书馆” -第一个选项打开相机拍摄的新图片,第二个打开一个原生的照片浏览器“窗口中选择一个现有的图像。我们上面的例子中,要打开相机的应用程序,然后保存到一个文件中的新形象,终于拨打我们的成功与该文件的本地URL的功能。
有几个其他的选项可以通过到调用:
成功
-要调用的函数,如果成功收购的图像。失败
-要调用的函数,如果无法获取的图像。范围
-范围,运行上面的两个函数在(这
)的值设置。质量
-为相机提供了一丝的压缩质量,我们希望我们的形象有(0-100)。宽度
-的新形象,在PX所需的宽度。高度
-新的图像所期望的高度,在像素。源
-可以是“相机”或“图书馆” - “相机”采用了新的图片,“图书馆”,选择一个现有的。目的地
-可以'文件'或'数据' -文件返回一个本地的URL的新形象,'数据'传回的图像的Base64编码的字符串。编码
-可以是“JPEG”,“JPG”或“PNG” -前两个选项对图像进行编码为JPEG,PNG作为第三。
这些选项的任意数量的,可以通过到您的电话。
方向
方向API产量有关下列内容的信息的移动设备的当前方向。这一次,我们注册了一个处理函数被称为每次的变化方向检测:
('orientation',function(e){ var alpha =Math.round(e.alpha), beta =Math.round(e.beta), gamma =Math.round(e.gamma); console.log(alpha, beta, gamma);});
这将提供一个流的控制台消息的设备与α,β和γ取向。这些值对应于该装置可枢转左右的三个维度,是表示以度为单位,范围从0到360。
自定义方案的网址
使用您的应用程序到应用程序从其他应用程序的URL的自定义方案:
({ name:'Sencha', requires:[''], launch:function(){ if(){ // the application was opened via another application. Do something: alert('Applicaton pened via another application: '+Ext.device.Device.scheme.url);}// Listen for future changes('schemeupdate',function(device, scheme){ // the application was launched, closed, and then launched another from another application// this means onReady wont be called again ('cause the application is already running in the // background) - but this event will be fired alert('Applicated reopened via another application: '+ scheme.url);},this);}});
当然,你必须添加自定义URL,你想将应用程序打包时使用。为此,您可以通过添加以下代码到您的package.json
文件(煎茶本机打包程序配置文件)rawConfig
属性里面:
{ ... "rawConfig":"CFBundleURLTypes "...} CFBundleURLSchemes sencha CFBundleURLName com.sencha.example
您可以更改可用的URL方案和应用程序标识符。
然后,您可以对其进行测试,打包和安装到设备上的应用程序/ iPhone模拟器,打开Safari浏览器,并键入:煎茶:测试
。应用程序将启动,它会提醒
您指定的URL。
注:目前只适用于土生土长的煎茶包装机。如果您尝试监听此事件时,在浏览器中的PhoneGap或者干脆打包带,它将无法正常工作。
包装
现在你已经掌握的了如何使用Ext.device
API访问本地设备的功能,进行包装开始在真实设备上测试您的应用程序和指南。