nativescript ionic template

nativescript离子模板{n}

带有Nativecript和Web应用程序（首先）的本机移动应用程序，具有离子样式和组件与Angular共享相同代码的组件！

该模板使用Angular的默认导航，不建议使用离子3的导航来开发网站，因此不建议使用需要离子导航的离子组件。但是，在此模板中，您可以找到一个如何使用诸如侧菜单之类的组件的示例，而无需依赖导航。

介绍

使用此模板，您可以使用带有具有相同代码的NativeScript的Ionic 3组件和一个移动本机应用程序创建Web应用程序（移动移动） ，是的！ ？

有关更多详细信息，您可以通过Angular和Nativecript查看有关Web和移动设备之间的代码共享的出色的Nativescript团队文章：https：//www.nativecript.org/blog/code-sharing-betnect--bet-web-and-web-and-web-and-mobile-with-with-with-angular-and-angular-and-nativescript

它如何工作？ ☕

查看有关网络和本机应用之间共享代码的塞巴斯蒂安·维塔莱克（Sebastian Witalec）的出色视频

运行项目⏯

• 离子Web应用程序（使用Angular-CLI） ：

  npm install (It's required to create the symlinks at the first time before to execute the app)
  ng serve

• NISTICERCRIPT移动应用程序：

  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属性moduleId: module.id
ng g service [name]	生成新服务。建议在几个组件之间共享服务app/providers/路径。

使用来自NativeScript端的离子图标？

NativeScript需要图标的Unicode ，您可以从src/fonts/ionicons.svg文件的内容中找到带有图标名称的Unicode，然后您可以从<Label>或<button>或<Button> ，示例：

 // name: ion-ios-contact, unicode: 
<Button class="ion-icon" fontSize="25" text="&#xf41a;"></Button>

每个平台的自定义模板？

单独定位电话和平板电脑模板。支持以下扩展名：

扩大	平台
.{html/scss}	Web平台。当没有.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"	双向绑定。需要进口FOMPOM模块。
{{ 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） }

资源⛩

• NISTICERCRIPT快速设置
• 本文撰稿
• 离子CSS公用事业
• NISTISTICN样式
• NativeScript布局容器
• 专业的UI组件
• 进步nativescript UI样品
• 很棒的本文
• 很棒{n}

贡献者？

肖恩·珀金斯	胡安·尼科尔斯

学分？

• 角度上的属性种子

支持？

我相信独角兽？如果您也这样做，请支持我。

愉快的编码？

用❤️制成