【微信小程序】从零开始搭建一个英语学习小程序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"即可获取用户昵称-->