15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 考研刷题小程序云开发实战-页面设计与制作(题库首页、排名页、我的)

考研刷题小程序云开发实战-页面设计与制作(题库首页、排名页、我的)

时间:2023-09-08 12:18:01 | 来源:网站运营

时间:2023-09-08 12:18:01 来源:网站运营

考研刷题小程序云开发实战-页面设计与制作(题库首页、排名页、我的):

前言

为啥你的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、我的页排版布局演示(源码见仓库)


总结

这期的考研刷题小程序云开发实战,主要演示了整个页面的开发流程与配置,并对关键的地方进行了讲解,细枝末节可以详细看看代码即可,其实并不难。难就难在创意、设计与实现等一系列。价值区别在于,能看与好看、能用与好用。

关键词:设计,程序,实战

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭