nativescript ionic template
1.0.0
تطبيقات الأجهزة المحمولة الأصلية مع NativeScript و Web Apps (Mobile First) مع أنماط ومكونات أيونية تشارك نفس الرمز مع Angular!
يستخدم هذا القالب التنقل الافتراضي لـ Angular ، لا ينصح بالتنقل في Ionic 3 لتطوير مواقع الويب ، وبالتالي لا ينصح باستخدام المكونات الأيونية التي تتطلب التنقل الأيوني. ومع ذلك ، في هذا القالب ، يمكنك العثور على مثال على كيفية استخدام مكونات مثل القائمة الجانبية دون الاعتماد على التنقل.
باستخدام هذا القالب ، يمكنك إنشاء تطبيق ويب (Mobile First) باستخدام مكونات Ionic 3 وتطبيقًا محليًا للأجهزة المحمولة باستخدام NativeScript بنفس الرمز ، Yay! ؟
لمزيد من التفاصيل ، يمكنك التحقق من مقالة فريق NativeScript الممتاز حول مشاركة الكود بين الويب والجوال مع Angular و NativeScript : https://www.nativecript.org/blog/code-haring-between-web-and-mobile-with-angular-and-and-and-hovers
تحقق من الفيديو الممتاز لـ Sebastian Witalec حول مشاركة التعليمات البرمجية بين الويب والتطبيقات الأصلية
npm install (It's required to create the symlinks at the first time before to execute the app)
ng serve
cd nativescript
npm install
npm run livesync (Required to detect changes and reload the app from the simulator/device)
npm run ios (using other terminal)
عرض الأوامر المتاحة هنا: أوامر البذور
| يأمر | فعل |
|---|---|
npm install -g @angular/cli | تثبيت الزاوي. تذكر رؤية الوثائق هنا |
ng g module [name] | توليد وحدة جديدة. الموصى به لإنشاء أقسام من التطبيق الخاص بك والتي ستحمل المكونات مع التحميل كسول. |
ng g component [name] | إنشاء مكون جديد في الدليل الحالي. تذكر إضافة moduleId خاصية moduleId: module.id في كل مكون |
ng g service [name] | توليد خدمة جديدة. يوصى app/providers/ المسار للخدمات المشتركة بين العديد من المكونات. |
يتطلب NativeScript Unicode من الرمز ، يمكنك العثور على Unicode باسم الرمز من محتوى ملف src/fonts/ionicons.svg ثم يمكنك استخدامه لاحقًا من <Label> أو <Button> ، مثال:
// name: ion-ios-contact, unicode: 
<Button class="ion-icon" fontSize="25" text=""></Button>
قوالب الهاتف والكمبيوتر اللوحي بشكل فردي. تم دعم الامتدادات التالية:
| امتداد | منصة |
|---|---|
.{html/scss} | منصة الويب. يستخدم من الهاتف المحمول عندما لا يكون هناك امتداد .TNS |
.tns.{html/scss} | فقط للجوال |
.tns.ios.{html/scss} | فقط لنظام التشغيل iOS |
.tns.android.{html/scss} | فقط لنظام Android |
.tns.ios.phone.{html/scss} | فقط لهاتف iOS |
.tns.android.phone.{html/scss} | فقط لهاتف Android |
| بناء الجملة | معنى | النتيجة المتوقعة |
|---|---|---|
{{ title }}{{ getTitle() }} | تقديم قيمة ديناميكيًا ، سيتم تقييم هذا التعبير في وقت التشغيل. | |
[src]="imageUrl" | ملزمة الخاصية: ربط خاصية لعنصر DOM بحقل المكون. | |
[attr.colspan]="colSpan" | السمة الربط | |
[class.selected]="user.selected" | الربط الفئة : إضافة فئة ديناميكية. | |
[style.color]="isActive? 'green': 'red'" | ملزمة النمط | |
(tap)="onSave($event)" | الحدث ملزمة | |
(keyup.enter)="onEnter()" | تصفية الحدث | |
#email (keyup.enter)="onEnter(email.value) | متغيرات القالب | |
[(ngModel)]="user.email" | ربط في اتجاهين . استيراد Formmodule مطلوب. | |
{{ price | currency:'AUD' }} | الأنابيب: تنسيق البيانات. | |
@Input('input-property') myData;<example [input-property]="data"> | خصائص الإدخال: بيانات الإدخال للمكون. | |
@Output('output-property') change= new EventEmitter();this.change.emit({msg: 'Hi!'});<example (output-property)="onChange($event)"> | خصائص الإخراج: رفع الأحداث من المكون. | onChange ({msg}) { console.log (msg) } |
| شون بيركنز | خوان نيكولز |
أنا أؤمن بحيدات؟ دعمني ، إذا قمت بذلك أيضًا.
مصنوعة مع ❤
