Sencha Touch - สร้าง

ความต้องการเว็บแอปพลิเคชันในปัจจุบันคือการพัฒนาแอปพลิเคชันที่รวดเร็วโดยใช้ความพยายามในการพัฒนาน้อยลง Sencha Touch ช่วยในการดำเนินการดังกล่าวได้อย่างง่ายดายเนื่องจากมีไลบรารีบิวด์จำนวนมากให้เลือกตามการพัฒนาหรือโค้ดการผลิตพร้อมกับสิ่งอำนวยความสะดวกในการสร้างบิลด์ที่กำหนดเอง

ไลบรารีการสร้าง Sencha Touch โหลดคลาสแบบไดนามิก การโหลดแบบไดนามิกหมายถึงคลาสที่โหลดเมื่อจำเป็นและจะรวมเฉพาะคลาสเหล่านั้นซึ่งจำเป็นในแอปพลิเคชัน สิ่งนี้ทำให้แอปพลิเคชันทำงานได้เร็วขึ้นเนื่องจากจำนวนไฟล์ที่ต้องโหลดลดลงและลดเวลาในการโหลดไปพร้อม ๆ กัน

Sencha Touch 2.x มีไลบรารีบิวด์ห้าไลบรารีต่อไปนี้

ซีเนียร์ การสร้างและการใช้งาน
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 มีสิ่งอำนวยความสะดวกในการสร้างงานสร้างแบบกำหนดเอง

ข้อดีของการสร้าง Custom Build

การสร้างแบบกำหนดเองไม่ได้โหลดไฟล์สัมผัสทั้งหมด มันโหลดเฉพาะไฟล์ที่เราใช้ในแอปพลิเคชันซึ่งทำให้แอปพลิเคชันเร็วขึ้นและดูแลรักษาได้ง่าย

Sencha CMD ใช้เพื่อสร้างงานสร้างแบบกำหนดเอง ในการสร้างบิลด์แบบกำหนดเองใน Sencha CMD ให้ไปที่ไดเร็กทอรีที่มีไฟล์แอพอยู่และพิมพ์คำสั่งต่อไปนี้เพื่อสร้างบิลด์

ซีเนียร์ คำสั่งและการใช้งาน
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-class.js ซึ่งเราจำเป็นต้องรวมไว้ใน index.html ของเราเพื่อให้พร้อมใช้งานจริง

รหัสต่อไปนี้แสดงการเปลี่ยนแปลงที่ต้องทำสำหรับรหัสที่พร้อมใช้งานจริง

Index.html before building application

<!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-debug.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
   </head>
   <body>
   </body>
</html>

Index.html after building the application

<!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.js"></script>
      <script type = "text/javascript" src = "app.js"> </script>
      <script type = "text/javascript" src = "app-classes.js"> </script>
   </head>
   <body>
   </body>
</html>