ionic使用的一些技巧
使用ionic总结:
1.全局禁用缓存的方法是: $ionicConfigProvider.views.maxCache(0);
2. 在不同的用户输入场景下,需要显示不同的键盘模式以方便用户输入,如在输入邮件时键盘则显示邮件模式等,文本,数子等。
<input type="number">
<input type="text">
<input type="emil">
在 Ionic 中需要安装键盘插件控制键盘模式的显示,安装后在$ionicPlatform.ready中调用即可。
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
$rootScope.connectionCheck();
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
3.设备网络状况的检查:
document.addEventListener("deviceready", function () {
// listen for Online event
$rootScope.$on('$cordovaNetwork:online', function (event, networkState) {
var onlineState = networkState;
console.log("device online...");
})
// listen for Offline event
$rootScope.$on('$cordovaNetwork:offline', function (event, networkState) {
var offlineState = networkState;
//提醒用户的网络异常
$ionicLoading.show({
template: '网络异常,不能连接到服务器!'
});
})
}, false);
4. 如果某个界面上不想要导航栏,可以简单地在最顶端的标签中添加hide-nav-bar="true"
5.ion-scroll 不滚动
《ion-scroll id="xx" delegate-handle="XX" direction="x" zooming="false" 》增加overflow-scroll="false" 即可。
ionic页面上右侧会出现滚动条,去掉的方法如下:
给ion-content上加overflow-scroll="true" 后再加上style="overflow:auto;"就好了
6.splash screen 在安卓上变形:
在部分1080P下,按cordova splash screen 的 screen-xhdpi-portrait.png(720*960) 设置的启动画面,会变形挤瘦,需要在config.xml 中加入
《preference name="SplashMaintainAspectRatio" value="true" /》不强制拉伸即可。
7. list 有延迟,可以在ion-content
处使用 overflow-scroll="true"试试!
8. ng-click在 i 标签上没有效果;
9. label标签内的事件会在整个label
内被触发;
10. 能用ng-if
就用ng-if
,ng-if
的效率比ng-show
和ng-hide
高;
11. 如果在ion-list
中的ion-item
中并不能触发ng-click
事件,可以在item中的元素上再套一层div;
12. 获取日期用$filter
,var postdate = $filter('date')(date, 'yyyy-MM-dd HH:mm:ss');
13. 在安卓上的体验比较差,动画有延迟?可以试用ionic集成的crosswalk ;
14. 在ionic中嵌入网页html文件:可使用ng-build-html,不过它会过滤原始html的标签,我们可以引入$sce
模块,用$sce.trustAsHtml()
方法信任我们获取的网页.
ng-bind-html="content" ;
$scope.content=$sce.trustAsHtml(data[0].Content);
15. 加载页面的时候会看到双括号:
angularjs
在使用双括号的时候,第一个加载的页面,也就是应用中的index.html
,其未被渲染好的模版可能会被用户看到。用ng-bind
就不会遇到这个问题。Angular
才有机会把它解释成你期望看到的内容。在大多数的模版中你依然可以使用双括号.但是对于ng-bind
。如 <h1 ng-bind="title"></h1>16. 更新了数据,让界面更新: 可以用广播,注意$broadcast 和 $emit的区别
17. 如何显示相对时间?如几分钟前,几天前等,可以用momentjs,参考地址 ---https://scotch.io/tutorials/display-time-relatively-in-angular
18. 关闭应用: ionic.Platform.exitApp(); navigator.app.exitApp();
19. 在安卓设备上如何让title居中: 如果要统一让所有navbar上的title居中(包括上面的headerbar),可以在config里设置,如:
config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
$ionicConfigProvider.navBar.alignTitle('center');
...
}
20. ionic的subheader挡住了内容区域:解决方案是给<ion-content>
加类has-subheader
,同理也可以加has-header
<ion-content class="has-header has-subheader">
21. 对于需要添加数据的list,在添加数据后页面不能及时刷新造成卡顿怎么办?
使用$ionicScrollDelegate.resize();在添加数据后手动进行重新刷新;
22. ionic tab在Android中显示在顶部的解决方案:
.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) { $ionicConfigProvider.platform.ios.tabs.style('standard');
$ionicConfigProvider.platform.ios.tabs.position('bottom');
$ionicConfigProvider.platform.android.tabs.style('standard');
$ionicConfigProvider.platform.android.tabs.position('standard'); $ionicConfigProvider.platform.ios.navBar.alignTitle('center');
$ionicConfigProvider.platform.android.navBar.alignTitle('left'); $ionicConfigProvider.platform.ios.backButton.previousTitleText('').icon('ion-ios-arrow-thin-left');
$ionicConfigProvider.platform.android.backButton.previousTitleText('').icon('ion-android-arrow-back'); $ionicConfigProvider.platform.ios.views.transition('ios');
$ionicConfigProvider.platform.android.views.transition('android');
}
23. 时候会出现ionicHistory.clearHistory无效,决办法,用 timeout();
$timeout(function () {
$ionicHistory.removeBackView();
$ionicHistory.clearCache();
$ionicHistory.clearHistory();
});
24. ionic 更改包名:找到根目录下的config.xml
,其中<widget id='com.package.name'>
是你的包名;
25. ionic中如何打开微信(或者其他应用):
使用协议 : weixin://
<a class="button button-block button-light" href="weixin://">打开微信</a>
然后在根目录下的config.xml中配置:
<access origin="weixin:*" launch-external="yes"/> //打开微信的
26. ionic.Platform.exitApp()退出后,再进入应用 splashscreen不显示:
在config.xml文件里添加: <preference name="SplashShowOnlyFirstTime" value="false" />
27. ionic实现微信分享:参考文章--- https://chenhuichao.com/2016/10/09/ionic/ionic-wechat-share/
ionic使用的一些技巧的更多相关文章
- WebStorm技巧-在安卓手机上运行Ionic程序
打开菜单项 Run -> Run- 选择 Edit Configurations- 添加一个 PhoneGap/Cordova 配置项,命名如: Ionic Android, 并输入相关 ...
- angularJS实用的开发技巧
一.开端 真的是忙完这一阵子就可以忙下一阵子了啊... 最近在做一个angularJS+Ionic的移动端项目...记录一些技巧,方便自己以后查阅,也方便需要的人可以看一看...^_^ 二.基础原则了 ...
- 【开源】Ionic项目实例《Ionic中文社区》
介绍 这几天闲着没事,就做了个第三方的Ionic社区的移动客户端,练练手,界面设计和图片资源直接从官方版拿来的.真懒o(︶︿︶)o 唉 网站开放出来的接口,都已全部实现,大家可以下着试试看. 源码 h ...
- AngularJS1.3一些技巧
前言 框架选择.在上一篇文章评论中,有人说angular1.3是个过时的东西,建议使用angular2.其实这种说法很像拿jQuery1.x和jQuery2.x做比较,新的版本当然会有优化优势的地方, ...
- Ionic 常见问题及解决方案
前言 Ionic是目前较为流行的Hybird App解决方案,在Ionic开发过程中会遇到很多常见的开发问题,本文尝试对这些问题给出解决方案. 一些常识与技巧 list 有延迟,可以在ion-cont ...
- [ionic开源项目教程] - 第5讲 如何在项目中使用全局配置
第5讲 如何在项目中使用全局配置? Q:ionic开发,说纯粹一点,用的就是html+css+js,那么无疑跟web开发的方式是类似的.在这里给大家分享一个小技巧,如何在项目中使用全局配置? A:我的 ...
- Cordova+angularjs+ionic+vs2015开发(三)
欢迎加群学习:457351423 这里有4000多部学习视频,涵盖各种技术,有需要的欢迎进群学习! 一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选 ...
- VS2015 Cordova Ionic移动开发(三)
一.基础设置 1.修改App名称和程序起始页 打开config.xml配置文件显示如下,在[通用]选项卡中,将显示名称和起始页,修改为自己想要的名称即可. 如需直接在xml文件中修改:右击config ...
- AngularJS进阶(三十)AngularJS项目开发技巧之图片预加载
AngularJS项目开发技巧之图片预加载 绪 项目(移动端采用Ionic 框架)开发完毕,测试阶段发现移动APP首页的广告图片(图片由服务器端返回相应url地址)很难加载,主要原因还是网速.如下图左 ...
随机推荐
- UnicodeMath数学公式编码_翻译(Unicode Nearly Plain - Text Encoding of Mathematics Version 3)
目录 完整目录 1. 简介 2. 编码简单数学表达式 2.1 分数 2.2 上标和下标 2.3 空白(空格)字符使用 3. 编码其他数学表达式 3.1 分隔符 强烈推荐本文简明版UnicodeMath ...
- 安装完MySQL数据库设置密码
对于windows平台来说安装完MySQL数据库后,系统就已经默认生成了许可表和账户,你不需要像在Unix平台上那样执行 mysql_install_db脚本来生成帐户和相应权限许可表.但是如果不是用 ...
- webpack4入门
前提 已安装node(版本号>4.0,已自带NPM) mac机器 有一个空目录 无webpack.config.js配置打包 快速构建package.json文件. npm init -y 安装 ...
- npm发包注意
ES6语法的包需要转换为ES5语法 安装bebel npm install --save-dev babel-cli babel-preset-es2015 babel-preset-es2017 b ...
- hdu 5564 Clarke and digits 矩阵快速幂优化数位dp
Clarke and digits Time Limit: 5000/3000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- ActiveMQ组件使用方法
由于组件使用了spring,故需要相关的spring包及配置 首先,需要加载对应的jar包 然后,编写调用类 package com.demo.testSpring; import com.jfina ...
- [python]windows截图
Windows截图 截图:截取屏幕任意大小图片 下载pip install Pillow from PIL import ImageGrab # x1:开始截图的x坐标 # x2:开始截图的y坐标; ...
- [noip2017] 前三周总结
[noip2017] 前三周总结 10.20 Fri. Day -21 距离noip复赛还有3周了,进行最后的冲刺! 首先要说今天过得并不好,和我早上比赛打挂了有关系. 不过每一次比赛都能暴露出我的漏 ...
- 【转】.Net Core中的Api版本控制
原文链接:API Versioning in .Net Core 作者:Neel Bhatt 简介 Api的版本控制是Api开发中经常遇到的问题, 在大部分中大型项目都需要使用到Api的版本控制 在本 ...
- CefGlue中js与C#交互(实现mp3播放)
一.C#调用js 1.通过CefFrame.ExecuteJavaScript(string code, string url, int line)方法执行JS private void browse ...