【微信小程序】从零开始搭建一个英语学习小程序02——页面样式设计（1）

一、导航栏设计

在全局配置文件app.json中配置pages、window、tabBar等项，具体代码如下所示。

app.json文件用于对小程序进行全局配置。例如配置小程序的页面文件路径、窗口显示特性、顶部导航条、多tab标签及网络超时时间等。

1. pages配置项

pages配置项的类型是String Array（字符串数组），它的每一项都是字符串（用路径名/文件名格式表示，文件名不需要后缀），**用来指定小程序由哪些页面组成。**该配置项的第一项指定页面是小程序的初始页面（首页），在小程序中新增页面或减少页面都要在该配置项中进行相应的编辑修改。

  "pages":[
    "pages/home/home",
    "pages/words/words",
    "pages/logs/logs",
    "pages/listening/listening",
    "pages/saying/saying",
    "pages/reading/reading"
    
  ],

2. window配置项

window配置项的类型是Object，用来设置小程序顶部导航条（背景色、标题文字等），窗体颜色和背景色等。还可以配置是否开启下拉loading以及设置下拉时所显示的背景色。

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#1E90FF",
    "navigationBarTitleText": "英语易学通",
    "navigationBarTextStyle":"black"
  },

3. tabBar配置项

tabBar配置项的类型是Object，用来设置小程序tab标签的显示样式、tab切换时的对应页面。

 "tabBar": {
    "list": [
      {
      "pagePath": "pages/words/words",
      "text": "单词",
      "iconPath": "icon/单词2.png",
      "selectedIconPath": "icon/单词1.png"
    },
    {
      "pagePath": "pages/listening/listening",
      "text": "听力",
      "iconPath": "icon/跟读2.png",
      "selectedIconPath": "icon/跟读1.png"
    },     
    {
      "pagePath": "pages/reading/reading",
      "text": "阅读",
      "iconPath": "icon/阅读2.png",
      "selectedIconPath": "icon/阅读1.png"
    },      
    {
      "pagePath": "pages/home/home",
      "text": "我的",
      "iconPath": "icon/我2.png",
      "selectedIconPath": "icon/我1.png"
    }
  ],

注：在该项目的文件夹中将图片文件夹icon放在与pages同级的目录下。在pages中引入正确的图片路径即可。


配置完成后的效果图如图所示。

二、“我的”页面设计

该页面主要实现了用户可以根据需求，选择点击特定的导航栏（单词、听力、阅读）进入学习。用户可以在“我的”页面查看自己的学习情况，“我的”页面中展示了用户学习的学习天数，以及用户每日需完成的单词任务量，可以使用户对自己的学习情况有一个把握。在该模块中，用户随时都可以修改自己的个人信息，修改昵称、头像等基本资料，用户亦可查看“我的收藏”和“错题集”。
首先，在全局配置文件app.json中插入这一行自动创建一个名为home的文件夹。

以该方式创建的文件夹，文件夹中包含了.js、.json、.wxml、.wxss文件，简单方便。

在home.wxml文件中按照图中设计进行布局。首先定义该页面为一个大的外部容器类名为big，随即可在home.wxss文件中根据实际情况调整布局。在big容器中嵌入上、下两个容器分别命名为head-body以及colorUI的样式名cu-list menu sm-border card-menu margin-top。在下面的容器中，设置了多个容器，并在wxss文件中及时调整布局。

具体的代码布局为：

1. 获取用户信息

现在，我们来对head-body做详细设计。由之前的设计图可以看到，我们在head-body容器中展示了用户头像、昵称、地址以及学习天数和设置每日目标。官方提供的最新方法Open-data标签，使用这个标签可以不用用户授权直接获得头像、昵称以及地址并显示在小程序页面上。具体代码如下所示：

<view class="getuser"> 
    <!--在open-data标签中指定type="userAvatarUrl"即可获取用户头像-->
    <open-data type="userAvatarUrl"></open-data>
</view>
<view class="text-black text-bold">
    <!--在open-data标签中指定type="userNickName"即可获取用户昵称-->
    <open-data type="userNickName"></open-data>
</view>
    <!--与上面类似-->
<view class="solid-bottom text-sm padding">
    <open-data type="userCountry"></open-data>
    <open-data type="userProvince"></open-data>
    <open-data type="userCity"></open-data>
</view>

2. 设计学习天数以及每日目标模块

对学习天数的设计如上一致，定义一个view容器，在该容器内进行详细的设计，具体代码如下所示：

    <view class="studydays">
      <!--这里暂时还未连接到数据库，所以先用{{}}传值并在js中将data设为0-->
      <view class="stdays">{{studyaccout}}天</view>
      <view>学习天数
        <view class="cuIcon-activity lg text-gray"></view>
      </view>
    </view>

在home.js中将studyaccout的值暂赋为0，后面连接到数据库后可修改。

在wxss样式中，对相应的样式进行修改，如下所示：

每日目标的设计，比学习天数多了个选择的功能，用户可以点击“每日目标”即可弹出选择器，具体页面如下所示：

因此，我们在wxss文件中对该部分进行设计时，需要在view容器中嵌套一个picker选择器，另外我们需要获取到用户所设置的值并显示在学习目标上，因此，我们仍需在view中设置一个绑定事件用来获取值。wxml中的具体代码如下。

<view class="studytarget">
      <picker value="{{index}} " range="{{daytarget}}" bindchange="binddaytarget">
       <view class="st_target">{{wordsaccout}}个</view>
        <view>每日目标
          <view class="cuIcon-medal lg text-gray"></view>
        </view>
      </picker>
    </view>

在home.js中需要定义一个与绑定事件相关的函数，实现将用户设置的值传给{{wordsaccout}}并显示：

效果如下图所示：

3. 设计页面其他功能模块

收藏夹、错题集、学习排行榜、账户设置、关于我们小模块，样式大同小异，首先用view画出框架，后续可再对它们进行跳转、与数据库连接等功能的扩充。详细的WXSS代码如下所示：

 <view class="cu-list menu sm-border card-menu margin-top">
        <!-- 收藏夹 -->
        <view class="cu-item arrow" bindtap="mycollect">
          <view class="content">
            <text class="cuIcon-favorfill text-grey"></text>
            <text class="text-grey">收藏夹</text>
          </view>
        </view>
        <!-- 错题集 -->
        <view class="cu-item arrow" bindtap="mycollect">
          <view class="content">
            <text class="cuIcon-edit text-grey"></text>
            <text class="text-grey">错题集</text>
          </view>
        </view>
        <!-- 学习排行榜 -->
        <view class="cu-item arrow" bindtap="mycollect">
          <view class="content">
            <text class="cuIcon-rankfill text-grey"></text>
            <text class="text-grey">学习排行榜</text>
          </view>
        </view>
            <!-- 账户设置 -->
        <view class="cu-item arrow" bindtap="mycollect">
          <view class="content">
            <text class="cuIcon-profile text-grey"></text>
            <text class="text-grey">账户设置</text>
          </view>
        </view>
            <!-- 关于我们 -->
        <view class="cu-item arrow" bindtap="mycollect">
          <view class="content">
            <text class="cuIcon-info text-grey"></text>
            <text class="text-grey">关于我们</text>
          </view>
        </view>
     </view>

页面显示如下：