微信小程序-枯木学习笔记6-考试页面

功能：考试页面

由tabBar转入考试页面exam，
后台java读取科目分类，页面展现科目分类
用户点击分类，根据选择的科目分类创建试卷，并转向考试页面 paper

界面原型

app.json

{
  "pages":[
    "pages/index/index",
    "pages/home/home",  
    "pages/my/my",      
    "pages/exam/exam",
    "pages/paper/paper",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "在线考试系统",
    "navigationBarTextStyle":"black"
  },
  "tabBar": {
      "backgroundColor": "#563624",
      "color": "#ffff",
      "list": [
          {
            "pagePath":"pages/home/home",
            "text":"首页"
          },
          {
              "pagePath": "pages/exam/exam",
              "text": "考试"
          },
          {
              "pagePath": "pages/my/my",
              "text": "我的"
          }
      ]
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

exam.wxml

<view>
    <view style="text-align: center;color: red;">
        <text>请选择要考试的科目</text>
    </view>
    <view wx:for="{{courseList}}" wx:key="index">
        <button class="btnCourse" bindtap="getPaperById" data-id="{{item.id}}">{{index+1}}-{{item.courseName}}</button>
    </view>
</view>

exam.wxss

.btnCourse{
    margin: 10px;
    background-color:goldenrod;
}

exam.js

const app = getApp();
const myhost = app.globalData.myhost;

Page({
    data: {
        courseList: []
    },
    onLoad(options) {
        wx.request({
          url: myhost + '/course/findAll',
          method: 'POST',
          success: (res) => {
            //console.log(res.data)
            this.setData({
                courseList: res.data
            })
          },
          fail(err){
            console.log(err)
          }

        })
    },
    getPaperById: function(evt){
        var id = evt.currentTarget.dataset.id;
        console.log("course id:"+ id);

        wx.navigateTo({
          url: '/pages/paper/paper?id=' + id,
        })
    }
})