Hippy
2024-11-08, Version 3.3.2 (LTS)
หน้าแรก
Hippy เป็นเฟรมเวิร์กการพัฒนาข้ามแพลตฟอร์มที่มีจุดมุ่งหมายเพื่อช่วยให้นักพัฒนาเขียนเพียงครั้งเดียวและทำงานบนหลายแพลตฟอร์ม (iOS, Android, เว็บและอื่น ๆ ) Hippy ค่อนข้างเป็นมิตรกับนักพัฒนาเว็บ โดยเฉพาะผู้ที่คุ้นเคยกับ React หรือ Vue ด้วย Hippy นักพัฒนาสามารถสร้างแอปข้ามแพลตฟอร์มได้อย่างง่ายดาย
ขณะนี้ Hippy ได้ถูกนำไปใช้ในแอปหลักๆ ของ Tencent เช่น Mobile QQ, Mobile QQ Browser, Tencent Video App, QQ Music App และ Tencent News ซึ่งเข้าถึงผู้ใช้ทั่วไปหลายร้อยล้านคน
React และ Vueตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง git และ npm ในเครื่องแล้ว
เรียกใช้ git clone https://github.com/Tencent/Hippy.git และ npm install ที่ไดเรกทอรีรากของโครงการ
พื้นที่เก็บข้อมูล Hippy ใช้ git-lfs ในการจัดการไฟล์ so,gz,otf ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง git-lfs ก่อน
สำหรับนักพัฒนา macOS:
แนะนำให้ homebrew เพื่อติดตั้งการอ้างอิง
สำหรับนักพัฒนา Windows:
Windows ยังไม่สามารถรันสภาพแวดล้อมการพัฒนา iOS ได้จนถึงตอนนี้
สำหรับ iOS เราแนะนำให้ใช้โปรแกรมจำลอง iOS เมื่อลองครั้งแรก อย่างไรก็ตาม คุณสามารถเปลี่ยนการกำหนดค่า Xcode เพื่อติดตั้งแอปลงใน iPhone ได้ หากคุณเป็นผู้เชี่ยวชาญ iOS
cd ไปยัง driver/js/ .
เรียกใช้ npm run init
คำสั่งนี้รวมกับ
npm install && npx lerna bootstrap && npm run build
npm install: ติดตั้งการพึ่งพาสคริปต์การสร้างโครงการ
npx lerna bootstrap: ติดตั้งการขึ้นต่อกันของแพ็คเกจ npm แต่ละแพ็คเกจ (Hippy ใช้ Lerna เพื่อจัดการแพ็คเกจ multi js หากไม่พบคำสั่งlernaให้ดำเนินการnpm install lerna -gก่อน)
npm run build: สร้างแพ็คเกจ sdk ส่วนหน้าแต่ละแพ็คเกจ
เลือกการสาธิตที่จะสร้างด้วย npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]
ติดตั้ง CocoaPods ด้วย brew install cocoapods ติดตั้ง cmake ด้วย brew install cmake จากนั้นรันคำสั่ง pod install ที่ไดเร็กทอรี framework/examples/ios-demo ซึ่งจะสร้างไฟล์ HippyDemo.xcworkspace และติดตั้ง Cocoapods dependencies
เริ่ม Xcode และสร้างแอป iOS ด้วยการเปิด framework/examples/ios-demo/HippyDemo.xcworkspace
หากเกิดข้อผิดพลาด
Step 2คุณcdไปที่driver/js/exampleshippy-react-demo หรือ hippy-vue-demo และรันnpm installเพื่อติดตั้งการพึ่งพาการสาธิตก่อนรายละเอียดเพิ่มเติมสำหรับการผสานรวม iOS SDK
สำหรับ Android เราขอแนะนำให้ใช้โทรศัพท์มือถือจริงเพื่อการพัฒนาประสบการณ์ที่ดียิ่งขึ้น เนื่องจาก Hippy ใช้เอนจิ้น X5 JS ซึ่งไม่สามารถรองรับตัวจำลอง x86 ได้ เช่นเดียวกับตัวจำลอง ARM ก็มีประสิทธิภาพต่ำ
ก่อนที่จะสร้างแอป Android โปรดตรวจสอบให้แน่ใจว่าได้ติดตั้ง SDK และ NDK แล้ว และ อย่า อัปเดต toolchain ของ build
cd ไปยัง driver/js/ .
เรียกใช้ npm run init
คำสั่งนี้รวมกับ
npm install && npx lerna bootstrap && npm run build
npm install: ติดตั้งการพึ่งพาสคริปต์การสร้างโครงการ
npx lerna bootstrap: ติดตั้งการขึ้นต่อกันของแพ็คเกจ npm แต่ละแพ็คเกจ (Hippy ใช้ Lerna เพื่อจัดการแพ็คเกจ multi js หากไม่พบคำสั่งlernaให้ดำเนินการnpm install lerna -gก่อน)
npm run build: สร้างแพ็คเกจ sdk ส่วนหน้าแต่ละแพ็คเกจ
เลือกการสาธิตที่จะสร้างด้วย npm run buildexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]
เปิด Hippy Project ที่ไดเรกทอรีรากด้วย Android Studio
เชื่อมต่อโทรศัพท์ Android ด้วยสาย USB และตรวจสอบให้แน่ใจว่าเปิดใช้งานโหมดดีบัก USB แล้ว (เรียกใช้ adb devices บนเทอร์มินัลคอมพิวเตอร์เพื่อตรวจสอบสถานะการเชื่อมต่อโทรศัพท์มือถือ)
เปิดโปรเจ็กต์ด้วย Android Studio รันและติดตั้ง apk
หาก
Step 2เกิดข้อผิดพลาด คุณสามารถcdไปที่driver/js/exampleshippy-react-demo, hippy-vue-demo หรือ hippy-vue-next-demo และรันnpm installเพื่อติดตั้งการพึ่งพาการสาธิตก่อนหากคุณพบปัญหา
No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-androidนี่คือวิธีแก้ปัญหารายละเอียดเพิ่มเติมสำหรับการผสานรวม Android SDK
cd ไปยัง driver/js/ .npm run init:example [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo]npm run debugexample [hippy-react-demo|hippy-vue-demo|hippy-vue-next-demo] devหรือคุณสามารถ
cdไปที่driver/js/examples/hippy-react-demo,driver/js/examples/hippy-vue-demoหรือไดเร็กทอรีdriver/js/examples/hippy-vue-next-demoเพื่อรันnpm run hippy:debugและnpm run hippy:devแทนในโหมดดีบักตัวอย่าง แพ็กเกจ npm เช่น @hippy/react, @hippy/vue, @hippy/vue-next เชื่อมโยงกับ
driver/js/packages>[different package]>dist(ไม่ใช่ node_modules) ดังนั้นหากคุณมีการเปลี่ยนแปลง ซอร์สโค้ดแพ็กเกจ js และต้องการให้มีผลในตัวอย่างเป้าหมาย โปรดเรียกnpm run buildอีกครั้งรายละเอียดเพิ่มเติมสำหรับการดีบักสามารถอ่านได้ในเอกสาร Hippy Debug
cd ไปที่ driver/js/examples/hippy-react-demo , driver/js/examples/hippy-vue-demo หรือ driver/js/examples/hippy-vue-next-demonpm install เพื่อติดตั้งการพึ่งพา js สาธิตnpm run hippy:vendor และ npm run hippy:build ตามลำดับเพื่อสร้าง product vendor.[android|ios].js และ index.[android|ios].jsการสาธิต Hippy ใช้ DllPlugin เพื่อแยกส่วนทั่วไปและส่วนแอป
หากต้องการดูตัวอย่างฮิปปี้และไปที่ hippyjs.org
การเปลี่ยนแปลงโดยละเอียดสำหรับเวอร์ชันวางจำหน่ายแต่ละเวอร์ชันได้รับการบันทึกไว้ในบันทึกประจำรุ่นของโปรเจ็กต์
Hippy
├── devtools # Devtools for Hippy.
├── dom # DOM Layer for Hippy.
├── driver # Different UI Driver Layers for Hippy.
│ └── js # JS Driver Layer for Hippy.
│ ├── examples # Related examples for JS Driver.
│ ├── include
│ ├── packages # Related JS Packages for JS Driver.
│ │ ├── hippy-react
│ │ ├── hippy-react-web
│ │ ├── hippy-vue
│ │ ├── hippy-vue-css-loader
│ │ ├── hippy-vue-loader
│ │ ├── hippy-vue-native-components
│ │ └── hippy-vue-router
│ └── src
├── framework
│ ├── android
│ ├── examples
│ │ ├── android-demo
│ │ └── ios-demo
│ └── ios
├── layout # Layout engine for Hippy.
├── modules
│ ├── android
│ └── footstone
├── renderer # Different Renderers for Hippy.
│ ├── flutter
│ └── native
│ ├── android
│ └── ios
└── static
นักพัฒนาสามารถมีส่วนร่วมในโอเพ่นซอร์สของ Tencent และเราจะมอบสิ่งจูงใจให้พวกเขารับทราบและขอบคุณพวกเขาด้วย ที่นี่เราจะให้คำอธิบายอย่างเป็นทางการเกี่ยวกับการสนับสนุนโอเพ่นซอร์สของ Tencent กฎการบริจาคเฉพาะสำหรับแต่ละโครงการได้รับการกำหนดโดยทีมงานโครงการ นักพัฒนาสามารถเลือกโครงการที่เหมาะสมและเข้าร่วมได้ตามกฎที่เกี่ยวข้อง คณะกรรมการบริหารโครงการของ Tencent จะรายงานต่อผู้มีส่วนร่วมที่มีคุณสมบัติเป็นประจำ และจะมีการออกรางวัลโดยผู้ติดต่ออย่างเป็นทางการ ก่อนที่จะส่งคำขอดึงหรือออกประเด็นให้ Hippy โปรดอ่านคู่มือการมีส่วนร่วมก่อน
สามารถดูผู้คนทุกคนที่สนับสนุน Hippy แล้วได้ในไฟล์ผู้ร่วมให้ข้อมูลและผู้แต่ง
Hippy ได้รับอนุญาตจาก Apache-2.0
ระบบนิเวศฮิปปี้
เครื่องยนต์เค้าโครง Taitank
