搜索文档 /

交叉平台

betway东盟体育app离子是由地下建造的,使开发简单,无论您建造什么平台。betway东盟体育app离子应用程序真正跨平台:能够作为Android,iOS,电子和渐进式Web应用程序(PWA),来自单个代码库。在优化应用程序以跨这些平台上工作时,有一些要点可以记住。

硬件api

在本机应用程序中,通过API调用与设备通信是很常见的,比如打开摄像头或访问地理位置。当在web环境中调用时,这些API调用将无法工作,因为没有本地桥接。爱奥尼亚有几种处理方法。betway东盟体育app

betway东盟体育app离子本地

betway东盟体育app离子本地 它有自己的内部逻辑来检测它是否在本机环境中。如果不是本地环境且没有可用的Cordova插件,它将打印一个警告,而不是抛出一个运行时错误。应用程序不会崩溃,它将继续工作,尽管没有原生功能。

平台检测

在应用程序的逻辑中,每当需要进行本机API调用时,建议总是先检查本机环境的状态。例如:


              
              
             平台
              
              准备好
              
              
              
              然后
              
              
              
             
              =>
             
              
             
              //'混合'检测Cordova和电容
             
              如果
             
              
              
              
             平台
              
              
              
              “混合”
              
              
             
              
             
              //调用本地API
             
              
             
              其他的
             
              
             
              //返回浏览器api
             
              
             
              
              
              
复制 复制

当对目标API的访问不确定时,该位代码可以非常有用。

浏览器回退

人们使用的许多本机API(例如,文件API)在浏览器中不可用。API始终改进并赶上本地,因此建议研究它们。考虑前两点,创建一个适用于应用程序运行的平台的良好体验相当容易。

桌面

当计划部署一个应用程序到桌面,要么使用 电子 或作为一个 先进的Web应用程序 在美国,确保应用程序在大型设备上运行顺畅是很重要的。

布局

许多人很少注意到应用的布局,但它可能对用户体验和可用性产生巨大影响。考虑以下常见的UI模式:


                <
               离子内容
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第1项
                
               ion-label
               >
             
                
               ion-item
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第2项
                
               ion-label
               >
             
                
               ion-item
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第3项
                
               ion-label
               >
             
                
               ion-item
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第4项
                
               ion-label
               >
             
                
               ion-item
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第5项
                
               ion-label
               >
             
                
               ion-item
               >
             
                
               离子内容
               >
复制 复制

这将渲染5个宽度为100%的项目。这在移动设备上看起来可能很棒,如下所示,但在桌面浏览器上查看则是另一回事。由于屏幕的宽度太大,这些物品会被拉伸以填满整个屏幕,从而导致屏幕空间被闲置。

为了改善这种体验,我们可以用 网格 组件。视图可以很容易地重写为更大屏幕上可用的东西:


                <
               ion-grid
               >
             
                <
               离子排
               >
             
                <
               Ion-Col.
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第1项
                
               ion-label
               >
             
                
               ion-item
               >
             
                
               Ion-Col.
               >
             
                <
               Ion-Col.
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第2项
                
               ion-label
               >
             
                
               ion-item
               >
             
                
               Ion-Col.
               >
             
                <
               Ion-Col.
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第3项
                
               ion-label
               >
             
                
               ion-item
               >
             
                
               Ion-Col.
               >
             
                <
               Ion-Col.
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第4项
                
               ion-label
               >
             
                
               ion-item
               >
             
                
               Ion-Col.
               >
             
                <
               Ion-Col.
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第5项
                
               ion-label
               >
             
                
               ion-item
               >
             
                
               Ion-Col.
               >
             
                
               离子排
               >
             
                
               ion-grid
               >
复制 复制

通过包裹物品 ion-grid 元素,离子网格系统添加到我betway东盟体育app们的布局。将每个项包装在一列中,使这些项在网格内沿同一行占据等宽。

我们可以通过加 固定 属性的 <离子网格> 元素。这告诉网格根据屏幕大小设置一个固定的宽度。这是完美的大屏幕,当项目将开始拉伸再次没有宽度的网格。

控件可以进一步定制网格以更改列的大小 Ion-Col. 特性。


                <
               ion-grid
              
               固定
               >
             
                <
               离子排
               >
             
                <
               Ion-Col.
              
               大小
                
                
               12
                
              
               size-sm
                
                
               9
                
              
               尺寸MD.
                
                
               6
                
              
               尺寸LG.
                
                
               4
                
              
               size-xl
                
                
               3.
                
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第1项
                
               ion-label
               >
             
                
               ion-item
               >
             
                
               Ion-Col.
               >
             
                <
               Ion-Col.
              
               大小
                
                
               12
                
              
               size-sm
                
                
               9
                
              
               尺寸MD.
                
                
               6
                
              
               尺寸LG.
                
                
               4
                
              
               size-xl
                
                
               3.
                
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第2项
                
               ion-label
               >
             
                
               ion-item
               >
             
                
               Ion-Col.
               >
             
                <
               Ion-Col.
              
               大小
                
                
               12
                
              
               size-sm
                
                
               9
                
              
               尺寸MD.
                
                
               6
                
              
               尺寸LG.
                
                
               4
                
              
               size-xl
                
                
               3.
                
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第3项
                
               ion-label
               >
             
                
               ion-item
               >
             
                
               Ion-Col.
               >
             
                <
               Ion-Col.
              
               大小
                
                
               12
                
              
               size-sm
                
                
               9
                
              
               尺寸MD.
                
                
               6
                
              
               尺寸LG.
                
                
               4
                
              
               size-xl
                
                
               3.
                
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第4项
                
               ion-label
               >
             
                
               ion-item
               >
             
                
               Ion-Col.
               >
             
                <
               Ion-Col.
              
               大小
                
                
               12
                
              
               size-sm
                
                
               9
                
              
               尺寸MD.
                
                
               6
                
              
               尺寸LG.
                
                
               4
                
              
               size-xl
                
                
               3.
                
               >
             
                <
               ion-item
               >
             
                <
               ion-label
               >
             第5项
                
               ion-label
               >
             
                
               ion-item
               >
             
                
               Ion-Col.
               >
             
                
               离子排
               >
             
                
               ion-grid
               >
复制 复制

在上面的例子中发生了很多事情。以下是关键点:

  • Ion-Col. 从中获得宽度 大小 属性,其中size的值是要占全部可用列的列数。默认的可用列数是12。

  • 大小 属性可以添加断点, 大小——{断点} .此值设置指定断点及以上的大小。

有关使用网格自定义的更多信息,请参见 网格 文档。

存储

大多数应用程序在某些时候都需要在本地存储一些数据。无论是从XHR请求存储一些JSON,还是保存一个认证令牌,都有许多不同的存储选项可用。除此之外,如果应用程序在本地环境中运行,就可以创建一个完整的SQLite数据库并在那里存储数据。所有这些不同的存储机制都有各自的优点和缺点,但是Ionic的开发人员不需要担心这些。betway东盟体育app

betway东盟体育app离子存储

在这种情况下, betway东盟体育app离子的存储库 是多环境用例的完美候选。Ionic的存储类构建在经过良好测试的local牧草库之上,它提供了一种适应性强的存储机制,可以为当前运行betway东盟体育app时选择最佳的存储解决方案。

目前这意味着它将通过SQLite进行本机,IndexedDB(如果可用),WebSQL或本地存储。通过处理所有此项,它允许使用稳定的API写入存储。


              
             
              MyClass
             
              
             
              构造函数
              
               民众
              贮存
               
              存储
              
             
              
              
             
              异步
             
              setData.
              
              关键
               
              价值
              
             
              
             
              常量
             res
              
             
              等待
             
              
              
             贮存
              
              
              
             关键
              
             价值
              
              
             
              安慰
              
              日志
              
             res
              
              
             
              
             
              异步
             
              getdata.
              
              关键
              
             
              
             
              常量
             keyVal
              
             
              等待
             
              
              
             贮存
              
              得到
              
             关键
              
              
             
              安慰
              
              日志
              
              的关键是
              
             keyVal
              
              
             
              
             
              
复制 复制

还有其他的存储解决方案,比如PouchDB,它提供了类似的、可适应的存储机制。

以前的
基础知识
下一个
网络视图
Baidu