小程序虽小,但是它的制作和处理也是有一点麻烦的,尤其是数据处理这一方面,可以说是很多同学的苦恼,对此我刚学的来和大家分享一下。
我在这里通过问卷的代码的格式来给大家介绍,首先新建一个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 () { }, })
大家看了以上的代码不妨试试一试,一个好的程序员一定要刻苦的钻研,并且学习,借鉴其他人的一些技巧,所以大家要好好做一个好的码农。