小程序页面设计模板代码（小程序页面设计模板工具）

投稿用户 • • 抖音开店 • 阅读 9

前言为啥你的UI界面感觉乱？对于小程序开发者来说，特别是对于初阶开发者或者初学者，排版的好坏是这个阶段核心要考虑的问题，也就是细节。但是不少同学总是在这个上面很不注重，总想着能用就行。做出来的界面异常难看，谈何用户体验！产品好不好看，真的重要吗？你自己仔细思考思考一下。唯有美观无法构建一款产品，但是打造一个毫无美感可言的产品

前言

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

小程序页面设计模板代码（小程序页面设计模板工具）

?

总结

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

创业项目群，学习操作 18个小项目，添加 微信：niuben22  备注：小项目！

本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 sumchina520@foxmail.com 举报，一经查实，本站将立刻删除。
如若转载，请注明出处：https://www.35chat.cn/47877.html
赞 (0)
投稿用户
0
上一篇 2023年2月25日 pm3:28:57
下一篇 2023年2月25日 pm3:44:24

相关推荐

  • 沙河店镇的抖音(河南省驻马店市驿城区沙河店镇****)

    有开通了抖店或者抖音商品橱窗的吗？想问下抖音电商后台怎么用呀？那?我也刚开通抖音小店，研究了几天抖音电商后台，算是对巨量百应和抖店罗盘有点了解吧。其实巨量百应是一个综合性开放服务平台，可以给达人、机构、商家等群体提供内容电商方面的帮助，比如你可以在上面看到达人管理、机构排行榜之类的功能，可以帮助我们更加省时省力地运营抖店，实现更好

    抖音开店 2022年10月5日
    21

  • 抖音探店公司抽佣比例是多少

    抖音音浪提现比例抖音短视频，是一款音乐创意短视频社交软件，由今日头条孵化，该软件于2016年9月20日上线，是一个面向全年龄的音乐短视频社区平台。用户可以通过这款软件选择歌曲，拍摄音乐短视频，形成自己的作品，会根据用户的爱好，来更新用户喜爱的视频。抖音提成比例是多少抖音直播的分成，个人开通的分成是

    抖音开店 2022年10月5日
    14

  • 关注的英文，什么叫粉丝什么叫关注

    很多朋友对于关注的英文和什么叫粉丝什么叫关注不太懂，今天就由小编来为大家分享，希望可以帮助到大家，下面一起来看看吧！什么叫粉丝什么叫关注关注是你关注别人当别人的粉丝，加粉丝是别人关注你！粉丝是一个汉语词语，也叫追星族。意思是崇拜某

    抖音开店 2023年12月3日
    2

  • 抖店平台商品(抖店平台商品查询)

    怎么在121店平台选购自己的商品开自己的小店呢？可以在他们TOP50里面选择呀，这些商品销量都是比较好的抖音卖货平台怎么收费？天下没有免费的午餐，任何平台的广告投放都是需要付费的，抖音也不例外。然而，抖音卖货的费

    抖音开店 2022年8月9日
    17

  • 型式检验是什么意思(消防产品型式检验报告有效期)

    大家好，今天给各位分享型式检验是什么意思的一些知识，其中也会对消防产品型式检验报告有效期进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！本文目录消防产品型式检验报告有效期请问特种设备(压力管道元件)型式试验报告有效期是多久班组

    抖音开店 2023年10月3日
    2

  • 抖音美食清淡店(有什么清淡的美食店)

    关于抖音的问题？1抖音是什么2为什么有些人唱歌的时候会有抖音3抖抖音的算法：第一，冷启动流量池曝光，抖音会随机给每个短视频分配一个平均曝光量的冷启动流量池；第二，数据挑选，抖音会从这100万个短视频的1000次曝光，分析点赞、关注、评论、转发等各个维度

    抖音开店 2022年8月9日
    18

  • 50万黄梅小吃店抖音(黄梅戏小吃店)

    如何申请抖音音乐人？抖音怎么弄抖音音乐人？如何申请抖音音乐人？抖音怎么弄抖音音乐人很多人并不熟悉也不会做音乐，那怎么办才能得到原创音乐呢？作者这里有音乐出，可抖音私信得。至于申请时需要用的资料也可抖音私我。申请所需时长则看官方审核的进度。从实名认证到审核通过我用了9天。很多人说他的申请能一次过，时间短，其实都是不现实的，就算实名审核不需要时间，音乐审核也需要时间，音乐人审核也需要时间关

    抖音开店 2022年9月21日
    16

  • 南半球有哪些国家，南半球的国家有哪些呢

    大家好，关于南半球有哪些国家很多朋友都还不太明白，不过没关系，因为今天小编就来为大家分享关于南半球的国家有哪些呢的知识点，相信应该可以解决大家的一些困惑和问题，如果碰巧可以解决您的问题，还望关注下本站哦，希望对各位有所帮助！本文目录南半球的国家有哪些呢哪些国家属于南半球在南半球的国家有哪些南半球的国家有哪些呢1.南半球的国家包括南极洲及其周边的国家，如南非、澳大利亚、新西兰、阿

    抖音开店 2023年7月24日
    2
  • 爱你爱到蒙查查是什么意思（我爱蒙查查） 抖音开店

    爱你爱到蒙查查是什么意思（我爱蒙查查）

    “萌查查”带着它专业又有趣的农业百宝箱走来啦！“萌查查”是谁？它是南方农村报首个农业科普动画形象IP，一个试图靠开箱读懂农业农村的拟人化放大镜，呆萌有趣、好奇心强。以“‘萌查查’不‘蒙查查’（粤语，指犯迷糊）”为口号，萌查查立志要用放大镜的特质，挖掘人类世界各个

    2023年2月1日
    7
  • 长期净值型理财产品会亏吗（定期净值型理财产品有风险吗） 抖音开店

    长期净值型理财产品会亏吗（定期净值型理财产品有风险吗）

    对于购买净值型理财的人来说，从买入的那一刻起，就应该做好亏损的可能了。不过，当自己买的理财产品真的出现亏损时，却还是难以接受。尤其是买了定期理财的人，想要把理财产品赎回都赎回不了。这个时候要怎么办呢？会不会把本金亏光？净值型的定期理财产品跌了怎么办？首先，对于净值型理财来说，有涨就会有跌

    2023年3月14日
    4