关于javascript:考研刷题小程序云开发实战页面设计与制作题库首页排名页我的

38次阅读

共计 2402 个字符,预计需要花费 7 分钟才能阅读完成。

前言

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

总结

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

正文完
 0