ionic学习笔记
ionic学习笔记
目录权限问题,退出到上一个目录,执行 sudo chmod -R 777 目录名
快速生成页面或者模块 ionic g page 注意generator可简写为g
全局的样式定义好记得导入
组件的样式单独写组件样式文件
注意全局样式对组件样式的影响
showWhen=‘ios’ 决定在什么设备显示
定义公共baseUI实现代码复用 页面可继承自baseUI,可调用公司ui中的方法
ionViewDidEnter 调用些生命周期函数判断用户登录情况
注意modal和nav的使用场景和区别
a. modal是一个临时,过渡的弹窗
b. nav用于层级关系的页面展示
nav导航到子页面返回,应该使用this.navCtrl.pop()
资源文件(图片)注意清除浏览器缓存,可以图像后面加上时间戳 如new Date()
清除本地存储 this.storage.remove(‘UserId’)
定义modal弹出页面关闭后刷新父页面的方法(父页面函数的回调)
modal.onDisMiss( () => {
this.loadUserPage(); //函数回调 这样处理的原因是modal关闭后不会触发生命周期
// 的ionViewDidEnter()
})
ionic build 将src目录下的文件打包到已经添加的平台
app的图标和启动图放到项目后面去做
app的开发应该是迭代敏捷的,不要一下子就想做非常精美
chrome 控制台部分警告是需要在真机或者模拟器中模拟
ionic 生命周期ionViewDidLoad() 中做页面数据加载的绑定
页面刷新不成功,记得重新保存页面触发ionic重新build
有时候代码没生效,也可以重新启动 ionic serve
modal传参this.modalCtrl.create(AnswerPage,{“id”: this.id})
modal接收参数 this.id = navParams.get(‘id’);
html中定义链接到子页面的方法,元素加上属性[navPush]=“chatDetailsPage” [navParams]=“userInfo”
ionViewWillLeave() 生命周期函数可在些写取消订阅的操作 如this.event.unsubscribe(‘chat.received’)
如何在typescript中引入javascript的包 例 import * as moment from ‘moment’
pipe管道用来处理返回的数据 如时间戳的转换,类型1,2,3转换为对应值等 像一个管子一样,将你定义的方法流到所有你使用的地方去.例{{message.time | relativetime}}
loading.dismissAll() 有的时候view没有隐藏,可调用,切换页面快速的时候可以会出现
component如何传递参数, 通过@Input(‘datatype’) dataSourceType // datatype外部传递进来,dataSourceType 本地接收的参数命名
注意component没有生命周期的函数ionViewDidLoad,组件有自己的ngAfterContentInit方法,
ionic有官方组件和自定义的组件 ionic整个项目都是一个组件树,自定义组件时可参考官方组件(github上查找)进行开发
子页面返回父页面不停刷新的问题是因为 刷新方法写在了ionViewDidEnter,把刷新方法写在ionViewDidLoad就可,这样只在第一次加载的时候刷新
BehaviorSubject 通过这个对象做页面主题替换,此处定义一个settings provider
ion-toggle组件的事件是(ionChange)=‘toggleChange’
native 组件如qrscanner放在app.module.ts的provider集合中
注意二维码扫描的跳转,animate设为false可以保证相机在整个屏幕中显示,不然的话不会显示相机
gotoScanQRcode(){
this.navCtrl.push(ScanPage,null,{‘animate’: false})
}
报错cordova_not_available是因为在浏览器环境,不是在原生app环境
ionic cordova resources生成图标和启动图,第一次执行密码需要邮箱账号密码
config.xml 关于里面的的内容修改,如版本号,appName
ionic cordova build android 命令行打包生成apk文件;可以使用android studio打包比较方便（报错处理：ionic cordova platform rm android && ionic cordova platform add android@6.3.0）
生成ios步骤ionic cordova platform rm ios , ionic cordova platform add ios
打包ios命令 ionic cordova build ios 使用 ionic cordova build ios --prod --release 打包文件更小
ionic部署在浏览器或者微信中 ionic build 打包完成可以把platforms/brower/www 目录下内容部署到静态站点
启动真机模拟器调试 ionic cordova emulate ios -lc
查看模拟机 ionic cordova emulate ios --target --list
启动指定模拟机 ionic cordova emulate ios --target=‘iPhone-6’ -lc
