ionic + cordova+angularJs 搭建的H5 App完整版总结
Posted W+7
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ionic + cordova+angularJs 搭建的H5 App完整版总结相关的知识,希望对你有一定的参考价值。
为期半个月的项目实践开发,已完整告一段落,团队小组获得第一名,辛苦总算没有白费,想起有一天晚上,整个小组的人,联调到12点才从公司回去,真是心酸。这里总结一下,项目过程中遇到的问题
和感悟。哈哈,放张集体照。嘿嘿,项目所有的不同的team的小伙伴,一群优秀的小伙伴(大多都来自高校211,985)么么哒.下面介绍下我们组的产品和问题。
项目已放在github上:https://github.com/foreverjiangting/myApp/tree/master/myApp/myApp
一:项目效果展示
先展示一下我们做的产品,主要是做一个投票的APP,包括用户登录,注册,答卷,查看答卷详情,排行榜等功能。后台可创建问卷,分发问卷,增加单选题和多选题,创建问卷题目,我这边前端的app将其显
示出来。基本上可以满足需求,但还有很多不完善的地方。
二:制作功能问题总结
先看下核心功能,用户进行单选,多选后,将保存用户的答案,传递后后端,然后在展示详情里面将用户的答案进行展示出来。这里先贴下代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
< ion-slide-box show-pager="false" on-slide-changed="onSlideChanged(index)" active-slide="currentIndex"> < ion-slide class="set-container" ng-repeat="value in objData" repeat-done="repeatDone()" > < div class="swiper-slide swiper-slide-duplicate swiper-slide-active" style="width: 349px; margin-right: 30px;"> < div class="scores" > < h3 >{{data.title}}</ h3 > < div class="f">< span id="span-text">{{$index+1}}</ span >{{value.title}}</ div > < div class="choose"> < div class="input" ng-repeat="(key,value2) in value.items"> < label for="26"> < input type="radio" name="radio{{$parent.$index}}" class="radio" value="{{key}}" ng-model= "selectedValue.radioData[$parent.$index]"> < span >{{value2}}</ span > </ label > </ div > </ div > </ div > </ div > </ ion-slide > |
这里有几个问题,由于是公用同一个模板,每一个ion-slide就是一页,且一页下面有多个选项。问题如下:
1.如何区分不同个ion-slide下的radio ?贴下代码,只要给name添加就可以。parent.parent.index即可
1
|
<input type="radio" name="radio{{$parent.$index}}" class="radio" |
2.如何获取用户选择的当前页的答案?使用ng-model即可,将用户选择的答案分别存在一个数组里面。
1
|
ng-model= "selectedValue.radioData[$parent.$index]"> |
基本上也没啥难点,就是方法要知道。用户填写答案完成后,进行保存,我们需要获取用户提交的所有答案。看下代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
$scope.submitData = {}; //用户提交完毕,当前的问卷被提交,修改其状态为已完成。可在已完成的栏目进行查看 $scope.submitSuccess = function (){ var radioJsonData = $scope.selectedValue.radioData; var radioObject = []; for ( var k in radioJsonData){ radioObject.push(radioJsonData[k]); } console.log( \'3333\' ) console.log(radioObject); console.log(radioJsonData) //获取radioData的长度,判断用户选择的数据是否完整 var radioLength = 0; var getRadioLength = function (radioJsonData){ for ( var item in radioJsonData){ radioLength++; } return radioLength; } if (getRadioLength(radioJsonData) == $scope.serveLength-1){ var submitData = window._single = { "single" :radioObject }; var submitId = window._id = { "id" : $stateParams.timuId } console.log(JSON.stringify(submitData)); var alertPopup = $ionicPopup.alert({ title: \'保存成功\' , template: \'您的单选题已完成,请继续答题!\' }); alertPopup.then( function (res) { history.go(-1); }); } else { var alertPopup = $ionicPopup.alert({ title: \'提交失败\' , template: \'您的问卷未完成,请返回查看详情!\' }); alertPopup.then( function (res) { console.log( \'提交失败\' ); }); } }; |
3.再来看下多选题,跟单选题有点区别。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
< ion-slide-box show-pager="false" on-slide-changed="onSlideChanged(index)" active-slide="currentIndex"> < ion-slide class="set-container" ng-repeat="value in objData" repeat-done="repeatDone()" > < div class="swiper-slide swiper-slide-duplicate swiper-slide-active" style="width: 349px; margin-right: 30px;"> < div class="scores"> < h3 >{{data.title}}</ h3 > < div class="f">< span id="span-text">{{$index+1}}</ span >{{value.title}}</ div > < div class="choose" > < div class="input" ng-repeat="(key,value2) in value.items"> < label for="26"> < input type="checkbox" name="radio{{$parent.$index}}" class="radio" ng-model = "selected[$parent.$index][$index]" > < span style="margin-left: 30px;">{{value2}}</ span > </ label > </ div > </ div > </ div > </ div > </ ion-slide > |
问题如下:
1.如何在多选里面选中多个答案呢?
1
|
ng-model = "selected[$parent.$index][$index]" |
这种方法是最简单的,虽然不是我们要的,但之后再做一下解析即可。数组里面的数据是这样子的。因为我们只需要保存用户选择的答案的当前题目的index,保存以1,2,3,4的形式保存即可。
看下解析的代码如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
$scope.nextSlide = function (){ var slideIndex = $ionicSlideBoxDelegate.currentIndex(); $scope.connectedData = $scope.selected.map( function (item){ var connectSelected = []; for ( var i in item){ if (item[i]){ connectSelected.push(parseInt(i)+1); } } return connectSelected.join( \'/\' ); //进行解析,以/进行分割 }) if ( $scope.connectedData == null ){ var alertPopup = $ionicPopup.alert({ template: \'您还没有选择,请选择答案!\' }); } else if ( $scope.connectedData[slideIndex] == null && slideIndex != $scope.serveLength-1 ){ var alertPopup = $ionicPopup.alert({ template: \'您还没有选择,请选择答案!\' }); return true ; } else { $ionicSlideBoxDelegate.next(); } return ; console.log( \'test:\' +JSON.stringify( $scope.connectedData)); //$ionicSlideBoxDelegate.next(); }; |
3.既然单选题和多选题都有答案了,现在就是提交用户答案了。解决不同controller之间的数据通信,本来之前用的$rootscope,不知道为什么不行,后来学霸告诉我直接
存在window下面。于是简单粗暴的解决了问题。
先看下代码吧,我们前端需要提交给后端数据包括问卷的ID,单选题答案,多选题答案。下面是提交的代码。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
.controller( \'chooseCtrl\' ,[ \'$scope\' , \'$ionicPopup\' , \'$timeout\' , \'$stateParams\' , \'$http\' , \'$ionicScrollDelegate\' , \'$location\' , function ($scope,$ionicPopup, $timeout, $stateParams,$http,$ionicScrollDelegate,$location){ $scope.jump = function (url){ window.location = url; } $scope.chooseId = $stateParams.timuId; //获取问卷的Id console.log( $scope.chooseId); var submitData = { "id" : $scope.chooseId } var objData = []; //刚开始渲染数据,获取整个问卷的data,单选存在一个数组,多选存在一个数组 $http({ // url : "../data/api.json", url : "http://10.32.33.4:8080/ivotel-management/questionnaire/selectQuestionnaireDetail" , method : "get" , params: submitData, headers: { \'Content-Type\' : \'application/json;charset=UTF-8\' } }).success( function (data) { var arr =data.questionnaireQuestionList; //进行解析 var singleData = [] ; var mutilData = []; for ( var i=0;i<arr.length;i++){ objData[i] = arr[i].responseQuestion; } // console.log(JSON.stringify(objData)); //获取所有的题目对象 for ( var i in objData){ if (objData[i].questiontype == 1){ singleData.push(objData[i]); } else if (objData[i].questiontype == 2){ mutilData.push(objData[i]); } } window._singleData = singleData; window._singleData_length = singleData.length; window._mutilData = mutilData; window._mutilData_length = mutilData.length; window.totalQuestionData = data ; //console.log(JSON.stringify(singleData)); //console.log(JSON.stringify(mutilData)); $scope.data = data; $scope.serveData = data.questionnaireQuestionList[0].qqid; }).error( function (){ console.log( \'error\' ); }); //用户填写完成后,将用户答案保存,并一起传递给后端 $scope.submit = function (){ if (window._multi == null ){ window._multi = []; } var submitTotalData = [ window._id , window._single , window._multi ] ; $http({ url : "http://10.32.33.4:8080/ivotel-examuser/questionnairePapers/Submit" , method : "post" , data : |