Sencha Touch - 构建

今天对Web应用程序的需求是开发一个快速的应用程序,减少开发工作. Sencha Touch可以轻松实现这一目标,因为它提供了许多构建库供您选择,基于开发或生产代码以及创建自定义构建的工具.

Sencha Touch构建库动态加载类.动态加载代表在需要时加载的类,并且只包含应用程序中所需的那些类.这使得应用程序运行得更快,因为要加载的文件数量减少,同时减少了加载时间.

Sencha Touch 2.x提供了以下五个构建库.

Sr.No.构建&用法
1

sencha-touchdebug.js

在本地开发应用程序时使用此构建.它是一个带有所有注释和调试日志的非通化版本,可以在开发时轻松调试.

2

senchatouch.js

此文件为用于生产目的.当我们有自定义构建时,它是缩小版.

3

sencha-touchall.js

此文件用于生产目的.当我们没有自定义构建时,它是缩小版.

4

sencha-touchall-debug.js

此文件为用于生产中的调试.它没有缩小,并且包含所有注释和调试日志.

5

sencha-touchall-compat.js

使用此版本将版本1.x迁移到版本2.x.它在版本1.x代码不兼容且需要修改代码的地方发出警告.

通过上述构建,Sencha Touch提供了创建自定义构建的工具.

进行自定义构建的优势

自定义构建确实如此不加载所有的触摸文件.它只加载我们在应用程序中使用的那些文件,这使得应用程序更快速,更容易维护.

Sencha CMD用于创建自定义构建.要在Sencha CMD中创建自定义构建,请转到app文件所在的目录,然后键入以下命令之一来创建构建.

Sr.No.Command&用法
1

sencha app build native

构建应用程序并准备一个名为packager.temp.json的文件,您可以使用该文件打包应用程序 -  packager.temp .json与packager.json相同,但包含其他路径.

2

sencha app build -run native

构建并自动生成打包应用程序,并启动相应的模拟器.

3

sencha app build package

使用打包支持构建应用程序,但不支持配置打包程序JSON文件.这对于手动维护多个packager.json文件的项目很有用.

一次构建成功,它将生成all-classes.js文件,我们需要将它们包含在index.html中以使其生产就绪.

以下代码显示要完成的更改生成就绪代码.

建立申请前的Index.html

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://img01.yuandaxia.cn/Content/img/tutorials/sencha_touch/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch-debug.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
   </head>
   <body>
   </body>
</html>

构建应用程序后的Index.html

<!DOCTYPE html>
<html>
   <head>
      <link href = "https://img01.yuandaxia.cn/Content/img/tutorials/sencha_touch/sencha-touch.css" rel = "stylesheet" />
      <script type = "text/javascript" src = "https://cdn.sencha.com/touch/sencha-touch-2.4.2/sencha-touch.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
      <script type = "text/javascript" src = "app-classes.js"> </script>
   </head>
   <body>
   </body>
</html>