总结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 });