微信小程序学习(一)心理测试题库改造

2021年9月6日 9点热度 0条评论 来源: 星宇痕

文章目录

前言

  学微信小程序课程学到题库开发,正好看到个考研模型,相似度比较高,就起了魔改一番的心思

一、分析

1、原项目为了丰富题库,有题号和选项双随机的功能,但在考研目标建议上没有必要,砍掉
2、原项目ABC的分值固定,只要统计ABC的个数即可,但考研目标里不同题目的同一选项分值可能不确定。暂定为修改题库,增加选项对应分值
3、原项目采用一个选项绑定一个函数的做法,比较麻烦,可以简化成一个函数

二、行动

1、修改题库

globalData: { 
	userInfo: "hello",
	question: [
		{  "question": "关于学习能力,以下哪种情况最符合你?", "option": {  "A": "学习时不知道如何着手,很恐慌", "B": "自己学起来还好或者需要有人辅导和监督", "C": "只要给我资料、视频和书,我全部可以自己学", "D": "我学什么东西都很快,所有考试学一段时间都觉得没问题"}, "score": {  "A": -1, "B": 0, "C": 1, "D": 2 } }, 
		{  "question": "关于考研投入,以下哪种情况最符合你?", "option": {  "A": "一边找工作/实习,一边考研,或者每天花5小时以下", "B": "正常准备,没课时基本都在复习", "C": "全心投入,平均每天差不多花8小时复习,偶尔放松,放假也如此", "D": "超常投入,平均每天花10个小时左右甚至更久,杜绝考研以外活动" }, "score": {  "A": -1, "B": 0, "C": 1, "D": 0 } }, 
		{  "question": "关于心理素质,以下哪种情况最符合你?", "option": {  "A": "我害怕考试,每次大考都考得比正常水平差", "B": "考试有些紧张,但基本都能发挥正常水平", "C": "我是考试型选手,越到关键时刻发挥越好" }, "score": {  "A": -1, "B": 0, "C": 1 } }, 
		{  "question": "关于本科院校,以下哪种情况最符合你?", "option": {  "A": "专科院校", "B": "二三本院校", "C": "一本院校", "D": "211院校", "E": "985院校", "F": "顶尖985院校" }, "score": {  "A": 1, "B": 2, "C": 3, "D": 4, "E": 5, "F": 6 } }
	]
}

  对字典的key-value格式更有感觉了,而且还可以并列嵌套。引用格式app.globalData.question[0].question或app.globalData.question[0].option[“A”],value等于.name等效于[‘name’]
  报错Property assignment expected,后面发现是key-value没有严格对应,少了个}

2、修改函数

js内容

data: { 
	index: 0,
	scoresum: 0,
	questionDetail: app.globalData.question[0].question,
	answerA: app.globalData.question[0].option["A"],
	answerB: app.globalData.question[0].option.B,
	answerC: app.globalData.question[0].option.C,
	answerD: app.globalData.question[0].option.D,
	answerE: app.globalData.question[0].option.E,
	answerF: app.globalData.question[0].option.F,
},

answerClick: function (e) { 
	var ans = e.currentTarget.dataset.which;
	this.data.scoresum = this.data.scoresum + app.globalData.question[this.data.index].score[ans];
	console.log(this.data.scoresum);
	this.setData({ 
		index: this.data.index + 1, 
	})
	if (this.data.index == 4) { 
		wx.redirectTo({ 
			url: '/pages/result/result?sum=' + this.data.scoresum,
		})
	}
	else{ 
		this.setData({ 
			questionDetail: app.globalData.question[this.data.index].question,
			answerA: app.globalData.question[this.data.index].option["A"],
			answerB: app.globalData.question[this.data.index].option["B"],
			answerC: app.globalData.question[this.data.index].option["C"],
			answerD: app.globalData.question[this.data.index].option["D"],
			answerE: app.globalData.question[this.data.index].option["E"],
			answerF: app.globalData.question[this.data.index].option["F"],
		})
	} 
},

wxml内容

<view url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active" bindtap='answerClick' data-which="A">
                <view class="weui-cell__bd">A{ { answerA}}</view>
                <view class="weui-cell__ft weui-cell__ft_in-access"></view>
</view>

三、收获

  其实收获很少,疑问倒是一大堆,毕竟可以说是没有任何前端基础。

  1. get到了bindtap函数传参,在view里增加data-name=“value”,js函数使用var ans = e.currentTarget.dataset.name; 来获取value值的方法
  2. 在test.js里看到了页面周期函数,可以监听用户的各种行为并做出动作,预留好了等待扩展
  3. 前端编程的感触,内容靠HTML,样式布局靠CSS,逻辑功能靠js

  一些疑问

  1. answerClick: function (e) {} 里的e是类似于Python里的self吗?
  2. 赋值方法有name : value,var name = value,name=value和this.setData(name1 : this.data.name2),一团乱,各自的应用场所?
  3. 函数定义和调用,都和这个: 有关系。调用跟Python的functionA(arg1= xxx, arg2 =xxx)的类似?可以看成一个字典,然后是name : value,果然有大括号
  4. 让人头疼的变量引用方法,app.globalData.question[0].question,app.globalData.question[0].option[“A”],this.data.index,{ {answerA}},涉及到变量的作用域?有时间看一下官方文档
  5. 有点迷的页面结构,HTML和CSS还好,这个js开头就来一个Page啥意思?难道也是一个函数?不过这回的参数变成了一个字典?所以要加大括号,因为不止一对key-value?所以onload之类的本质也是一个变量,函数体是它的值?难怪用,隔开
const app = getApp()
Page({ 
  data: { 
  },
  beginAnswer: function() { 
    wx.navigateTo({ 
      url: '../test/test'
    })
  },
  onLoad: function () { 
  },
  getUserInfo: function(e) { 
  }
})

四、扩展

  • 1、界面美化,加入CSS样式
  • 2、json里放数据可以吗?
  • 3、点击下一题再跳转
  • 4、使用单选框

五、引用

心理测试小程序

    原文作者:星宇痕
    原文地址: https://blog.csdn.net/qq_40822405/article/details/104450585
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。