使用ionic开发移动app的过程中经验总结
来源:互联网 发布:中建六局 知乎 编辑:程序博客网 时间:2024/06/05 19:57
最近在使用ionic开发几个移动端的模块,使用过程中积累一些经验,在此总结下,以供参考。后续开发过程中如果有其他问题,会随时补充。
这些问题经过归纳总结分为以下几大类:
- html
- angularJs
- ionic
- android
html类问题
- 在ios系统上,有些链接会被当作电话号码来处理,默认显示成蓝色可点击样式,添加以下meta可以解决此问题:
<meta name="format-detection" content="telephone=no"/>
angularjs类问题
- 传递参数
ionic的路由模块使用了angularjs的第三方模块ui-router,路由跳转传递参数的形式 如果参数只是一个id,使用以下代码传参:
ui-sref="stateName({id:id})"
config配置如下:
.state("stateName",{ url:"/xxx/:id" })
如果传递的是复杂参数,比如传递一个JSON对象:
ui-sref="stateName({obj:obj})"
config配置如下:
.state("stateName",
{
url:"/xxx",
params:{
obj:null
}
})
缓存
默认ui-router对同一个url是做了缓存的,也可以不做缓存:.state("stateName",{ url:"/xxx", cache:false })
根据RestURI的思想设计路由,对于不同的对象尽量使用URL来区分,不要通过参数来区分 比如查看user对象的详情,传统的URL设计可能是这样:
/detail?id=1
使用REST-URI来设计就是这样:
/detail/1
- 启动
一般情况下我们使用以下指令来启动angularjs
<body ng-app='app'>
但是有时候我们要控制下angularjs的启动时机,比如判断用户是否已经登陆,这时候就要通过编码来控制angualrjs的启动:
angular.bootstrap(document,['app'])
IONIC类的问题
- 支持键盘事件(弹出软键盘不遮挡界面),配置代码如下:
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() { if (window.cordova &&
window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true); } }); })
另外在nav-footer指令内包含有输入框的时候,需要添加以下属性:
keyboard-attach
- 使ion-content支持滚动效果:
$ionicConfigProvider.scrolling.jsScrolling(true);
- 在ion-view指令内可以重定义导航栏的左侧按钮和右侧按钮
- 动画效果的添加
如果通过ui-sref跳转,需要在ion-view指令上添加
nav-direction="forward/back"
forward和back分别表示前进的动画和返回的动画,如果是在代码中使用$state.go跳转的话,需要在跳转代码后添加动画代码:
$ionicViewSwitcher.nextDirection("back");//forward
android问题
- 如果在android上要支持键盘事件,android的布局fullScreen要设置为false
第一次使用markdown写文档,有些生疏,不过markdown确实很强大,非常适合程序员来写文档,以后写博客都会用它了。
现在正在看Ionic框架js和android的源码实现,后续有时间了,会把分析过程和结果分享给大家。
- 使用ionic开发移动app的过程中经验总结
- ionic开发移动app过程中地址选择部分涉及省市县三级联动
- 移动APP开发过程
- 使用ionic开发手机app中,设置tab中的icon为自定义图标的方法
- ios 开发app的经验总结
- 使用ionic中ion-slide-box实现移动app轮播特效
- web App 移动开发之ionic开发环境部署
- 移动APP开发过程[思索]
- ionic+angularJs的App启动过程
- ionic—基于web的移动端app开发框架(CSS篇1)
- [HTML5之APP实战]基于ionic开发的一款KTV移动应用
- 在一个cordova/Phonegap开发的移动端web应用中使用ionic和Angular.js技术进行身份验证
- 使用ionic+angular+phonegap开发APP入门
- 使用ionic+angular+phonegap开发APP入门
- 使用ionic+angular+phonegap开发APP入门
- Hybird HTML5 App(移动应用开发)之:了解Ionic框架
- ionic react-native和native开发移动app
- 基于ionic2 的移动app开发过程《1》
- Swift - 文本框textView图文混排的实现(附样例)
- 《程序员的思维修炼》读书笔记以及感悟
- javascript DOM操作
- git 命令
- 你真的理解android事件分发机制了吗
- 使用ionic开发移动app的过程中经验总结
- Phoenix默认jvm配置
- func_get_args的使用
- libc++abi.dylib`__cxa_throw: 使用[AVAudioPlayer play]会产生__cxa_throw异常
- iOS开发 适配iOS10以及Xcode8
- cordova创建第一个iOS程序实例
- 自定义scrollView实现顶部图片下拉放大
- java 字节流和字符流的区别 转载
- CSS overflow 属性