2.“简阅”——用户登录功能(2)

2.登录功能前端实现

2.1在HBuilderX中创建uni-app类型的项目，选择默认模板即可然后建目录结构，如图所示：

• commons目录放置一些全局配置函数
• components目录放置封装的组件
• pages目录放置页面文件
• static目录放置图片资源

• style目录放置全局样式文件

  
  
  

  image.png

2.2 pages目录的各个子目录里分别放相应的vue文件

image.png

2.3 tab图片

default.png

nav1.png

nav1-a.png

nav2.png

nav2-a.png

nav3.png

nav3-a.png

2.4配置pages.json文件如下：

{
    "pages": [
        //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "文章",
                //允许下拉刷新
                "enablePullDownRefresh": true
            }
        },
        {
            "path": "pages/message/message",
            "style": {
                "navigationBarTitleText": "消息"
            }
        },
        {
            "path": "pages/my/my",
            "style": {
                "navigationBarTitleText": "我的"
            }
        },
        {
            "path": "pages/signin/signin",
            "style": {}
        },
        {
            "path": "pages/write/write",
            "style": {}
        },
        {
            "path": "pages/info/info",
            "style": {}
        },
        {
            "path": "pages/setting/setting",
            "style": {}
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        // "navigationBarTitleText" : "简阅",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "tabBar": {
        "color": "#707070",
        "selectedColor": "#DE533A",
        "list": [{
                "pagePath": "pages/index/index",
                "text": "文章",
                "iconPath": "static/nav1.png",
                "selectedIconPath": "static/nav1-a.png"
            },
            {
                "pagePath": "pages/message/message",
                "text": "消息",
                "iconPath": "static/nav2.png",
                "selectedIconPath": "static/nav2-a.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "static/nav3.png",
                "selectedIconPath": "static/nav3-a.png"
            }
        ]
    }
}

2.5style目录新建style.css全局样式表

* {
    font-size: 14pt;
}

.container {
    width: 95%;
    margin: 0 auto;
}

.avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.list {
    display: flex;
    flex-direction: column;
}

.list-item {
    width: 100%;
    height: 50px;
    background-color: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
}
.green-btn {
    background-color: rgb(26, 173, 25);
    color: #fff;
}

2.6App.vue文件中引入全局样式表

2.7 my.vue

2.8 signin.vue

2.9 setting.vue

2.10 运行到微信开发者工具看效果