置顶考研刷题小程序云开发实战-页面设计与制作（题库首页、排名页、我的）精选热门

2022-02-18

1019浏览

0评论

为啥你的UI界面感觉乱？对于小程序开发者来说，特别是对于初阶开发者或者初学者，排版的好坏是这个阶段核心要考虑的问题，也就是细节。但是不少同学总是在这个上面很不注重，总想着能用就行。做出来的界面....

前言

为啥你的UI界面感觉乱？对于小程序开发者来说，特别是对于初阶开发者或者初学者，排版的好坏是这个阶段核心要考虑的问题，也就是细节。但是不少同学总是在这个上面很不注重，总想着能用就行。做出来的界面异常难看，谈何用户体验！

产品好不好看，真的重要吗？你自己仔细思考思考一下。

唯有美观无法构建一款产品，但是打造一个毫无美感可言的产品往往会让情况变得更加糟糕。所以，我设计并制作了这款精美优质的考研题库小程序。

1、创建并配置页面

1.1、在pages文件夹中，分别创建三个文件夹home、rank、my，分别对应三个页面题库首页、排行榜页、我的页；

1.2、每个文件夹分别包含这四个文件.js、.json、.wxml、.wxss

1.3在app.json中配置pages和tabBar，代码如下：

{
  "pages": [
    "pages/home/home",
    "pages/rank/rank",
    "pages/my/my"
  ],
  "tabBar": {
    "color": "#aaa",
    "selectedColor": "#ffa517",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "/image/sy2.png",
        "selectedIconPath": "/image/sy2-a.png",
        "text": "题库"
      },
      {
        "pagePath": "pages/rank/rank",
        "iconPath": "/image/zxly2.png",
        "selectedIconPath": "/image/zxly2-a.png",
        "text": "排名"
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "/image/wd2.png",
        "selectedIconPath": "/image/wd2-a.png",
        "text": "我的"
      }
    ]
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "考研刷题小博士",
    "navigationBarTextStyle": "black"
  }
}

2、题库首页

2.1、场景是往往会有考研相关资讯或者答题优惠兑换活动，需要有丰富的轮播广告作为展示。使用了swiper组件实现轮播图效果，里面使用了image标签展示图片，并设置mode='aspectFill'达到宽度100%满屏效果，代码如下：

<swiper class="screen-swiper" autoplay="true" interval="5000" duration="500">
    <swiper-item>
      <image src="/image/b2-y.jpg" mode='aspectFill'></image>
    </swiper-item>
  </swiper>

2.2、专项考试或者专项练习，按四个科目分类，我这里使用了样式grid实现基本布局，col-2实现两个一行的排版效果，靓丽抢眼的颜色搭配，外加一些样式进行修饰，整体页面效果呈现为简洁美观，符合个人极简主义的风格。

<view class='grid col-2 padding-left-sm padding-right-sm'>
      <view class='padding-sm' bindtap="goToAnswer" data-category="马克思原理">
        <view class='bg-yellow padding radius shadow-warp'>
          <view class="text-lg">马克思原理</view>
          <view class='margin-top-sm text-Abc'>共390题</view>
        </view>
      </view>
      <view class='padding-sm' bindtap="goToAnswer" data-category="毛中特">
        <view class='bg-orange padding radius shadow-warp'>
          <view class="text-lg">毛中特</view>
          <view class='margin-top-sm text-Abc'>共210题</view>
        </view>
      </view>
      <view class='padding-sm' bindtap="goToAnswer" data-category="思修">
        <view class='bg-olive padding radius shadow-warp'>
          <view class="text-lg">思修</view>
          <view class='margin-top-sm text-Abc'>共260题</view>
        </view>
      </view>
      <view class='padding-sm' bindtap="goToAnswer" data-category="近代史">
        <view class='bg-orange padding radius shadow-warp'>
          <view class="text-lg">近代史</view>
          <view class='margin-top-sm text-Abc'>共230题</view>
        </view>
      </view>
    </view>