Cloud development practice of the small program for brushing questions in the postgraduate entrance examination - page design and production (home page of the question bank, ranking page, my)

Preface

Why your UI The interface feels messy ？ For applet developers , Especially for beginner developers or beginners , The quality of typesetting is the key consideration at this stage , That's the details . But many students always pay little attention to this , Always think it can be used . The interface is very ugly , Talk about user experience ！
How nice the product is , Is it really important ？ Think it over for yourself .
Only beauty cannot build a product , But creating a product that has no sense of beauty often makes things worse . therefore , I designed and made this exquisite and high-quality postgraduate entrance examination question bank applet .

1、 Create and configure pages

1.1、 stay pages In the folder , Create three separate folders home、rank、my, Corresponding to three pages respectively, the first page of the question bank 、 Leaderboard page 、 My page ;

1.2、 Each folder contains these four files .js、.json、.wxml、.wxss

1.3 stay app.json Middle configuration pages and tabBar, The code is as follows ：

{
  "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": " Question bank "
      },
      {
        "pagePath": "pages/rank/rank",
        "iconPath": "/image/zxly2.png",
        "selectedIconPath": "/image/zxly2-a.png",
        "text": " ranking "
      },
      {
        "pagePath": "pages/my/my",
        "iconPath": "/image/wd2.png",
        "selectedIconPath": "/image/wd2-a.png",
        "text": " my "
      }
    ]
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": " I'm a little doctor ",
    "navigationBarTextStyle": "black"
  }
}

2、 Home question bank

2.1、 The scene is that there are often information related to postgraduate entrance examination or question answering discount exchange activities , There needs to be a wealth of rotating advertisements for display . Used swiper Component to achieve the effect of carousel map , It uses image Label display picture , And set up mode='aspectFill' Reach width 100% Full screen effect , The code is as follows ：

<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、 Special examination or special practice , Classified by four subjects , I use the style here grid Realize the basic layout ,col-2 Realize the typesetting effect of two lines , Beautiful and eye-catching color matching , Add some styles to decorate , The overall page effect is simple and beautiful , In line with the style of personal minimalism .

<view class='grid col-2 padding-left-sm padding-right-sm'>
      <view class='padding-sm' bindtap="goToAnswer" data-category=" Marx's principle ">
        <view class='bg-yellow padding radius shadow-warp'>
          <view class="text-lg"> Marx's principle </view>
          <view class='margin-top-sm text-Abc'> common 390 topic </view>
        </view>
      </view>
      <view class='padding-sm' bindtap="goToAnswer" data-category=" Mao ZHONGTE ">
        <view class='bg-orange padding radius shadow-warp'>
          <view class="text-lg"> Mao ZHONGTE </view>
          <view class='margin-top-sm text-Abc'> common 210 topic </view>
        </view>
      </view>
      <view class='padding-sm' bindtap="goToAnswer" data-category=" Sixiu ">
        <view class='bg-olive padding radius shadow-warp'>
          <view class="text-lg"> Sixiu </view>
          <view class='margin-top-sm text-Abc'> common 260 topic </view>
        </view>
      </view>
      <view class='padding-sm' bindtap="goToAnswer" data-category=" Modern history ">
        <view class='bg-orange padding radius shadow-warp'>
          <view class="text-lg"> Modern history </view>
          <view class='margin-top-sm text-Abc'> common 230 topic </view>
        </view>
      </view>
    </view>

3、 Ranking page and my

3.1、 Ranking page layout presentation （ See the warehouse for the source code ）

3.2、 My page layout Demo （ See the warehouse for the source code ）

summary

This period's postgraduate entrance examination question brushing applet cloud development practice , It mainly demonstrates the development process and configuration of the whole page , And explained the key points , For details, you can take a detailed look at the code , It's not hard . The difficulty lies in creativity 、 Design and implementation . The difference in value is , Can see and look good 、 Can use and easy to use .