微信小程序——页面数据处理

小程序虽小，但是它的制作和处理也是有一点麻烦的，尤其是数据处理这一方面，可以说是很多同学的苦恼，对此我刚学的来和大家分享一下。

我在这里通过问卷的代码的格式来给大家介绍，首先新建一个paperdetails.xml,样式大家就随机发挥吧

<view class="contr" >
    <view class="top">
  <view class="work">
    <view>被评教师：{{teachername.teachername}}</view>
    <view class="pj">{{papertype}}</view>
      <view class="time"></view>
  </view>
  <view class="images">
    <image style="width: 100px; height: 100px;" src="../images/1.jpg"></image>
  </view>
</view>
              <swiper bindchange='swiper_change' current="{{currentid}}" wx:if="{{show_swiper}}">
                  <block wx:for="{{details}}">
                      <swiper-item>  
                          <view class="title">{{index+1}} {{item.content}}</view>
                          <radio-group class="radio-group" bindchange="item_change" data-id="{{item.id}}" >
                          <view >
                          <label class='item'>
                          <radio value='a#{{item.scorea}}'/>{{item.itema}}
                          </label>
                          </view>
                          <view>
                          <label class='item'>
                          <radio value='b#{{item.scoreb}}'/>{{item.itemb}}
                          </label>
                          </view>
                          <view>
                          <label class='item' wx:if="{{item.itemc!=''}}">
                          <radio value='c#{{item.scorec}}'/>{{item.itemc}}
                          </label>
                          </view>
                          <view>
                          <label class='item' wx:if="{{item.itemd!=''}}">
                          <radio value='d#{{item.scored}}'/>{{item.itemd}}
                          </label>
                          </view>
                          </radio-group>
                          
                          
                      </swiper-item>
                  </block>
                  
              </swiper>
                <view class="message" wx:if="{{show_message}}">
               <textarea placeholder="请给该老师作出评价" bindinput="write_message"></textarea>
                <view style="width:80%;margin-top:20px;"></view> 
              </view>
              <view class="sub">
                <button type="primary" disabled="{{btn_disabled}}" bindtap='mysubmit'>提交</button> 
              </view>
             
              <!-- <button bindtap='next'>下一页</button> -->
        </view>

在新建一个paperdetail.js代码如下：

// pages/wenjuan/wenjuan.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    pj:null,
    details:null,
    currentid:0,
    count: 0,
    answer:{},
    score:{},
    message:'',
    btn_disabled:true,
    show:true,
    show_swiper:true,
    show_message:false
  },
  //人工滑动
  swiper_change:function(e){
    if(e.detail.source=='touch'){
      this.setData({currentid:e.detail.current})
    }
  },
  //写入信息
  write_message:function(e){
    this.setData({message:e.detail.value});
  },
  //选中选项
  item_change:function(e){
    setTimeout(this.next,2000);
    console.log(e);
    var value=e.detail.value;
    var arr=value.split('#');
    var _answer=this.data.answer;
    var _score=this.data.score;
    _answer[e.currentTarget.dataset.id]=arr[0];
    _score[e.currentTarget.dataset.id] = arr[1];
    this.setData({answer:_answer,score:_score});
    //计算json里面的个数{4：'a',5:'b'}
    var len=0;
    for(var i in _answer){
      len++;
    }
    if(len<this.data.count){
      this.setData({btn_disabled:true});
    }else{
      this.setData({btn_disabled:false});
    }
  },
  // change:function(e){
  //   console.log(e);
  //   if(e.detail.source=='touch'){
  //     this.setData({currentid:e.detail.current})
  //   }
  // },
  //下一页
  next:function(e){
    var index=this.data.currentid;
    index++;
    if(index>=this.data.count){
      index=0;
    }
    this.setData({currentid:index});
  },
  //提交
  mysubmit:function(){
    // console.log(this.data.answer);
    // console.log(this.data.score);
    //计算分值
    var _score=0;
    for(var i in this.data.score){
      _score+=parseInt(this.data.score[i]);
    }
    if(_score<70 && this.data.message==''){
      this.setData({show_swiper:false,show_message:true});
      return;
    }
    // console.log(_score);
    // 学生信息
    var student=wx.getStorageSync('student');
    var _student={no:student.no,name:student.name,classid:student.classsid};
    console.log(_student);
    wx.request({
      url: '',
      method:'POST',
      data:{
        pjid:this.data.teachername.pjid,
        testpaperid:this.data.teachername.testpaperid,
        message:'',
        answer:JSON.stringify(this.data.answer),
        student:JSON.stringify(_student),
        score:_score
      },
 
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        // console.log(res.data);
       
        wx.showToast({
          title:res.data[0],
          icon: 'none',
          duration: 2000,
          success: function () {
            setTimeout(function () {
              wx.navigateBack({ delta: 1 })
            }, 2000)
          }
        })
       
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // var testpaperid = options.testpaperid;
    // console.log(id);
    var id=options.id;
      console.log(id);
    var student = wx.getStorageSync('student');
    var id=student.id;
    var no=student.no;
    var url = '';

    wx.request({
      url: url,
      data: {
        id:options.id,
        no:options.no
      },
      header: {
        'content-type': 'application/json' // 默认值
      },
      success: (res) => {
       console.log(res.data);
       if(res.data.error){
        //  wx.navigateBack({
        //    dalta:1
        //  }),
        //  wx.showToast({
        //    title:res.data.errormsg,
        //    icon:'none',
        //    duration:2000,
        //    success:function(){
        //      setTimeout(function(){
        //         wx.navigateBack({delta:1})
        //      },2000)
        //    }
        //  })
         
       }else{
         this.setData({show:false});
        this.setData({
          details: res.data.data,
          teachername: res.data.pj,
          count:res.data.data.length         
          })
        // console.log(res.data.data.length);
       }
       
      }
     
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
  
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
  
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
  
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
  
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
  
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
  
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
  
  },
})

大家看了以上的代码不妨试试一试，一个好的程序员一定要刻苦的钻研，并且学习，借鉴其他人的一些技巧，所以大家要好好做一个好的码农。