Ionic
文章平均质量分 77
汪喆_Jack
本人热爱开发, 喜欢学习各种IT技术,了解新技术,希望和志同道合的伙伴切磋,相互交流!
展开
-
Ionic—发现模块开发
一.发现页面布局开发1.开发设计使用ion-refresher组件实现页面的下拉刷新完成发现页面的布局开发技巧开发时每次刷新都会重新到第一个页面,给tab中的html设置selectedIndex的属性值,从0开始<ion-tabs selectedIndex="1"> <ion-tab [root]="Home" tabTitle="首页" ta...原创 2018-12-20 21:13:32 · 165 阅读 · 0 评论 -
Ionic—聊天机器人模块开发
一.聊天模块页面列表设计与开发1.开发设计开发内容:开发聊天用户的列表布局与绑定ion-item上使用click事件不是太好,故直接navPush属性设置点击跳转到的组件,通过navParam属性设置点击跳转组件时传递的参数<ion-item [navPush]="ChatdetailsPage" [navParam]="userInfo.userId">创建聊...原创 2018-12-20 23:54:34 · 333 阅读 · 0 评论 -
Ionic—首页模块开发
一.搜索部分页面开发1.开发设计编写搜索栏编写搜索按钮2.开发代码home.html<ion-header> <ion-navbar> <ion-searchbar placeholder="Search:How to dressing?"></ion-searchbar> <ion-icon name=...原创 2018-12-15 22:23:18 · 316 阅读 · 0 评论 -
Ionic—聊天机器人模块开发
一.聊天模块页面列表设计与开发1.开发设计开发内容:开发聊天用户的列表布局与绑定ion-item上使用click事件不是太好,故直接navPush属性设置点击跳转到的组件,通过navParam属性设置点击跳转组件时传递的参数<ion-item [navPush]="ChatdetailsPage" [navParam]="userInfo.userId">创建聊...原创 2018-12-22 16:12:26 · 652 阅读 · 0 评论 -
Ionic—通知模块开发
一.通知模块页面布局开发1.实例代码<ion-header> <ion-navbar> <ion-title>通知</ion-title> </ion-navbar></ion-header><ion-content> <ion-list> &原创 2018-12-22 21:05:25 · 580 阅读 · 0 评论 -
Ionic—我的模块开发
一.个人中心我的页面布局开发1.开发设计布局个人页面的菜单使用color属性也可以给icon添加颜色,color中的值在theme中定义,可以直接给定颜色,如<ion-icon name="paper" item-start color="primary"></ion-icon>2.实例代码more.html<ion-header> &l...原创 2018-12-23 00:35:49 · 367 阅读 · 0 评论 -
Ionic—动态样式与夜间模式
一.夜间模式的布局实现1.开发设计夜间模式的切换其实就是css样式表的切换添加主题文件theme[theme.light.scss和theme.dark.scss]创建providers实现主题的切换ionic g provider settingsrxjs中的BehaviorSubject用于行为管理,可以用来切换主题,使用方式如下创建样式主题this.them...原创 2018-12-23 10:03:29 · 921 阅读 · 0 评论 -
Ionic—二维码扫描与关于模块的开发
一.二维码扫描功能布局开发1.开发设计功能需求:布局二维码扫描页面二维码扫描在Ionic Native中为QS Scanner插件,安装如下sudo ionic cordova plugin add cordova-plugin-qrscanner加载与底层交互的cordova插件sudo npm install --save @ionic-native/qr-scannerapp...原创 2018-12-23 14:37:14 · 586 阅读 · 0 评论 -
Ionic—问题列表模块开发
一.问题列表页面布局开发1.开发思路在home页面完成列表页面的布局开发home页面显示开启直播间用户的头像、用户名、房间标题、房间内容及房间相关参数信息2.实例代码home.html<ion-header> <ion-navbar> <ion-searchbar placeholder="Search:How to dressing?...原创 2018-12-20 20:22:17 · 237 阅读 · 0 评论 -
Ionic—个人信息组件开发
一.用户头像和个人信息布局开发1.开发功能开发用户头像功能2.实例代码more.html<ion-header> <ion-navbar> <ion-title>More</ion-title> </ion-navbar></ion-header><ion-content>原创 2018-12-09 16:54:53 · 517 阅读 · 0 评论 -
Ionic入门
Ionic可以针对不同设备进行自动适配一.Inoic框架介绍1.Inoic框架简介Ionic是一个混合开发的首选平台选择原因HTML5+CSS+JS适配于IOS,Android,Windows Phone,浏览器官网:ionicframework.com2.Ionic版本详细讲解与注意事项项目github地址:github.com/ionic-team/ionic...原创 2018-11-26 21:06:54 · 363 阅读 · 1 评论 -
Ionic项目开发环境初始化
一.使用Ionic CLI进行项目的初始化构建1.构建项目执行npm install -g cordova ionic安装cordova和ionic插件创建一个APPionic start 项目名 tabs其中tabs是图标形式(下方图标)ionic start 项目名 blank创建空APPionic start 项目名 sidemenu创建带有左侧menu的APP启动项目...原创 2018-11-27 21:03:48 · 638 阅读 · 3 评论 -
Ionic—APP基础布局开发
一.项目开发目标目标:开发一款论坛相关的APP二.tab组件布局以及图标选择page/tabs文件夹下有对应icon的设置图标选取的网站:ionicframework.com/docs/ionicons,将对应的icon名字拷贝过来放置成ion-tab标签中的tabIcon的值ion-tab标签属性tabTitle:Tab标题名tabIcon:Tab图标[root...原创 2018-11-27 22:30:41 · 487 阅读 · 0 评论 -
Ionic—注册组件开发
一.用户注册页面的开发与逻辑嵌入1.理解modal和nav使用的场景及区别modal是临时、过渡的一个弹窗nav用于层级关系的页面展示2.生成注册页面执行命令ionic g page register在app.modules.ts中注册3.添加跳转使用NavController实现页面跳转跳转代码this.navCtrl.push(跳转页面的Class)4.编写注册...原创 2018-12-09 02:15:59 · 348 阅读 · 0 评论 -
Ionic—图片上传组件开发
一.修改头像功能页面的整体结构讲解1.安装必要的组件使用原生的功能时将采用ionic native安装四个插件npm install --save @ionic-native/camera @ionic-native/file @ionic-native/file-path @ionic-native/transfer#camera用于相机#file用于访问本地相册#file...原创 2018-12-13 01:02:18 · 643 阅读 · 1 评论 -
Ionic—登录组件开发
一.开发用户未登录的页面app.component.*文件主要用于定义app全局的所有组件1.需求一:设置组件主题样式组件自身的样式定义在自己的scss文件中,希望全局生效的内容定义到全局的theme.scss文件中在theme文件下创建light.scss文件,用于设定白天模式的样式实例代码[important表示强制覆盖]ion-content { back...原创 2018-12-03 18:40:25 · 252 阅读 · 0 评论 -
Ionic3刷新页面服务器关闭问题
博主最近写ionic3项目,一刷新页面服务就中断了,查阅资料得到如下的解决方案Ionic使用ionic serve启动,当刷新页面时进程中断并抛出错误异常events.js:183 throw er; // Unhandled 'error' event ^Error: read ECONNRESET at _errnoException (util...原创 2018-12-09 11:36:08 · 330 阅读 · 1 评论 -
Ionic—问题列表模块开发
一.问题列表页面布局开发1.开发思路在home页面完成列表页面的布局开发home页面显示开启直播间用户的头像、用户名、房间标题、房间内容及房间相关参数信息2.实例代码home.html<ion-header> <ion-navbar> <ion-searchbar placeholder="Search:How to dressing?...原创 2018-12-19 00:35:52 · 212 阅读 · 0 评论