الصفحة الرئيسية
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 تشغيل بيئة تطوير 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 لإدارة حزم 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.
ابدأ تشغيل Xcode وقم بإنشاء تطبيق iOS من خلال فتح framework/examples/ios-demo/HippyDemo.xcworkspace
.
إذا حدث خطأ
Step 2
، فيمكنكcd
إلىdriver/js/examples
hippy-react-demo أو hippy-vue-demo، وتشغيلnpm install
لتثبيت التبعيات التجريبية أولاً.مزيد من التفاصيل حول تكامل iOS SDK.
بالنسبة لنظام Android، نوصي باستخدام الهاتف المحمول الحقيقي للحصول على تجربة تطوير أفضل، لأن Hippy يستخدم محرك X5 JS الذي لا يمكنه دعم محاكي x86، بالإضافة إلى أن أداء محاكي ARM منخفض.
قبل إنشاء تطبيق Android، يرجى التأكد من تثبيت SDK وNDK، وعدم تحديث سلسلة أدوات البناء.
cd
driver/js/
.
قم بتشغيل npm run init
.
يتم دمج هذا الأمر مع
npm install && npx lerna bootstrap && npm run build
.
npm install
: تثبيت تبعيات البرامج النصية الخاصة ببناء المشروع.
npx lerna bootstrap
: تثبيت تبعيات كل حزمة npm.(يستخدم Hippy Lerna لإدارة حزم 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/examples
hippy-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.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-demo
.npm install
لتثبيت تبعيات Demojs.npm run hippy:vendor
و npm run hippy:build
بالتسلسل لإنشاء 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.
الهبي النظام البيئي
محرك تخطيط تايتانك