Ionic实现仿weChat客户端总结 - 简书
Ionic实现仿weChat客户端总结
最近在学习Ionic框架，正好之前用过AngularJS，所以感觉学习难度不是很大。尝试做一点东西。
这个APP是跟着大神写的博客做的，还是遇到了几个问题，这里记录一下。
1. $scope.$on方法不执行？？？
过程中需要用$on监听ionicView状态变化，在ionicView进入之前做一些数据初始化的操作，结果遇到$on方法不执行，监听不到beforEnter事件。
最后原因出在载入的视图没有全部包含在&ion-view&&/ion-view&中,而是写成了这样
&ion-header-bar&...&/ion-header-bar&
&ion-view&...&/ion-view&
导致$on方法只能监听到loaded，beforeLeave，leave，afterLeave这几个事件，关于ion-view的生命周期事件上有详细的说明。最后也就是将ion-header-bar放到ion-view中就可以了。
ionicView的生命周期事件
$ionicView.loaded
视图已经被加载了。这事件只会发生一次，就是在视图被创建并添加到Dom中。当跳出页面并且被缓存了的话，再次访问这个页面时这个事件将不会被激活。Loaded事件可以让你为这个视图设置你的代码； 然而，不推荐用它去监听视图是否被激活。类似Activity的onCreat()方法。
$ionicView.enter
视图完全进入，变成一个活动视图，无论这个视图是第一次进入还是被缓存了，这个事件都会被激活。
$ionicView.leave
视图完全离开，不在是一个活动视图。无论视图被缓存还是被销毁，这个事件都会被激活。
$ionicView.beforeEnter
视图即将进入变成一个活动视图，类似于Activity的onResume()方法。
$ionicView.beforeLeave
视图即将离开，不再是一个活动视图，类似于Activity的onPause()方法。
$ionicView.afterEnter
视图完全进入，现在是一个活动视图。
$ionicView.afterLeave
视图完全离开，不再是一个活动视图。
$ionicView.unloaded
视图的控制器被销毁，视图元素也全部从DOM树中移除，相当于Activity的onDestroy()方法。
$ionicParentView.enter
父视图已经完全进入...
$ionicParentView...
注：需要注意的是，当一个视图离开，另一个视图进入时，前一个视图的beforeLeave,leave,afterLeave和后一个视图的beforeEnter,enter,afterEnter是交叉执行的，进行控制器间传值的时候需要注意。避免使用不当，导致获取不到数据。
2. 代码结构方面的问题
善用run方法，做一些初始化全局数据的操作
angular.module('wechat',['ionic'])
.run(function(...) {
善用$on函数，$scope.$on函数可以监听事件变化，在开发中可以用来监听ionicView的生命周期事件，做一些数据初始化/数据缓存的操作；或者用来监听子控制器或者父控制器传播的事件，详见，在做可伸缩的输入框就用到这个，子控件向上传播事件，父控件用$on方法监听。
将数据获取/存储/计算这样的逻辑放在service中，然后在controller中调用这样方法完成工作，减轻controller的工作量，让controller变轻。
3. 滑动切换的tab如何实现
使用手势识别。在tab的内容ion-content上添加on-swipe-right/on-swipe-left，为其制定跳转函数，用$state进行路由跳转。
&ion-content
on-swipe-up="onSwipeUp()"&
&/ion-content&
其他手势事件
长按的时间是500毫秒。
这个是手势轻击事件，如果长按时间超过250毫秒，那就不是轻击了。
on-double-tap
手双击屏幕事件。
这个和 on-tap 还是有区别的，这个是立即执行，而且是用户点击立马执行。不用等待 touchend/mouseup 。
on-release
当用户结束触摸事件时触发。
这个有点类似于PC端的拖拽。当你一直点击某个物体，并且手开始移动，都会触发 on-drag。
on-drag-up
向上拖拽。
on-drag-right
向右拖拽。
on-drag-down
向下拖拽。
on-drag-left
向左边拖拽。
指手指滑动效果，可以是任何方向上的。而且也和 on-drag 类似，都有四个方向上单独的事件。
on-swipe-up
向上的手指滑动效果。
on-swipe-right
向右的手指滑动效果。
on-swipe-down
向下的手指滑动效果。
on-swipe-left
向左的手指滑动效果。
4.可伸缩的输入框如何实现
1.在需要加入可伸缩输入框的地方这样写：
&textarea msd-elastic ng-model="foo"&
&/textarea&
2.需要在module中加入依赖
.module('yourApp', [
'monospaced.elastic'
3.可以在上层控制器中监听到输入框高度变化。
这是很重要的，因为有的组件(eg:ion-footer-bar)是有固定高度的，监听到内部的输入框的高度变化就可以动态改变其高度，否则可伸缩输入框不起作用。
$scope.$on('elastic:resize', function(event, element, oldHeight, newHeight) {
// do stuff
在elastic.js文件中可以看到
scope.$emit('elastic:resize', $ta, taHeight, mirrorHeight);
这里就是调用$emit函数向上层控制器传递数据。
注：scope.$emit()是向父控制器提交数据，scope.$broadcast是向子控制器广播数据，而同级的控制器都是获取不到的。这一种方法可以用于控制器间传值。
暂时写这么多吧，之后想起来再加。最后贴上github地址。ionic中一些常用的方法封装
ionic中一些常用的方法封装，在ionic1技术栈的开发中中有很多零碎的功能或者服务，通过每次注入的方式都比较麻烦, 所以需要对一些通用的功能进行一些封装(通用的UI封装成指令，通用的逻辑封装成服务) ，下面主要对一些常用功能进行封装，当然这里只是一个引子，针对不同的逻辑业务，有不同或者更多的实践，此处只作为举例，主要代码和相关注释如下：
关键代码和注释
.factory('appUtils', [
'$state',
'$ionicViewSwitcher',
'$ionicNativeTransitions',
'$ionicHistory',
'$cookies',
'$ionicModal',
'$cordovaInAppBrowser',
'$cordovaToast',
'$cordovaKeyboard',
'$ionicScrollDelegate',
function ($state, $ionicViewSwitcher, $ionicNativeTransitions, $ionicHistory, $cookies, $ionicModal,
$cordovaInAppBrowser, $cordovaToast, $cordovaKeyboard, $ionicScrollDelegate) {
/* util 构造函数 */
var Util = function () {
/* util 原型对象 */
Util.prototype = {
/* 通用返回函数 */
back: function () {
// 不同平台分别处理,此处使用了ionic-native-transitions插件
ionic.Platform.is() ? $ionicHistory.goBack() : $ionicNativeTransitions.goBack();
/* 进入某个路由模块 */
/* 路由的跳转不推荐使用a标签加上相应属性来做,用事件和下面的方法来跳转有效果较好的转场动画 */
go: function (route, params, callback) {
$ionicViewSwitcher.nextDirection('forward');
$state.go(route, params);
callback && typeof callback === 'function' && callback();
/* 解决双平台刷新问题的直接进入 tab栏 on-select 时使用 直接进入模块(无动画) */
doGo: function (url) {
$ionicNativeTransitions.locationUrl(url, {
&type&: &fade&,
&duration&: 0
/* 字符串 trim 函数 */
trim: function (str) {
if (typeof str === 'string') {
return str.replace(/^\s+|\s+$/g, &&);
/* 截取字符串的方法 */
textCut: function (str, num) {
if (typeof str === 'string' && typeof num === 'number' && str.length &= num) {
var temp = str.slice(0, num);
var last = temp.lastIndexOf(' '); // 找到空格的索引
temp = // 内存回收
return str.slice(0, last) + '...';
/* 此处只演示基于cookie的存储方法 | flag标识: 0 -& ip用户(匿名) , 1 -& 正常用户 */
/* isLogin为同步存储的登录标识 */
storage: function (data, flag, callback) {
var expireDate = new Date();
expireDate.setDate(expireDate.getDate() + 90); // 设置过期时间为3个月(90天)
$cookies.put('token', data.token, {'expires': expireDate}); // cookie 存储token
$cookies.put('user', JSON.stringify(data), {'expires': expireDate}); // cookie 存储 userInfo
// 下面是为正常用户和匿名ip用户的设置，登录与否的标识是isLogin
flag ? $cookies.put('isLogin', true, {'expires': expireDate}) : $cookies.remove('isLogin');
callback && angular.isFunction(callback) && callback();
/* 判断是否登录 */
isLogin: function () {
return $cookies.get('isLogin');
/* 退出功能 */
logout: function (fn) {
$cookies.remove('user');
$cookies.remove('token');
$cookies.remove('isLogin');
fn && typeof fn === &function& && fn();
/* 获取用户信息 */
getUser: function () {
return $cookies.get('user');
/* 用户提示功能 */
tips: function (prompt, index) {
// 位置信息 0 上 , 1 中 , 2 下
switch (index) {
return window.cordova ? $cordovaToast.showShortTop(prompt) : alert(prompt);
return window.cordova ? $cordovaToast.showShortCenter(prompt) : alert(prompt);
return window.cordova ? $cordovaToast.showShortBottom(prompt) : alert(prompt);
/* 弹出模态窗口功能 */
showModal: function (path, scope, animation, cb) {
$ionicModal.fromTemplateUrl(path, {
scope: scope,
animation: animation
}).then(function (modal) {
cb && angular.isFunction(cb) && cb(modal);
/* 隐藏 modal */
hideModal: function (modal) {
modal.hide();
/* 移除 modal 支持多个modal一起移除 */
destroyModal: function (scope, modal) {
scope.$on('$destroy', function () {
// 如果是单个，则直接移出，如果是数组，则迭代移除
if (Array.isArray(modal)) {
modal.forEach(function (item) {
item.remove();
modal && modal.remove();
/* 清除历史记录功能，每次回到tab根目录调用,修复ionic偶尔无法回退bug */
clearHistory: function () {
$ionicHistory.clearHistory();
/* pdf的方法 */
openPdf: function (url) {
// 安卓平台进入pdf模块打开，使用的是嵌入了一个pdf的h5网页(后台处理之后的页面)
if (!ionic.Platform.isIOS()) {
return this.go('pdf', {pdf: url});
// iOS平台通过内置safari打开
var options = {
location: 'yes',
clearcache: 'yes',
toolbar: 'yes'
// 下面此处只有真机能够打开,打不开
document.addEventListener(&deviceready&, function () {
$cordovaInAppBrowser.open(url, '_system', options)
}, false);
/* 测试用户是否登录 */
checkAndGoLogin: function (cb1, cb2) {
var flag = this.isLogin();
// 是否登录
if (flag) return cb1();
this.go('login', null, cb2);
/* 数组去重功能 */
arrayUnique: function (arr) {
if (!Array.isArray(arr))
var res = [];
var json = {};
for (var i = 0; i & arr. i++) {
if (!json[arr[i]]) {
res.push(arr[i]);
json[arr[i]] = 1;
/* 存储搜索记录 */
getSearchTextStorage: function (searchText) {
var searchList = [];
var res = [];
if (localStorage.searchList && searchText) {
searchList = JSON.parse(localStorage.searchList);
searchList.unshift(searchText); // 头部加1
res = this.arrayUnique(searchList); // 数组去重
} else if (!localStorage.searchList && searchText) {
res.unshift(searchText);
return localStorage.searchList ? JSON.parse(localStorage.searchList) : [];
localStorage.searchList = JSON.stringify(res); // 本地存储
/* 键盘监听 只针对安卓,ios会自动处理 */
/* 其中window.addEventListener可使用ionic内置的 ionic.EventController.on代替 */
listenKeyBoard: function (cb_show, cb_hide) {
if (ionic.Platform.isIOS())
window.addEventListener('native.keyboardshow', function () {
cb_show && typeof cb_show === 'function' && cb_show();
window.addEventListener('native.keyboardhide', function () {
cb_hide && typeof cb_hide === 'function' && cb_hide();
/* 隐藏键盘 */
hideKeyBoard: function () {
if (!$cordovaKeyboard.isVisible())
$cordovaKeyboard.close();
/* 媒体文件相关功能 */
/* 用于判断数字是否 & 10 , & 10 则补0 */
tenFormat: function (num) {
return num / 10 & 1 ? '0' + num :
/* 处理时分秒 */
handleTime: function (hour, min, sec) {
var hh = this.tenFormat(hour);
var mm = this.tenFormat(min);
var ss = this.tenFormat(sec);
return hh + ':' + mm + ':' +
/* 获取音频或视频时长 */
getMediaDuration: function (scope, media, mediaData) {
if (!media.duration) {
mediaData.current = mediaData.duration = '00:00:00'; // 先初始化时间
mediaData.durationOrigin = media. // 得到音频或视频时长
var hh = Math.floor(media.duration / 3600);
var mm = Math.floor(media.duration % 3600 / 60);
var ss = Math.floor(media.duration % 60);
mediaData.duration = this.handleTime(hh, mm, ss); // 得到经过格式转换之后的音频或视频时长
scope.$apply();
/* 检查媒体时长 */
checkToGetMediaDuration: function (scope, media, mediaData) {
!mediaData.durationOrigin && this.getMediaDuration(scope, media, mediaData);
/* 处理正在进行的时间 格式为: hh:mm:ss */
handlePlayingTime: function (time) {
var hh = Math.floor(time / 3600);
var mm = Math.floor(time % 3600 / 60);
var ss = Math.floor(time % 60);
return this.handleTime(hh, mm, ss);
// 隐藏闪屏
enterSettings: function () {
navigator.splashscreen && navigator.splashscreen.hide && navigator.splashscreen.hide(); // 设置闪屏
window.StatusBar && window.StatusBar.show(); // 显示状态栏
// 滚动到最顶部方法
scrollToTop: function (name, flag) {
$ionicScrollDelegate.$getByHandle(name).scrollTop(flag);
return new Util();查看: 22185|回复: 7
ionic中的页面跳转和返回问题
主题帖子积分
注册会员, 积分 175, 距离下一级还需 25 积分
注册会员, 积分 175, 距离下一级还需 25 积分
中在tab中有个&ion-nav-back-button&,可以返回到之前页面。可是在跳转到单独页面的情况下，不在tab的view中显示，怎么可以让他返回之前页面呢？
现在想的办法是在路由中定义参数，然后$state.go时传入参数跳转，然后在跳转的页面，点击返回按钮时做判断，再跳转回去。可是感觉这样好麻烦，有没有简便快捷的返回方法？而且不容易出错的
主题帖子积分
注册会员, 积分 74, 距离下一级还需 126 积分
注册会员, 积分 74, 距离下一级还需 126 积分
&body ng-app=&exampleApp&&
& & & & & & & &
& & & & &ion-nav-bar class=&bar-assertive&&
& & & & & & &ion-nav-back-button class=&button-icon ion-ios-arrow-left&&
& & & & & & & & & & 返回
& & & & & & &/ion-nav-back-button&
&&& & & & &/ion-nav-bar&
& & & & &ion-nav-view&&/ion-nav-view&
主题帖子积分
注册会员, 积分 175, 距离下一级还需 25 积分
注册会员, 积分 175, 距离下一级还需 25 积分
& & & & & &
不行，我这边tabs里没有使用&ion-nav-bar&，而是在每个页面里使用了&ion-header-bar&,使用不了&ion-nav-back-button&。
不过还是谢谢你了。
主题帖子积分
新手上路, 积分 28, 距离下一级还需 22 积分
新手上路, 积分 28, 距离下一级还需 22 积分
请问一下 是如何跳脱tabs访问单独页面的
主题帖子积分
请问一下 是如何跳脱tabs访问单独页面的
27.第十五讲 ionic路由 页面切换详解(1)
28.第十五讲 ionic路由结合ionic-tabs 页面切换详解(2)
29.第十五讲 ionic路由结合ionic-tabs 页面切换详解(3)
29.第十五讲 ionic路由结合ionic-tabs 页面切换详解(3)
这三讲教程看看就会了
这个是ionic中最重要的路由
主题帖子积分
新手上路, 积分 28, 距离下一级还需 22 积分
新手上路, 积分 28, 距离下一级还需 22 积分
27.第十五讲 ionic路由 页面切换详解(1)
28.第十五讲 ionic路由结合ionic-tabs 页面切换详解(2)
29.第十 ...
谢谢了，百度云盘的哪些？
主题帖子积分
新手上路, 积分 14, 距离下一级还需 36 积分
新手上路, 积分 14, 距离下一级还需 36 积分
楼主你好,请问你的问题解决了吗?
主题帖子积分
新手上路, 积分 8, 距离下一级还需 42 积分
新手上路, 积分 8, 距离下一级还需 42 积分
我也遇到了同样的问题
站长推荐 /1
Ionic(ionicframework)号称未来最有潜力的一款html5移动app开发框架是Angularjs移动端解决方案，Angularjs号称下一代web应用，Ionic移动app开发教程值得拥有
Powered byangularjs $state.go页面不刷新数据 - 博客频道 - CSDN.NET
WenJimmy的专栏
分类：angular前端开发
假如进入market/beian/add添加数据，保存提交后回退market/beian列表页，没有自动更新数据，必须得手动下拉刷新才会出来
$state.go("marketBeian",{},{reload:true});
搜索后参考
设置路由控制器
$statePrivider.state({})这个方法中的参数是对象，其中有项属性配置是cache:true/false, ，默认为true。在此，将其配置为false,此时，这个状态就不会有缓存，也就可以实现每次处于该状态时刷新页面，也就相当于实现了强制刷新。
.state('marketBeian', {
url: '/market/beian',
templateUrl: 'views/market/beian.html',
cache:false,
controller: 'MarketBeianCtrl',
title: '作业备案信息管理'
排名：千里之外
（0）（0）（0）（3）（0）（2）（0）（6）（5）（4）