小程序 block_从0到1造个小程序 实战篇1：首页页面设计

点击上方“水之Coding工房”并关注，更多好玩的等着你~ 大家好，我是本公众号唯一御用小编， 水水是也！

今天给大家带来的是学习专题——从0到1造个小程序 的实战篇1：首页页面样式设计。

上一篇推文主要主要把我们接下来要实战的小程序——「时间管理小助手」进行了功能上&页面跳转&使用流程上进行了简单的讲解和演示。那么问题来了，知道要做什么以后，我们应该从何入手，怎么去做呢？那么本专题的实战篇章，将带你一步步、从无到有地开发出一款小程序。那么对于本篇——实战篇的第一篇，当然就是对首页页面进行样式的设计啦！

本文主要分为3个部分，主要分为创建项目&整理目录结构、首页页面框架布局设计、首页页面展示样式设计。

那么接下来，我们就一点点地开始吧~

1. 创建项目&整理目录结构

首先，打开微信开发者工具(如果是第一次打开或者登录过期都会提示扫码登录，这时候直接扫码登录即可)。

P.S. 如果不知道微信开发者工具的话，建议看看【从0到1造个小程序 · 基础篇2：开发前的准备工作】这篇推文按照提示下载安装就可以拥有属于你自己的开发者工具啦！

打开工具登录后，就会弹出如下图所示的一个小窗口，既然我们是要开发小程序的话，那就当然选择左侧菜单栏的「小程序」，再选择旁边大大的 「+」 按钮，打开创建项目对话框。

小窗口

到达新建项目对话框后，我们可以按照自己的兴趣，给自己小程序项目起个名字，例如水水的话，就起了my-first-miniprogamme这个如图所示的名字啦！然后选择目录的话，最好是选择一个空的文件夹作为你的小程序项目的存放路径，而下方的AppID的话，就是在基础篇中所提及到的那个AppID啦，具体获取方式可见【从0到1造个小程序 · 基础篇2：开发前的准备工作】。找到自己的AppID填入以后，「后端服务」选择小程序·云开发，然后点击对话框右下方的创建按钮，即可完成小程序项目的初始化创建啦！

新建项目对话框

等待小程序完成初始化以后，就会展示如下图这样子的一个开发页啦！至此，创建初始化小程序项目就完成了。如果有对该工具的开发界面不熟悉的话，同样可以在我们的基础篇章【从0到1造个小程序 · 基础篇2：开发前的准备工作】中进行回顾。

开发界面

那么问题来了，看着模拟器的页面展示和我们要造的时间管理小助手都不一样啊，那该怎么办啊？所以接下来，我们需要将初始化好了的项目模板进行定制化，也就是要把一些目录结构进行整理，好为我们接下来的开发有序进行。

就按照刚刚初始化好的项目模板，第一个cloudfunctions我们先不管它，相信大家都有注意到miniprogam文件夹下的几个目录，

初始化目录结构

❝

小程序的目录结构，一般包含一个描述整体程序的 app 和多个描述各自页面的 page，各个page页面则都放在pages文件夹下进行方便管理。

一个小程序主体部分由三个文件组成，必须放在项目的根目录，如下：

一个小程序页面由四个文件组成，分别是：

「注意：为了方便减少开发时的各种配置，描述页面的四个文件必须具有相同的路径与文件名。」

其次为了方便后续的开发以及代码的复用，我们一般还会创建以下几个文件夹便于区分文件：

• components: 存放小程序页面中可用于各个页面中展示的组件，便于代码和样式的复用；
• config：顾名思义，也就是放置配置项文件的文件夹；
• images：放置小程序所需要的图片素材；
• libs：放置基础以及小程序所需要的依赖类库；
• models：小程序中所需要用到的抽象化的对象类，这里可以理解为是将一些多处会用到的代码进行分门别类地抽取出来，方便复用；
• utils：存放小程序所需要的工具类；

❞

So...我们就按照上面所说的，创建以上的6个文件夹(初始化项目模板中已有的文件夹的话也建议先删除，再重新创建，避免后续不必要的麻烦)。文件夹目录整理完成后，应该就是这个样子的。

定制化后的目录结构

2. 首页页面框架布局设计

那么如题所示，我们接下来要做的是把首页页面框架设计出来。因此我们就要在pages文件夹中创建一个新目录，既然是首页，那么我们就命名为home吧。那么问题又来了，我们该如何创建呢？

首先，我们需要在项目根目录的app.json加入新页面，进行注册。

开发编辑界面

❝

其实初始化模板中我们只需要pages/home/index为后续做一下参考，其他的页面都是可以直接删除的了，删除的方法的话就是直接在app.json中把不需要的条目删了就行，也可以在pages文件夹下右键把对应目录删除即可。

❞

其实就是在app.json的pages数组中加入"pages/home/index",，就完成了页面的注册，然后ctrl+s保存文件修改，就可以看到pages文件夹下多了一个home文件夹，而这个文件夹下的文件正是编辑首页所需要用到的文件。至此，新建一个页面的操作就完成啦！

app.json

miniprogram下的新目录结构

那么回到页面设计这个主题，我们需要设计出一个怎么样的首页呢？那我们就翻出开篇中所提及到的原型图还有成品图吧。

首页登录页原型设计图

首页完整设计图

可以看到，当首页全部组件都展示出来时，是上图这个样子的。所以首页模块大体分为用户信息、饼状图/提示图片、时间管理事项新增按钮、当前记录提示(如有进行中的事项)、所有时间管理事项条目展示、创建新事项对话框共「6」大部分。那么我们分门别类地说说该如何把页面大体的框架写出来。

❝

页面框架布局设计部分这6部分的代码都是在home目录下的index.wxml进行编码的。

❞

用户信息

而对于用户信息这个部分的话，细分起来也有三个子部分，分别是用户头像、用户昵称、时间管理用时总结，同时大家在使用市面上的微信小程序时，会看到一开始获取你的昵称头像时会示意用户授权，所以我们也需要做这一步，因此在未获得授权之时应该代替展示一个提示授权登录获取信息的「按钮」。就像下图这样。

用户信息

那么根据子部分的内容，我们就可以在home目录下的index.wxml文件中写出大致的骨架了。

以下先摆出用户信息这一部分的成品代码，其中再针对每一个点进行简短的注释说明。

<view class='user-info-container'>

<image class='avatar' src='{{userInfo.avatarUrl}}' mode='aspectFit'>image>

<view class='info'>

<view class='name' wx:if="{{userInfo}}">{{userInfo.nickName}}view>
<button class="authorize" open-type="getUserInfo" bindgetuserinfo="onAuthorize" wx:else>
      授权登录
button>

<view class="statistics">你已在小助手累计时间管理了 {{wholeTime}} !view>
view>
view>

相信学了HTML和CSS的前置知识的小伙伴应该还不算太陌生(还没学的赶快回去多看看【从0到1造个小程序 · 基础篇1：你需要学习的前置知识】)，其实的标记语言就是WXML中进行封装后的一个特有的易于使用标记，接下来的该实战小程序中的所有WXML大多都是使用这个标记，除了特殊的引入图片、组件、按钮这个类会用其他特定的标记以外。

其中，大家可能不了解的地方应该就是其中多次出现的{{}}双花括号了。这其实是一个常用能力的一层封装：*双花括号会执行它里边的表达式,将表达式的结果直接输出到当前的HTML/WXML中。*所以我们可以直接使用表达式+双花括号的方法，就可以直接把数据展示在页面中了！这个方法(也叫mustache语法)也会在后续一直用到，希望大家都能记住哦~

对于上面代码中还有一点就是wx:if和wx:else对展示昵称还是授权登录按钮的一个条件渲染方式了，面对我们所需要的根据有无用户信息进行不同的渲染展示的问题，就可以直接用上面的两个表达式解决。这种处理方式以后也会多次用到，希望大家能够学会啦！

而至于每一个标签所含有的class属性的话，只是为了识别每个标签，然后通过.wxss文件对每一个需要格式渲染的内容进行渲染。那么.wxss文件是如何找到对应标签的呢？没错，就是通过每一个标签的class属性。

饼状图/提示图片

对于这个部分的展示内容框架和逻辑的话，主要就是以一个饼状图的方式进行展现各个时间管理事项的用时占比，而如果一开始没有时间管理事项的数据的话则会以一个图片作为代替。具体的代码如下所示。

<view class="pie-container">
<image class="empty-img" wx:if="{{eventList.length === 0 || !eventList}}" mode="aspectFit" src="../../images/home/empty.png" bind:tap="onCreateEvent" />
<view class="pie" hidden="{{isCreating}}">
<ec-canvas ec="{{ pieOpt }}" id="chart">ec-canvas>
view>
view>

从上面的代码可以看到，这种需要代替展现的逻辑的话，同样是使用了wx:if进行判断，条件则是时间管理事项列表(即代码中的eventList)是否为空或者长度是否为0。而饼状图标签的话，则是使用了「开源的第三方库e-charts」，至于如何使用的话，后面的篇章会出一篇进行说明，敬请期待啦！(有许多的网页中你所看到的图表，很大一部分都是使用的e-charts完成的哦，所以可见学习它的重要性)

时间管理事项新增按钮

这个按钮，我们是要做成这样的：

其实还有变色动画的特效的！

然后在首页的代码是这么写的：

<m-tips warn="增加时间管理事项" tips="点击创建新事项，开始时间管理吧！" bind:tap="onCreateEvent">m-tips>

为什么会这么简单呢？为什么就这么一个标签就能实现这么好看的样式呢？其实，这里边其实就是用到了「组件化」这一个知识点，这是一个便于我们进行样式、代码进行复用的一种开发模式，至于我们如何进行组件的开发和实现的话，在后续的篇章就会讲到，同样敬请期待啦！

当前记录提示(如有进行中的事项)

如果目前有时间管理事项正在进行中，那我们还是要一步步点进行功能里面看，未免就过于繁琐了，所以就想到了，我们能不能做一个状态栏的提示，在有进行中的事项时就展示出来，而没有事项进行时就隐藏，具体就像这样：

记录提示

同样的，以下是这部分的WXML代码：

<view class="timer-tips" wx:if="{{timerState}}" bind:tap="onJumpToTimerPage"> 
<view class="timer-detail">
    当前
<view class="timer-event-title">{{timerEventTitle}}view>
    {{timerState}}(点击进入详情)
view>
<view class="timer">{{timer}}view>
view>

根据条件判断时候展示用得wx:if这点就不赘述了，然后还有有疑问的点就是花括号里面的timerEventTitle、timerState、timer等等表达式语言了，其实顾名思义可以知道是时间管理事项的名称、进行状态和计时器，现在不懂没关系，这些其实涉及到了后端和前后端涉及的一个交互了，现在只是知其然就可以，后续会专门讲述「其所以然」的，所以我们现在先了解熟悉一下！

所有时间管理事项条目展示

每个事项条目展示的话，听意思就知道，我们是要用到循环的了，至于循环的主题，肯定就是事项列表了，就好比下面这个例子：

条目展示

那么代码该如何编写呢？如下：

<view class="project-container" wx:if="{{eventList.length}}">
<view class="count">
    你现有
<view class="num">{{eventList.length}}view>
    个时间管理事项：
view>
<view>
<view class="project" wx:for="{{eventList}}" wx:key="_id" bind:tap="onEventClick" data-event-id="{{item._id}}">
<view class="title">{{item.title}}view>
<view class="tags">
<m-tag>需用时: {{item.eventTime}}m-tag>
<m-tag>累计: {{item.duration}}m-tag>
<m-tag wx:if="{{item.lastUpdate}}">最近进行：{{item.lastUpdate}}m-tag>
view>
view>
view>
view>
<view class="loading" wx:elif="{{!eventList}}">
<m-loading />
view>

可以看到，这个部分的话会根据事项列表的长度eventList.length进行判断是否展示。

然后说到刚刚的循环的话，有把Javascript基础学了的话就能够猜得出来是wx:for标签，对应每一次循环得到的实体拿出它的属性进行展示。注意，这里对每一个条目的展示的话也用到了组件化的设计()。

而最后的话还有一个判断，就是在事项列表eventList还未得出来时，提示正在加载中一个动画效果，具体像这样：

Loading

可以看到，这里也是自定义了一个组件，而且这个组件有很多现成的样式可以直取直用，制作的细节就放到下一篇啦！

创建新事项对话框

在点击创建新事项按钮后，就会弹出这样一个对话框，那么是如何实现的呢？我们在接下来看看它的代码：

创建新事项对话框

<m-modal title="新事项的名称和预计用时是？" wx:if="{{isCreating}}" inputPlaceholderOfTitle="例如：完成期末大作业" inputPlaceholderOfTime="例如：1     (单位:小时)" bind:cancel="onCancelCreate" bind:confirm="onAddEvent"/>

同样可以看到，这里也是自定义了一个模态框组件，在标签的每一个属性都绑定了相关的属性和方法，制作方法同样是留到后面的篇章吧！

而图中背后的一个模糊化效果的话，其实就是将上面所有元素，即一整个页面(不包括这个对话框)放到一个中，通过isCreating标志和三元运算符进行模糊的控制。

至此，首页页面框架布局设计已讲述完毕。

3. 首页页面展示样式设计

至于样式设计的话，由于水水对认知美感没太有把握，而且也不是像「前端dalao」那样的样式小能手，所以对于一些好看的样式的话都是通过从网上搜罗已经尽自己能力进行调试，所以一般都是直接把能用的样式拿到就用，需要调配的再根据css的基础知识(没学的赶紧回去预习)进行调节。因此对于接下来的每个页面的样式设计的话，我都是使用直接把样式文件摆出来的形式给大家到自己的工具中进行调试，如果有遇到什么问题的话，欢迎到后台询问哦！

// 复制到home/index.wxss即可
.blur-bg {
filter: blur(10rpx);
overflow: hidden;
animation: ani-blur 1000ms;
}

/* 用户信息显示 */
.user-info-container {
margin: 0 40rpx;
margin-top: 32rpx;
text-align:center;
}

.user-info-container .avatar {
width: 150rpx;
height: 150rpx;
border: 5rpx solid #9370DB;
border-radius: 50%;
}

.info {
margin-top:12rpx;
color: black;
font-weight: bold;
font-size: 36rpx;
}

.info > .name {
color: #9370DB;
font-weight: bold;
font-size: inherit;
}

.info > .statistics {
margin-top:12rpx;
color: black;
font-size: 32rpx;
}

.authorize {
display: inline-block;
padding: 12rpx 48rpx;
background-color: #9370DB;
color: whitesmoke;
text-align: center;
font-size: 30rpx;
line-height: 28rpx;
}

/* 空视图 */
.pie-container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}

.empty-img {
position: absolute;
width: 50%;
}

/* 饼状图 */
.pie-container,
.pie {
width: 100%;
height: 500rpx;
}

/* 目标列表 */
.project-container {
margin: 0 40rpx;
margin-top: 10rpx;
margin-bottom: 200rpx;
}

.project-container > .count {
color: #555;
font-weight: bold;
font-size: 28rpx;
}

.project-container > .count > .num {
display: inline-block;
margin: 0 4rpx;
color: #9370DB;
font-weight: bolder;
font-size: 32rpx;
}

.project {
margin: 24rpx 0;
padding: 24rpx;
border-radius: 18rpx;
background-color: #fff;
box-shadow: 0 6rpx 24rpx rgba(25, 118, 210, 0.08);
}

.project > .title {
font-weight: bold;
font-size: 32rpx;
}

.project > .tags {
display: flex;
margin-top: 6rpx;
}

.project > .tags > m-tag {
margin-left: 16rpx;
}

.project > .tags > m-tag:first-child {
margin-left: 0;
}

/* 当前记录提示 */
.timer-tips {
margin: 40rpx 40rpx;
background-color: #9370DB;
font-size: 28rpx;
border-radius: 18rpx;
padding: 20rpx 24rpx;
color: whitesmoke;
animation: tip-ani 2s infinite ease-in-out;
box-shadow: 0 6rpx 24rpx rgba(25, 118, 210, 0.08);
}

@keyframes tip-ani {
  0% {
background-color: #9370DB;
  }
  70% {
background-color: #A020F0;
  }
  100% {
background-color: #9370DB;
  }
}

.timer-tips > .timer-detail {
display: flex;
align-items: center;
}

.timer-tips .timer {
font-size: 36rpx;
font-weight: bold;
color: #00F5FF;
margin-top: 6rpx;
letter-spacing: 2rpx;
}

.timer-tips > .timer-detail > .timer-event-title {
display: inline-block;
font-weight: bold;
color: #DCDCDC;
margin: 0 8rpx;
}


@keyframes ani-blur {
from {
opacity: 0;
  }
to {
opacity: 1;
  }
}


/* 创建按钮 */
.create {
position: fixed;
right: 0;
bottom: 0;
box-sizing: border-box;
margin: 32px;
padding: 24rpx;
width: 54px;
height: 54px;
border-radius: 50%;
background-color: #9370DB;
box-shadow: rgba(0, 0, 0, 0.2) 0 3rpx 20rpx;
}

/* 加载 */
.loading {
margin-top: 100rpx;
}

---

至此，首页页面设计已经制作完毕，但是离首页设计完成还有资源导入，逻辑流程设定编写等步骤要走，所以要看到成品，还有一段路哦，麻烦坚持啦！

相信能看到、学到这里的小伙伴都是勇士了(无论如何都请给自己一份掌声)!俗话说得好，“万事开头难”，一开始面对各种各样的概念和新事物确实会措手不及，当时在慢慢学习、对基础概念上手以后，后续的开发就是手到擒来了，所以还是那一句话，希望大家都能坚持下去哇~

■ Over ■

          历史推荐          

 实战篇开篇 · 大家好，给大家介绍一下，这是接下来要造的小程序！ 从0到1造个小程序 · 基础篇4：云开发基础知识 从0到1造个小程序 · 基础篇3：小程序开发基础知识 从0到1造个小程序 · 基础篇2：开发前的准备工作 ★

我是水水

我们下期再见

★

本公众号不具备留言功能

有什么问题的话欢迎在后台输入框中回复哦~