nativescript ionic template
1.0.0
แอพมือถือดั้งเดิม ที่มี NativeScript และ เว็บแอพ (มือถืออันดับแรก) พร้อมรูปแบบไอออนิกและส่วนประกอบที่แชร์รหัสเดียวกันกับ Angular!
เทมเพลตนี้ใช้การนำทางเริ่มต้นของ Angular การนำทางของ Ionic 3 ไม่แนะนำให้พัฒนาเว็บไซต์ดังนั้นจึงไม่แนะนำให้ใช้ส่วนประกอบไอออนิกที่ต้องใช้การนำทางไอออนิก อย่างไรก็ตามในเทมเพลตนี้คุณสามารถค้นหาตัวอย่างของวิธีการใช้ส่วนประกอบเช่นเมนูด้านข้างโดยไม่ขึ้นอยู่กับการนำทาง
การใช้เทมเพลตนี้คุณสามารถสร้าง เว็บแอป (มือถือก่อน) โดยใช้ส่วนประกอบ Ionic 3 และ แอพมือถือดั้งเดิม โดยใช้ NativeScript ด้วย รหัสเดียวกัน ใช่! -
สำหรับรายละเอียดเพิ่มเติมคุณสามารถตรวจสอบบทความทีม NativeScript ที่ยอดเยี่ยมเกี่ยวกับ การแบ่งปันรหัสระหว่างเว็บและมือถือด้วย Angular และ Nativescript : https://www.nativescript.org/blog/code-sharing-between-web และ mobile-with-angular-and-nativescript
ตรวจสอบวิดีโอที่ยอดเยี่ยมของ 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 | ติดตั้ง Angular-cli จำไว้ว่าดูเอกสารที่นี่ |
ng g module [name] | สร้างโมดูลใหม่ แนะนำให้สร้างส่วนของแอปของคุณที่จะโหลดส่วนประกอบด้วยการโหลดขี้เกียจ |
ng g component [name] | สร้างองค์ประกอบใหม่ในไดเรกทอรีปัจจุบัน โปรดจำไว้ว่าเพิ่ม ModuleId Property 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" | การผูกสองทาง จำเป็นต้องใช้ แบบฟอร์ม นำเข้า | |
{{ 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) - |
| ฌอนเพอร์กินส์ | Juan Nicholls |
ฉันเชื่อในยูนิคอร์น? สนับสนุนฉันถ้าคุณทำเช่นกัน
ทำด้วย❤
