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

Posted 2022-06-24 长安紫薯

功能：考试页面

由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,
        )
    
)