总结angular+ionic项目中的问题

1：tab的路由导向问题

运用ion-tabs时，第一个ion-tabs标签下的href功能会覆盖掉路由中定义的默认路由（进入应用后直接加载href指向的组件）。

解决方法：多写一个ion-tabs标签，然后将href指向写为空，这样就直接加载了路由文件中路由为空的情况的组件，然后再讲这个ion-tabs标签隐藏起来。

2：tab导航位置在页面顶部：

.config(function ($ionicConfigProvider) {
    $ionicConfigProvider.backButton.text("  ").previousTitleText(false);
    $ionicConfigProvider.backButton.icon('ion-ios-arrow-back');
    //设置安卓和ios tabs切换的样式
    $ionicConfigProvider.platform.ios.tabs.style('standard');
    $ionicConfigProvider.platform.ios.tabs.position('bottom');
    $ionicConfigProvider.platform.android.tabs.style('standard');
    $ionicConfigProvider.tabs.position('bottom');//为了将tab放这里，必须要配置

    $ionicConfigProvider.platform.ios.views.transition('ios');
    $ionicConfigProvider.platform.android.views.transition('android');
})

3：滚动区域设置：

设置scroll属性值为true，ionic自带的滚动在移动端会很流畅。而且可以配合下拉刷新和上拉加载使用

<ion-content scroll="true">

注意：如果ion-content下有一个大的容器，那么这个容器的高度一定不要设置高度为100%。不然内容超出页面高度时无法滚动。

4:引用文件问题：

ionic.bundle.js is a concatenation of:
 * ionic.js, angular.js, angular-animate.js,
 * angular-sanitize.js, angular-ui-router.js,
 * and ionic-angular.js

我们在引用了ionoc.bundle.js后就不需要引入其包含的js文件了。

5:swiper轮播图传入ng遍历的数据时，无法滑动轮播图的问题：

我们在初始化swiper对象时，要加入以下两句代码：

var swiper = new Swiper('.swiper-container', {
	pagination: '.swiper-pagination',
	paginationClickable: true,
	observer:true, // 修改swiper自己或子元素时，自动初始化swiper
	observeParents:true // 修改swiper的父元素时，自动初始化swiper
});

注意：

如果使用上述方法后，页面中的图片无法自动滚动，这时候我们可以在异步获取数据的success回调中直接初始化swiper。

6：下拉刷新和上拉加载：

刷新元素：

<ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher>

加载元素：

<ion-infinite-scroll ng-if="show" pulling-text="上拉加载"  on-infinite="loadMore()" distance="1%"></ion-infinite-scroll >

刷新回调：

$scope.doRefresh = function() {
	 $scope.begin = 1; //重置到第一页
	$scope.show = true; // 重置加载组件
	geiRijiList() //这个函数是页面中获取数据的函数，需要自己定义
	$scope.$broadcast('scroll.refreshComplete');
};

加载回调：

$scope.show = false;
	    $scope.loadMore = function () {
	    	if($scope.show){
	    		$scope.begin = $scope.begin + 1; //分页加1
	    		 //这里使用定时器是为了缓存一下加载过程，防止加载过快
	    		var timer = $timeout(function () {
	    			$http({
					method : 'get',
					url : API_URL+"diary/getDiaryInfo",
					params : {
						'stuId':stuId,
						'userId': userId,
						'begin':$scope.begin
					}
					}).success(function(json){
						if(json.data.length == 0 || !json.data){ //获取数据为空时，隐藏并return
							$scope.show = false;
							// 当下拉加载时，页面中没有数据时，没有更多数据的提示消失
							if($scope.rijiList.length == 0 || !$scope.rijiList){
								$scope.noData =  false;
							}else{
								$scope.noData =  true;
							}
							return
							}else if(json.data.length>0 && json.data.length<10){ // 当数据在10条以内
								$scope.rijiList = $scope.rijiList.concat(json.data);
								$scope.show = false;
								$scope.noData =  true;
								return
							}else{ //10条及以上
								$scope.rijiList = $scope.rijiList.concat(json.data);
							}
					}).error(function(json){
						//处理响应失败
						toaster.pop('warning', null,  '网络连接异常，请稍后再试！', null, 'trustedHtml');
					});
                　　　　　　$scope.$broadcast('scroll.infiniteScrollComplete');
               　　　　　　 $scope.$broadcast('scroll.refreshComplete');
                　　　　　　$timeout.cancel(timer);
                　　　　　　return
            }, 1500)
	    	}
      }

注意：

1：上拉加载触发的事件是根据其显示的true或false来的，所以说我们在页面加载时，就要将$scope.show = false。如果是true，页面一加载就会触发loadMore()。

2：$scope.show的值是在页面第一次查询数据后，根据值的长度设置的，如果超过10条（这里的10条是后台分页数据每页的数据个数），就将$scope.show设置为true，这里设置后不会直接调用loadMore()

3:上拉加载调取接口数据的时候可以设置一个settimeout，防止加载过快。

4：每次执行上拉加载都要使用concat()拼接数据。

5：如果上拉加载的数据长度在0~9之间，说明后面的页数已经没有数据了。这时我们将$scope.show的值设置为false，这样的话就不会再调用loadMore()这个方法了。

7：ionic自定义的手势事件：

ionic已经封装了手势事件，如tap，swipe等

8:解决AngularJS使用ng-bind-html会过滤html字符串中style属性的问题

使用$sce.trustAsHtml(）方法处理，这个方法只能对字符串进行处理。$sce要注入到controller里。

8：页面传参与路由传参

页面传参：页面中事件传递参数到对应的js中时，如果传递的值中含有特殊字符等，会报错。

路由传参：

1：在路由文件中，将被传参的路由设置参数，如：

.state('proInfo',{
        url:"/proInfo",
        cache:'false',
        params:{"data":null},
        templateUrl: "templates/proInfo.html",
        controller: 'proInfoCtrl'
})

2：在被传参的controller中注入$stateParams，并用$stateParams.data接受参数对象

3：传参页面在路由跳转事件时，加入如下参数变量(变量自定义，可多个)：

$state.go('jiesong_info',{data:{"id":id}})

　　

9：打包成原生应用后如何实现存储图片到相册和分享至微信的功能。

github例子地址

1、保存到相册：

$scope.save = function() {
      var photoPath = $(".swiper-slide-active img").attr("ng-src");  //这是图片的路径
　　　 var pictrueUrl = encodeURI(photoPath);
      function saveImageToPhone(url, success, error) {
        var canvas, context, imageDataUrl, imageData;
        var img = new Image();
        img.crossOrigin = 'anonymous'; //当图片是跨域请求时，需要加这句话
        img.src = url;
        img.onload = function () {
          canvas = document.createElement('canvas');
          canvas.width = img.width;
          canvas.height = img.height;
          context = canvas.getContext('2d');
          context.drawImage(img, 0, 0);
          try {
            imageDataUrl = canvas.toDataURL('image/jpeg', 1.0);
            imageData = imageDataUrl.replace(/data:image\/jpeg;base64,/, '');
            cordova.exec(
              success,
              error,
              'Canvas2ImagePlugin',
              'saveImageDataToLibrary',
              [imageData]
            );
          }
          catch (e) {
            error(e.message);
          }
        };
        try {
          img.src = url;
        }
        catch (e) {
          error(e.message);
        }
      }

      var success = function (msg) {
     		toaster.pop('warning', null,  '保存成功！', null, 'trustedHtml');
      };
      var error = function (err) {
       	toaster.pop('warning', null,  '保存失败！', null, 'trustedHtml');
      };
      saveImageToPhone(photoPath, success, error);
		}

注意：当我们保存的图片是跨域请求的图片，我们需要加上img.crossOrigin = 'anonymous'这句代码。打包的时候，安卓和ios还需要安装一个插件：

cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git

2：分享至微信：

$scope.share = function(){
	    var photoPath = $(".swiper-slide-active img").attr("ng-src");
	    var hideSheet = $ionicActionSheet.show({
            buttons: [
              { text: '微信朋友圈' },
              { text: '微信好友' }
            ],
            titleText: '分享到',
            cancelText: '取消',
            cancel: function() {
               hideSheet();
            },
            buttonClicked: function(index) { //这里的index是ionic弹出框按钮的索引。
            	if(index==0){
            		//微信朋友圈
			scene1 = Wechat.Scene.TIMELINE   // share to Timeline
		}else {
			//微信好友
			scene1 = Wechat.Scene.SESSION   // share to session
		}
            	Wechat.share({
			message: {  //这里的参数名都不要省略
			     title: "成长特工站",
                             description: "",
                             mediaTagName: "",
                             messageExt: "",
                             messageAction: "",
			     media: {  //这里媒体类型不同，对象参数名也不同
				type: Wechat.Type.IMAGE,
				image: photoPath
			     }
		},
		 scene: scene1
		}, function () {
			toaster.pop('warning', null,  '分享成功！', null, 'trustedHtml');
		}, function (reason) {
			 toaster.pop('warning', null,  '分享失败！', null, 'trustedHtml');
		});

          	}
        });

        $timeout(function() {
            hideSheet();
        }, 5000);
		}

注意：

　　Wechat.Scene.TIMELINE和Wechat.Scene.SESSION这里的类型需要大写。

　　message的参数一个都不能少，不能会有未知错误或者json.error。

　　midea的类型不同，其参数名也不同，具体可见wechat.js(安装的插件)。

打包的时候，安卓和ios还需要安装一个插件：

cordova plugin add https://github.com/xu-li/cordova-plugin-wecha

10：input上传文件与toster.pop配合使用时，toster.pop只出现一次的问题;

如果input file的文件条件不符合，我们需要清空其值，可以用$('xx').val('')。必须使用settimeout异步清空。

11:$ionicActionSheet 在Android手机上样式问题

在样式中重写：

.platform-android .action-sheet-backdrop {
    -webkit-transition: background-color 150ms ease-in-out;
    transition: background-color 150ms ease-in-out;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 11;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
}

.platform-android .action-sheet-backdrop.active {
    background-color: rgba(0, 0, 0, 0.4);
}

.platform-android .action-sheet-wrapper {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    -webkit-transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
    transition: all cubic-bezier(0.36, 0.66, 0.04, 1) 500ms;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 500px;
    margin: auto;
}

.platform-android .action-sheet-up {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.platform-android .action-sheet {
    margin-left: 8px;
    margin-right: 8px;
    width: auto;
    z-index: 11;
    overflow: hidden;
}

.platform-android .action-sheet .button {
    display: block;
    padding: 1px;
    width: 100%;
    border-radius: 0;
    border-color: #d1d3d6;
    background-color: transparent;
    color: #007aff;
    font-size: 21px;
}

.platform-android .action-sheet .button:hover {
    color: #007aff;
}

.platform-android .action-sheet .button.destructive {
    color: #ff3b30;
}

.platform-android .action-sheet .button.destructive:hover {
    color: #ff3b30;
}

.platform-android .action-sheet .button.active, .platform-android .action-sheet .button.activated {
    box-shadow: none;
    border-color: #d1d3d6;
    color: #007aff;
    background: #e4e5e7;
}

.platform-android .action-sheet-has-icons .icon {
    position: absolute;
    left: 16px;
}

.platform-android .action-sheet-title {
    padding: 16px;
    color: #8f8f8f;
    text-align: center;
    font-size: 13px;
}

.platform-android .action-sheet-group {
    margin-bottom: 8px;
    border-radius: 4px;
    background-color: #fff;
    overflow: hidden;
}

.platform-android .action-sheet-group .button {
    border-width: 1px 0px 0px 0px;
}

.platform-android .action-sheet-group .button:first-child:last-child {
    border-width: 0;
}

.platform-android .action-sheet-options {
    background: #f1f2f3;
}

.platform-android .action-sheet-cancel .button {
    font-weight: 500;
}

.platform-android .action-sheet-open {
    pointer-events: none;
}

.platform-android .action-sheet-open.modal-open .modal {
    pointer-events: none;
}

.platform-android .action-sheet-open .action-sheet-backdrop {
    pointer-events: auto;
}

.platform-android .action-sheet .action-sheet-title, .platform-android .action-sheet .button {
    text-align: center;
}

.platform-android .action-sheet-cancel {
    display: block;
}

　　

12:模仿微信选择多张图片(选择后使用canvas进行压缩)

github地址

ImagePicker.getPictures(function(result) {
						for (var i = 0; i < result.length; i++) {
						  var target = 420;
							var reader = new FileReader();
							reader.readAsDataURL(file);
							let src = result[i];
							reader.onload = function (event) {
								// 创建img
								var image = new Image();
								image.setAttribute('crossOrigin', 'anonymous');
								image.src = src;
								image.onload = function () {
									// 绘制canvas
									var img = this;
									var width = img.width;
									var height = img.height;
									var canvas = document.createElement('canvas');
									var ctx = canvas.getContext('2d');
									var ratio = -1;
									canvas.width = width
									canvas.height = height
									ctx.fillStyle = "#fff"
									ctx.fillRect(0, 0, width, height);
									ctx.drawImage(img, 0, 0, width, height);
									if (width >= height){
										ratio = target/height;
										console.log(11111);
										console.log(ratio);
									}else {
										ratio = target/width;
										console.log(11111);
										console.log(ratio);
									}
									if (ratio > 0){
										// 利用canvas的api压缩图片
										var base64 = canvas.toDataURL('image/jpeg', ratio);
										// 将压缩好的数据转换为blob
										var blob = base2Blob(base64);
										console.log(blob.size);

										// 创建formData
										var formData = new FormData();
										formData.append("file",blob);
										$http({
											method : 'POST',
											url : API_URL+"school/uploadImage",
											data : formData,
											headers: {
												'Content-Type': undefined
											},
											transformRequest: angular.identity
										}).success(function(json){
											//$scope.isLoading = false;
											console.log(JSON.stringify(json));
											if(json.code == 1){
												$scope.photos.push({
													"url":json.data.realPath,
													"fileType":2
												});
												console.log($scope.photos)
											}else{
												toaster.pop('warning', null,  json.data.desc, 1000, 'trustedHtml');
											}
										}).error(function(XMLHttpRequest, textStatus){
											//alert("XMLHttpRequest.status"+XMLHttpRequest.status);
											//alert("XMLHttpRequest.readyState"+XMLHttpRequest.readyState);
											//alert("textStatus"+textStatus);
											toaster.pop('warning', null,  '网络连接异常，请稍后再试！', 1000, 'trustedHtml');
										});
									}else {
										var formData = new FormData();
										formData.append("file",file);
										$http({
											method : 'POST',
											url : API_URL+"school/uploadImage",
											data : formData,
											headers: {
												'Content-Type': undefined
											},
											transformRequest: angular.identity
										}).success(function(json){
											//$scope.isLoading = false;
											console.log(JSON.stringify(json));
											if(json.code == 1){
												$scope.photos.push({
													"url":json.data.realPath,
													"fileType":2
												});
											}else{
												toaster.pop('warning', null,  json.data.desc, 1000, 'trustedHtml');
											}
										}).error(function(XMLHttpRequest, textStatus){
											//alert("XMLHttpRequest.status"+XMLHttpRequest.status);
											//alert("XMLHttpRequest.readyState"+XMLHttpRequest.readyState);
											//alert("textStatus"+textStatus);
											toaster.pop('warning', null,  '网络连接异常，请稍后再试！', 1000, 'trustedHtml');
										});
									}
								}
							}
						}
					}, function(err) {
					    alert(err);
					}, { maximumImagesCount : 9, width : 1920, height : 1440, quality : 100 });

12:video标签有预加载的属性(此属性在打包成ios后的应用里，似乎会有问题)

preload = "auto"

　　

 13:ionic中，如果页面中的元素需要固定在页面的某个区域，并且此元素的dom位于具有translate3d属性的元素内，此元素可被拖拽(ios):

方法：在此页面的路由中，给具有添加translate3d属性的元素transform:none。不要用js动态添加，可能会造成其他问题。