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 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",

(c)2006-2024 SYSTEM All Rights Reserved IT常识