ionic + cordova+angularJs 搭建的H5 App完整版总结
Posted 小太阳8
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", 搭建 AngularJS+Ionic+Cordova 开发环境并运行一个demo 使用 nodejs 8、angularjs、ionic3、cordova8 更新 cordova-android 6 到 9、cordova-ios 5 到 6 我想利用ionic，cordova，angularjs来制作一个简单的app应用，想知道具体该如何开始，能在浏览器测试就好 WebApp开发框架Ionic+AngularJS+Cordova |