目录
一.实现过程。
1.小程序页面实现。
使用picker组件选择题库,再选择题型进行答题,默认使用数据结构题库。答题过程,每答一题则进行判断正确性并打印,记录正确数和答题数,在最后一题答完时,输出正确率。简答题答案比较开放,所以不判断正误;多选题的判断思路是答案是否包含所有已选选项,是否答案的长度与所选选项数组的长度相等,如果都满足,则正确。实现效果如下图。
2.后端服务器。
使用springboot框架及mybatis框架进行开发,进行简单的数据库数据访问。以下是相关语句,根据题库id和题型进行查询。
二.总结
(1)遇到的问题。
- 选项如何拆分。刚开始,选项是用json格式存储的,但后台获取到之后,不能认为它是字符串,不能转换为json对象,网上搜了没结果。于是,直接将选项当做一个字符串,问题解决,同样实现了效果。只是格式不能很好调整。
- 请求域名的限制。一般来说,要去官网添加域名,但官网域名只能设置https开头的,不能直接添加本地后台的,故在微信小程序开发工具中设置,不检验域名。问题解决。
- 数据双向绑定。按先入为主的观念,认为绑定bindinput,使用e.detail.value,就能够获取到文本框输入的数据,但这样后台报错。在搜索过程中发现数据双向绑定问题,才意识到。故研究一下数据双向绑定,问题解决。
- 获取数据。获取data中定义的变量,用this.data.变量名。如果忘记了,直接用变量名调用,就会报没定义变量,这个错误还很难找出来。
(2)个人小总结。
- 该项目主要难点还是如何对页面进行设计,在什么地方使用变量获取数值,在逻辑上实现正确率的计算是比较主要的算法了,不难,但具体代码可能会出错,例如数据调用时,注意用this.data.变量名,不然一直报错,问题还找不到。
- 我认为比较有趣的地方:在跳转下一题的时候,把页面的数据改变一下,用户看起来就像进入了新页面,其实还是在同一个页面。
- 微信小程序页面设计比pc端简单。因为手机屏幕比较小,一般往下布局。所以我组件放上去,格式不用怎么调,只需要调一下间距,就可以很好看了。
三.css样式使用
1.并排的元素,可换行.
<view class="page">
<view class="page-title">请选择试题:</view>
<view class="flex-box">
<view class="flex-item">
<view class="item" style="background-color: greenyellow;"
bindtap="select">单选</view>
</view>
.pick{
text-align: center;
border: solid 1rpx;
margin: 0 40rpx;
}
.page-title {
padding-top: 20rpx;
padding-left: 40rpx;
font-size: 16px;
}
.flex-box {
display: flex;
align-items:center;
flex-wrap: wrap;
justify-content: space-between;
padding: 20rpx;
box-sizing:border-box;
}
.flex-item {
width: 50%;
height: 200rpx;
padding: 20rpx;
box-sizing:border-box;
}
.item {
width:100%;
height:100%;
border-radius:8rpx;
display: flex;
align-items:center;
justify-content: center;
color: #fff;
}
.item-last {
flex: 1;
}
四.常用API
1.请求
wx.request({
url: 'http://localhost:8080/selectFill',
data: {qbid: getApp().globalData.qbid},//请求参数
success: (res) =>{
console.log(res.data[0])
this.setData({
questionList: res.data
})
this.setData({
content: this.data.questionList[0].content
})
}
})
2.页面跳转
//跳转到tabBar页面
wx.switchTab({
url: '../index/index'
})
//跳转到普通页面
wx.navigateTo({
url: '../index/index'
})
3.弹窗
wx.showModal({
title: '提示',
content: '答题已完成!答题数为'+this.data.count+"。正确率为"+
this.data.trueCount/this.data.count*100+"%",//弹窗显示内容
success(res) {
//执行一些语句
}
})
4.提示
wx.showToast({
title: '正确!',
icon: 'none',
duration: 2000,
success: function(){
return;
}
})
5.导航条。
在app.json中添加。需要自己找图标。
"tabBar": {
"color": "#666666",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "答题"
},
{
"pagePath": "pages/people/people",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "个人中心"
}
]
},
6.全局变量。
//app.js
App({
globalData: {
qbid: 1
}
})
//其他js文件,获取数据
getApp().globalData.qbid
//修改数据
getApp().globalData.qbid = Number(e.detail.value) + 1//与this.setData不同
7.新建时,获得一个干净项目。
(1)请删除
app.js
中的代码,并创建默认
App
函
数;
(2)删除
app.wxss
中的代码;
(3)删除
logs
页面文件,并在
app.json
的
pages
中删除页面路径;
(4)保留
index页面,删除index.js,创建默
认
Page函数;删除index.wxml
中的代码