考研出题小程序云开发-页面设计与制作（题库首页、排名页、我的）

前言为什么你的UI界面感觉很乱？对于小程序开发者，尤其是初级开发者或者初学者来说，排版质量是现阶段要考虑的核心问题，也就是细节。但是很多同学总是不太注意这个，总觉得可以用。做出来的界面极其丑陋，还谈什么用户体验！产品好看不好看真的很重要吗？你自己考虑一下。你不能通过漂亮来打造产品，但打造没有美感的产品往往会让事情变得更糟。因此，我设计制作了这款精致优质的考研题库小程序。1.创建和配置页面1.1。在pages文件夹下，新建home、rank、my三个文件夹，分别对应三页题库首页、ranking页、my页；1.2.每个文件夹包含这四个文件.js,.json,.wxml,.wxss1.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":"ExamBank"},{"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。专项考试或专项练习分四科。这里我使用stylegrid实现基本布局，col-2实现两行的排版效果，漂亮醒目的配色，加上一些style进行装饰，整体页面效果呈现简洁美观，符合具有个人极简风格。马克思原理共390题毛中特共210题思修共260题现代史共230题3.排名页面和我的3.1。排名页面布局布局演示（源码见仓库）3.2．我的页面布局布局demo（源码见仓库）总结了本期考研小程序的实战云开发。主要演示了整个页面的开发流程和配置，并对重点进行了说明。详细可以看代码详细介绍。其实并不难，难的是一系列的创意、设计和实现。价值的区别在于看得见、好看，能用还是用得好。