目录
前言
1、创建并配置页面
2、题库首页
3、排名页和我的
总结
前言为啥你的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%满屏效果，代码如下：
2.2、专项考试或者专项练习，按四个科目分类，我这里使用了样式grid实现基本布局，col-2实现两个一行的排版效果，靓丽抢眼的颜色搭配，外加一些样式进行修饰，整体页面效果呈现为简洁美观，符合个人极简主义的风格。
马克思原理 共390题 毛中特 共210题 思修 共260题 近代史 共230题 3、排名页和我的3.1、排名页排版布局演示（源码见仓库）
3.2、我的页排版布局演示（源码见仓库）
总结这期的考研刷题小程序云开发实战，主要演示了整个页面的开发流程与配置，并对关键的地方进行了讲解，细枝末节可以详细看看代码即可，其实并不难。难就难在创意、设计与实现等一系列。价值区别在于，能看与好看、能用与好用。