在线答题小程序项目搭建

以下学习的是GITEE上的开源项目

https://gitee.com/uemeng/open_answer_small_program/tree/master
和
https://gitee.com/huangrongji/xiaotikulite

微信官方文档

https://developers.weixin.qq.com/miniprogram/dev/framework/

额外增加了轮播图

在/pages/home/home.js加入

// pages/home/home.js
Page({
  data: {
       //   新增代码  
       indicatordots: true,/*加入图标指示点*/  
       autoplay: true,/*自动切换图片开关*/  
       interval: 5000,   /*切换时间属性5000=5秒*/  
       //   新增代码  
  },
  onLoad: function (options) {

  },
  toTestPage: function(e){
    let testId = e.currentTarget.dataset['testid'];
    wx.navigateTo({
      url: '../test/test?testId='+testId
    })
  }
})

在/pages/home/home.wxml加入

<!--pages/home/home.wxml-->
<view class="page">
    <!-- 新增代码  -->
    <view class="news1-container">   
         <swiper indicator-dots="{{indicatordots}}" autoplay="{{autoplay}}" interval="{{interval}}">                
                <swiper-item>    
                    <!-- 在pages下新建images文件夹用于存放轮播图片     -->
                    <image class="logo"src="/pages/images/01.jpg"></image>  
               </swiper-item>         
                <swiper-item>    
                    <image class="logo"src="/pages/images/02.jpg"></image>     
                </swiper-item>         
                 <swiper-item>    
                    <image class="logo"src="/pages/images/03.jpg"></image>     
                </swiper-item>        
          </swiper> 
     </view> 
     <!-- 新增代码  -->
   <view class="page-title">请选择试题：</view>
  <view class="flex-box">
    <view class="flex-item"><view class="item bc_green" bindtap="toTestPage" data-testId="101-1">101-1</view></view>
    <view class="flex-item"><view class="item bc_red" bindtap="toTestPage" data-testId="101-2">101-2</view></view>
    <view class="flex-item"><view class="item bc_yellow" bindtap="toTestPage" data-testId="102">102</view></view>
    <view class="flex-item"><view class="item bc_blue" bindtap="toTestPage" data-testId="104">104</view></view>
    <view class="flex-item item-last"><view class="item bc_green" bindtap="toTestPage" data-testId="301-302">301-302</view></view>
    <!-- <view class="flex-item"><view class="item bc_green">302</view></view> -->
  </view>
</view>

在/pages/home/home.wxss加入

/* pages/home/home.wxss */
.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;
}
/*   新增代码   */
.news1-container swiper{    
    width: 100%;    
    height: calc(100vw*442/810);
}
image{   
    width: 100%;
}
/*   新增代码   */

注意：如果轮播的图片大的话，可以压缩一下