为什么你的UI感觉很乱？对于小程序开发者来说，尤其是新手或者初学者，排版质量是现阶段要考虑的核心问题，也就是细节。但是很多同学总是不太重视，总以为可以用。做出来的界面很难看，用户体验呢！

产品好不好真的很重要吗？你自己想想吧。想想吧。

只有美并不能打造一个产品，但是创造一个没有美的产品往往会让情况变得更糟。所以我设计制作了这个精致优质的考研题库小程序。

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" } } 复制代码

{ & # 34；页数& # 34；:[ & # 34；pages/home/home & # 34；， & # 34；页数/排名/排名& # 34；， & # 34；pages/my/my & # 34； ]， & # 34；tabBar & # 34:{ & # 34；color & # 34: "# aaa & # 34， & # 34；选择颜色& # 34；: "# ffa517 & # 34， & # 34；borderStyle & # 34: "黑色& # 34；， & # 34；backgroundColor & # 34: "# ffffff & # 34， & # 34；列表& # 34；:[ { & # 34；pagePath & # 34: "pages/home/home & # 34；， & # 34；iconPath & # 34: "/image/sy2 . png & # 34；， & # 34；选择selectedIconPath & # 34: "/image/sy2-a . png & # 34；， & # 34；正文& # 34；: "题库& # 34； }， { & # 34；pagePath & # 34: "页数/排名/排名& # 34；， & # 34；iconPath & # 34: "/image/zxly 2 . png & # 34；， & # 34；选择selectedIconPath & # 34: "/image/zxly 2-a . png & # 34；， & # 34；正文& # 34；: "排名& # 34； }， { & # 34；pagePath & # 34: "pages/my/my & # 34；， & # 34；iconPath & # 34: "/image/wd2 . png & # 34；， & # 34；选择selectedIconPath & # 34: "/image/wd2-a . png & # 34；， & # 34；正文& # 34；: "我的& # 34； } ] }， & # 34；window & # 34:{ & # 34；backgroundTextStyle & # 34: "光& # 34；， & # 34；navigationBarBackgroundColor & # 34；: "# fff & # 34， & # 34；navigationBarTitleText & # 34: "考研小博士& # 34；， & # 34；navigationBarTextStyle & # 34: "黑色& # 34； } } 复制代码

​

2.1.场景是经常会有考研相关信息或者答题兑换活动，需要丰富的轮播广告进行展示。Swiper组件用于实现轮播图的效果，其中图片标签用于显示图片，mode = & # 39aspectFill & # 39实现100%全屏宽度效果，代码如下:

& ltswiper class = & # 34刷屏& # 34；自动播放= & # 34；真& # 34；interval = & # 345000"持续时间= & # 34；500"& gt & lt；swiper-item & gt； & lt；image src = & # 34/image/B2-y . jpg & # 34；mode = & # 39aspectFill & # 39& gt& lt/image & gt； & lt；/swiper-item & gt； & lt；/swiper & gt； 抄码2.2，专项考试或专项练习，分四科。这里我用style grid实现基本布局，col-2实现两行的排版效果，漂亮抢眼的配色，加上一些风格的修饰，整体页面效果简洁美观，符合个人极简主义的风格。

& lt查看class = & # 39网格col-2填充-左-短填充-右-短& # 39；& gt & lt；查看class = & # 39填充-sm & # 39；bindtap = & # 34goToAnswer & # 34数据类别= & # 34；马克思的原则& # 34；& gt & lt；查看class = & # 39背景-黄色填充半径阴影-扭曲& # 39；& gt & lt；view class = & # 34正文-LG & # 34；& gt马克思的原则

​

3.2.我的页面布局演示(源代码见仓库)

​

这一期的考研刷小程序云开发实战，主要演示了整个页面的开发流程和配置，并讲解了关键的地方，细节可以详细看代码，但并不难。难点在于创意、设计和实现。区别就在于能看得见，好看，能用，好用。