前言
为啥你的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>3、排名页和我的
3.1、排名页排版布局演示（源码见仓库）
3.2、我的页排版布局演示（源码见仓库）
总结
这期的考研刷题小程序云开发实战，次要演示了整个页面的开发流程与配置，并对要害的中央进行了解说，细枝末节能够具体看看代码即可，其实并不难。难就难在创意、设计与实现等一系列。价值区别在于，能看与难看、能用与好用。