前言

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

一、分析

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>

三、收获

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

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

一些疑问

answerClick: function (e) {} 里的e是类似于Python里的self吗？
赋值方法有name : value，var name = value，name=value和this.setData（name1 : this.data.name2），一团乱，各自的应用场所？
函数定义和调用，都和这个: 有关系。调用跟Python的functionA(arg1= xxx, arg2 =xxx)的类似？可以看成一个字典，然后是name ： value，果然有大括号
让人头疼的变量引用方法，app.globalData.question[0].question，app.globalData.question[0].option[“A”]，this.data.index，{{answerA}}，涉及到变量的作用域？有时间看一下官方文档
有点迷的页面结构，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、使用单选框

五、引用

心理测试小程序

微信小程序学习（一）心理测试题库改造相关推荐

自己的微信小程序学习笔记【3】——第三方UI库Lin-Ui的加载及使用
其他微信小程序的学习笔记自己的微信小程序学习笔记[1]--小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记[2]--从零开始新建项目文章目录其他微信小程序的学习笔记前言一.Lin ...
小程序源码：网课查题微信小程序源码下载,题库资源丰富自动采集，支持语音拍照识别
这是一款网课查题微信小程序源码题库资源丰富自动采集, 支持语音拍照识别该款采用接口方式,所以题库自动全网采集而且该款小程序无需服务器和域名即可搭建大家解压源码然后使用微信开发者工具打开源码然 ...
微信小程序学习笔记一 + 小程序介绍前置知识
微信小程序学习笔记一 1. 什么是小程序? 2017年度百度百科十大热词之一微信小程序, 简称小程序, 英文名 Mini Program, 是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是 ...
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...
微信小程序中使用vant组件库（超详细）
目录前言 Vant Weapp的安装与使用 1.安装 node.js 2.通过 npm 安装 3.修改 app.json 4.修改 project.config.json 5.构建 npm 包 6. ...
微信小程序学习（四）：微信小程序连接云数据库
微信小程序学习(四):微信小程序连接云数据库我今天就只是初步的连接了数据库,我就说一下我的基础代码,和我整了好久才整完的问题这里有个初始化,非常重要!非常重要!非常重要!!! 是放在app.js里 ...
微信小程序学习（加深）
微信小程序学习(加深) 一.wx:if 与 hidden 的对比 wx:if 以动态创建和移除元素的方式,控制元素的展示与隐藏 hidden 以切换样式的方式(display: none/block; ...
微信小程序学习实录1(wxml文档、引入weui、双向数据绑定、提交表单到后端)
微信小程序学习实录一.wxml文档二.新建页面快捷方式三.微信小程序引入weui 四.双向数据绑定 1.wxml渲染层 2.js逻辑层提交表单到后端五.微信小程序跳转到H5 一.wxml文档 ...
微信小程序学习日志（一）
微信小程序学习日志之工具配置及创建简单页面 1.任务与分工在这次点餐系统项目中,我和我所在的小程序组的共三个成员主要负责小程序前端的实现.我们针对菜单,点菜清单(结算页面)以及评论三个主要页面进行了 ...

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

文章目录

前言