跨平台/h1>
betway东盟体育appIonic是从头开始构建的,以使开发变得轻松,无论您要构建哪个平台。betway东盟体育app离子应用程序是真正的跨平台:能够从单个代码库中作为Android,iOS,Electron和Progressive Web应用程序(PWA)运行。优化应用程序在这些平台上工作时,需要牢记一些要点。//p>
硬件API/a>
在本机应用程序中,通常是进行API调用以与设备进行通信,例如打开相机或访问地理位置。由于没有本地桥梁,因此在网络环境中调用时,这些API呼叫将无效。离子有几种方法可以处理这一点。betway东盟体育app//p>
betway东盟体育app离子本地/a>
betway东盟体育app离子本地/a>
有自己的内部逻辑来检测它是否在本地环境内部。如果它不是本机环境,并且没有可用的Cordova插件,则它将打印警告,而不是丢下运行时错误。该应用不会破坏,尽管没有本地功能,但它将继续工作。//p>
平台检测/a>
在应用程序的逻辑中,只要需要进行本机API调用,建议您始终首先检查本机环境的状态。例如://p>
这个/span>
。/span>
平台
。/span>
准备好/span>
((/span>
)/span>
。/span>
然后/span>
((/span>
((/span>
)/span>
=>/span>
{//span>
//“混合”都检测到Cordova和电容器/span>
如果/span>
((/span>
这个/span>
。/span>
平台
。/span>
是/span>
((/span>
'杂交种'/span>
)/span>
)/span>
{//span>
//拨打本机API电话/span>
}//span>
别的/span>
{//span>
//浏览器API的后备/span>
}//span>
}//span>
)/span>
;/span>
当针对访问本机API的目标环境不确定时,这一点代码可能会非常有用。/p>
浏览器后备/a>
人们使用的许多本机API(例如,文件API)在浏览器中不可用。API总是在改善并赶上本地,因此建议对其进行研究。考虑到前两点,很容易创建一个不错的体验,以适应该应用程序正在运行的平台。//p>
桌面/a>
计划将应用程序部署到桌面时,要么使用
电子/a>
或作为一个
渐进的网络应用程序/strong>
,重要的是要确保应用程序在较大的设备上平稳工作。/p>
布局/a>
许多人很少注意到应用程序的布局,但是它可能会对经验和可用性产生巨大影响。考虑这种常见的UI模式://p>
<//span>
离子含量/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目1
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目2
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目3
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目4
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目5
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子含量/span>
>//span>
这将渲染5个项目,每个项目宽度为100%。如下所示,这在移动设备上看起来可能很棒,但是在桌面浏览器上查看此内容是另一回事。由于宽屏幕宽度,这些物品变得延伸以填充整个屏幕,而屏幕空间未使用。//p>
为了改善这种体验,我们可以将这些物品包裹在
网格/a>
零件。该视图可以轻松地重写为更大屏幕上更可用的东西://p>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目1
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目2
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目3
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目4
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目5
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
通过将项目包裹在
离子网格/code>
元素,将离子网格系统添加到betway东盟体育app我们的布局中。将每个项目包裹在列中,使该项目沿同一行沿网格内部相等的宽度。//p>
我们可以通过添加
固定的/code>
属性
/code>
元素。这告诉电网根据屏幕尺寸具有固定宽度。当物品将开始伸展时,网格上没有宽度时,这对于大型屏幕非常适合。//p>
可以进一步定制网格,以更改列的大小,并添加
离子电池/code>
特性。/p>
<//span>
离子网格/span>
固定的/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
=//span>
“/span>
9
“/span>
尺寸-MD/span>
=//span>
“/span>
6
“/span>
尺寸lg/span>
=//span>
“/span>
4
“/span>
尺寸XL/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目1
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
=//span>
“/span>
9
“/span>
尺寸-MD/span>
=//span>
“/span>
6
“/span>
尺寸lg/span>
=//span>
“/span>
4
“/span>
尺寸XL/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目2
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
=//span>
“/span>
9
“/span>
尺寸-MD/span>
=//span>
“/span>
6
“/span>
尺寸lg/span>
=//span>
“/span>
4
“/span>
尺寸XL/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目3
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
=//span>
“/span>
9
“/span>
尺寸-MD/span>
=//span>
“/span>
6
“/span>
尺寸lg/span>
=//span>
“/span>
4
“/span>
尺寸XL/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目4
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
=//span>
“/span>
9
“/span>
尺寸-MD/span>
=//span>
“/span>
6
“/span>
尺寸lg/span>
=//span>
“/span>
4
“/span>
尺寸XL/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目5
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
上面的示例中发生了很多事情。这些是关键点://p>
这
离子电池/code>
从
尺寸/code>
添加了属性,其中大小的值是从可用列中取出的列数。可用列的默认编号为12。//p>
这
尺寸/code>
属性可以添加一个断点,
size- {断点}/code>
。此值设置了指定断点及以上的大小。//p>
有关使用网格自定义的更多信息,请参阅
网格/a>
文档。/p>
贮存/a>
大多数应用程序在某个时候需要在本地存储某些数据。无论是从XHR请求中存储一些JSON,还是保存验证令牌,都有许多不同的存储选项。最重要的是,如果该应用在本机环境中运行,则可以创建一个完整的SQLite数据库并将数据存储在此处。所有这些不同的存储机制都有自己的优势和缺点,但是离子开发人员不必为此担心。betway东盟体育app//p>
betway东盟体育app离子存储/a>
以前的/div>
基本面/span>
下一个/div>
网络视图/span>
betway东盟体育appIonic是从头开始构建的,以使开发变得轻松,无论您要构建哪个平台。betway东盟体育app离子应用程序是真正的跨平台:能够从单个代码库中作为Android,iOS,Electron和Progressive Web应用程序(PWA)运行。优化应用程序在这些平台上工作时,需要牢记一些要点。//p>
硬件API/a>
在本机应用程序中,通常是进行API调用以与设备进行通信,例如打开相机或访问地理位置。由于没有本地桥梁,因此在网络环境中调用时,这些API呼叫将无效。离子有几种方法可以处理这一点。betway东盟体育app//p>
betway东盟体育app离子本地/a>
betway东盟体育app离子本地/a>
有自己的内部逻辑来检测它是否在本地环境内部。如果它不是本机环境,并且没有可用的Cordova插件,则它将打印警告,而不是丢下运行时错误。该应用不会破坏,尽管没有本地功能,但它将继续工作。//p>
在应用程序的逻辑中,只要需要进行本机API调用,建议您始终首先检查本机环境的状态。例如://p>
当针对访问本机API的目标环境不确定时,这一点代码可能会非常有用。/p>
人们使用的许多本机API(例如,文件API)在浏览器中不可用。API总是在改善并赶上本地,因此建议对其进行研究。考虑到前两点,很容易创建一个不错的体验,以适应该应用程序正在运行的平台。//p>
计划将应用程序部署到桌面时,要么使用
电子/a>
或作为一个
渐进的网络应用程序/strong>
,重要的是要确保应用程序在较大的设备上平稳工作。/p>
许多人很少注意到应用程序的布局,但是它可能会对经验和可用性产生巨大影响。考虑这种常见的UI模式://p>
这将渲染5个项目,每个项目宽度为100%。如下所示,这在移动设备上看起来可能很棒,但是在桌面浏览器上查看此内容是另一回事。由于宽屏幕宽度,这些物品变得延伸以填充整个屏幕,而屏幕空间未使用。//p>
为了改善这种体验,我们可以将这些物品包裹在
通过将项目包裹在
我们可以通过添加
可以进一步定制网格,以更改列的大小,并添加
上面的示例中发生了很多事情。这些是关键点://p>
这
这
有关使用网格自定义的更多信息,请参阅
大多数应用程序在某个时候需要在本地存储某些数据。无论是从XHR请求中存储一些JSON,还是保存验证令牌,都有许多不同的存储选项。最重要的是,如果该应用在本机环境中运行,则可以创建一个完整的SQLite数据库并将数据存储在此处。所有这些不同的存储机制都有自己的优势和缺点,但是离子开发人员不必为此担心。betway东盟体育app//p>
平台检测/a>
这个/span>
。/span>
平台
。/span>
准备好/span>
((/span>
)/span>
。/span>
然后/span>
((/span>
((/span>
)/span>
=>/span>
{//span>
//“混合”都检测到Cordova和电容器/span>
如果/span>
((/span>
这个/span>
。/span>
平台
。/span>
是/span>
((/span>
'杂交种'/span>
)/span>
)/span>
{//span>
//拨打本机API电话/span>
}//span>
别的/span>
{//span>
//浏览器API的后备/span>
}//span>
}//span>
)/span>
;/span>
浏览器后备/a>
桌面/a>
布局/a>
<//span>
离子含量/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目1
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目2
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目3
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目4
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目5
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子含量/span>
>//span>
<//span>
离子网格/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目1
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目2
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目3
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目4
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目5
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
离子网格/code>
元素,将离子网格系统添加到betway东盟体育app我们的布局中。将每个项目包裹在列中,使该项目沿同一行沿网格内部相等的宽度。//p>
固定的/code>
属性
离子电池/code>
特性。/p>
<//span>
离子网格/span>
固定的/span>
>//span>
<//span>
离子行/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
=//span>
“/span>
9
“/span>
尺寸-MD/span>
=//span>
“/span>
6
“/span>
尺寸lg/span>
=//span>
“/span>
4
“/span>
尺寸XL/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目1
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
=//span>
“/span>
9
“/span>
尺寸-MD/span>
=//span>
“/span>
6
“/span>
尺寸lg/span>
=//span>
“/span>
4
“/span>
尺寸XL/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目2
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
=//span>
“/span>
9
“/span>
尺寸-MD/span>
=//span>
“/span>
6
“/span>
尺寸lg/span>
=//span>
“/span>
4
“/span>
尺寸XL/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目3
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
=//span>
“/span>
9
“/span>
尺寸-MD/span>
=//span>
“/span>
6
“/span>
尺寸lg/span>
=//span>
“/span>
4
“/span>
尺寸XL/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目4
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
<//span>
离子电池/span>
尺寸/span>
=//span>
“/span>
12
“/span>
大小SM/span>
=//span>
“/span>
9
“/span>
尺寸-MD/span>
=//span>
“/span>
6
“/span>
尺寸lg/span>
=//span>
“/span>
4
“/span>
尺寸XL/span>
=//span>
“/span>
3
“/span>
>//span>
<//span>
离子项目/span>
>//span>
<//span>
离子标签/span>
>//span>
项目5
//span>
离子标签/span>
>//span>
//span>
离子项目/span>
>//span>
//span>
离子电池/span>
>//span>
//span>
离子行/span>
>//span>
//span>
离子网格/span>
>//span>
离子电池/code>
从
尺寸/code>
添加了属性,其中大小的值是从可用列中取出的列数。可用列的默认编号为12。//p>
尺寸/code>
属性可以添加一个断点,
size- {断点}/code>
。此值设置了指定断点及以上的大小。//p>
贮存/a>
betway东盟体育app离子存储/a>