在线答题微信小程序

目录

一.实现过程。

1.小程序页面实现。

2.后端服务器。

二.总结

(1)遇到的问题。

（2）个人小总结。

三.css样式使用

 四.常用API

1.请求

 2.页面跳转

3.弹窗

4.提示

 5.导航条。

 6.全局变量。

7.新建时，获得一个干净项目。

---

一.实现过程。

1.小程序页面实现。

使用picker组件选择题库，再选择题型进行答题，默认使用数据结构题库。答题过程，每答一题则进行判断正确性并打印，记录正确数和答题数，在最后一题答完时，输出正确率。简答题答案比较开放，所以不判断正误；多选题的判断思路是答案是否包含所有已选选项，是否答案的长度与所选选项数组的长度相等，如果都满足，则正确。实现效果如下图。

 

2.后端服务器。

使用springboot框架及mybatis框架进行开发，进行简单的数据库数据访问。以下是相关语句，根据题库id和题型进行查询。

 

二.总结

(1)遇到的问题。

1. 选项如何拆分。刚开始，选项是用json格式存储的，但后台获取到之后，不能认为它是字符串，不能转换为json对象，网上搜了没结果。于是，直接将选项当做一个字符串，问题解决，同样实现了效果。只是格式不能很好调整。
2. 请求域名的限制。一般来说，要去官网添加域名，但官网域名只能设置https开头的，不能直接添加本地后台的，故在微信小程序开发工具中设置，不检验域名。问题解决。
3. 数据双向绑定。按先入为主的观念，认为绑定bindinput,使用e.detail.value,就能够获取到文本框输入的数据，但这样后台报错。在搜索过程中发现数据双向绑定问题，才意识到。故研究一下数据双向绑定，问题解决。
4. 获取数据。获取data中定义的变量，用this.data.变量名。如果忘记了，直接用变量名调用，就会报没定义变量，这个错误还很难找出来。

（2）个人小总结。

1. 该项目主要难点还是如何对页面进行设计，在什么地方使用变量获取数值，在逻辑上实现正确率的计算是比较主要的算法了，不难，但具体代码可能会出错，例如数据调用时，注意用this.data.变量名，不然一直报错，问题还找不到。
2. 我认为比较有趣的地方：在跳转下一题的时候，把页面的数据改变一下，用户看起来就像进入了新页面，其实还是在同一个页面。
3. 微信小程序页面设计比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 中的代码