หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ส่วนประกอบของบุคคลที่สาม
ดาวน์โหลด

CMUI

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

CMUI เป็นเฟรมเวิร์ก UI ที่เชี่ยวชาญในหน้าเว็บมือถือ มันมีส่วนประกอบที่หลากหลายและอินเทอร์เฟซที่กระชับและมีให้บริการนอกกรอบ CMUI ช่วยให้นักพัฒนากำจัดรายละเอียดสไตล์และปัญหาความเข้ากันได้ทำให้พลังงานมากขึ้นในการลงทุนในการพัฒนาธุรกิจ

ความเข้ากันได้

การสนับสนุนเบราว์เซอร์

  • เบราว์เซอร์กระแสหลักที่รองรับแพลตฟอร์มมือถือต่อไปนี้:

    • iOS 10+
    • Android 4.4+

  • รองรับเบราว์เซอร์เดสก์ท็อปต่อไปนี้ด้วย:

    • Firefox (ล่าสุด)
    • Chrome (ล่าสุด)
    • Safari (ล่าสุด)

(ดูนโยบายการสนับสนุนลำดับชั้นของเบราว์เซอร์ของ CMUI สำหรับรายละเอียดเพิ่มเติม)

การพึ่งพาภายนอก

  • ขีดเส้นใต้ 1.8+
  • Zepto 1.1+
  • กล่องเกียร์ 0.7+

การติดตั้งและการใช้งาน

วิธีดั้งเดิม

  1. ติดตั้งผ่าน NPM 3: 

    $ npm install cmui

  2. โหลดไฟล์สไตล์ CMUI ไฟล์สคริปต์และการพึ่งพาที่จำเป็นในหน้า: 

     <!DOCTYPE html >
< html >
< head >
	...
	< link rel =" stylesheet " href =" node_modules/cmui/dist/cmui.css " >
</ head >
< body >
	...
	< script src =" node_modules/underscore/underscore-min.js " > </ script >
	< script src =" node_modules/zepto.js/dist/zepto.min.js " > </ script >
	< script src =" node_modules/cmui-gearbox/dist/gearbox.min.js " > </ script >
	< script src =" node_modules/cmui/dist/cmui.js " > </ script >
</ body >
</ html >

กำลังโหลดผ่านสไตลัส

หากโครงการของคุณใช้สไตลัสเป็นภาษา preprocessor CSS คุณสามารถแนะนำไฟล์รายการสไตล์ CMUI โดยตรงในซอร์สโค้ดของคุณ: 

 @import './node_modules/cmui/src/css/theme/baixing/index'

ด้วยวิธีนี้คุณสามารถใช้ API ระดับสูงที่จัดทำโดย CMUI ในซอร์สโค้ด:

  • ตัวแปร
  • มิกซ์

การสาธิตและเอกสาร

ขอแนะนำให้ใช้อุปกรณ์ iOS/Android เพื่อเข้าถึง: Demo CMUI

CMUI-DEMO

ใครใช้มัน?

เว็บไซต์ต่อไปนี้ถูกสร้างขึ้นบน CMUI (กรุณาเยี่ยมชมโดยใช้อุปกรณ์ iOS/Android):

  • baixing.com - เวอร์ชันมือถือ (m.baixing.com)
  • youe.com - เวอร์ชันมือถือ (m.uemall.com) (ออฟไลน์)
  • Weizi อย่างเป็นทางการ Electronic Mall - รุ่นมือถือ (m.vichy.com.cn) (แก้ไขแล้ว)

มีส่วนร่วมในการพัฒนา

โมดูลการทำงาน

โมดูลบางอย่างของ CMUI ได้ถูกแยกออกและกลายเป็นโครงการอิสระ โมดูลเหล่านี้ได้รับการแนะนำในลักษณะการพึ่งพาการพัฒนาและบรรจุลงในไฟล์รุ่น ดังนั้นการเข้าร่วมในการพัฒนาโครงการอิสระเหล่านี้สามารถแก้ไขโมดูลเหล่านี้ได้

  • CSS รีเซ็ต - ศูนย์
  • ห้องสมุดสไตลัส - แปรง

สร้าง

  1. ส้อมและโคลนรหัสของโครงการนี้ไปยังพื้นที่ท้องถิ่น
  2. ดำเนินการ npm install ในไดเรกทอรีรูทโครงการเพื่อติดตั้งการพึ่งพาที่จำเป็น
  3. เรียกใช้ npm run dist ในไดเรกทอรีรูทของโครงการและเรียกใช้สคริปต์บิลด์
  4. ไฟล์รุ่นที่สร้างขึ้นจะถูกเก็บไว้ในไดเรกทอรี /dist

การทดสอบหน่วย

  1. ส้อมและโคลนรหัสของโครงการนี้ไปยังพื้นที่ท้องถิ่น
  2. ดำเนินการ npm install ในไดเรกทอรีรูทโครงการเพื่อติดตั้งการพึ่งพาที่จำเป็น
  3. เปิดไฟล์ต่อไปนี้ในเบราว์เซอร์ของคุณเพื่อเรียกใช้การทดสอบหน่วย:
    • test/test-dev.html - ซอร์สโค้ดทดสอบ (สำหรับการทดสอบในขั้นตอนการพัฒนา)

ขอบคุณ

CMUI ขึ้นอยู่กับโครงการโอเพนซอร์สเหล่านี้:

  • Normalize.css

ทีม CMUI กำลังใช้ Jetbrains IDE (WebStorm) พร้อมใบอนุญาตโอเพ่นซอร์ส:

  • โลโก้ Webstorm

ใบอนุญาต

ใบอนุญาต MIT

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด