钉钉小程序开发实战：打造一个简约风格的登录页面

在上一篇文章中，我们已经介绍了如何搭建钉钉小程序的基础环境，并完成了项目的初始化配置。本文将继续深入，手把手带你实现一个简约风格的登录页面，这是大多数企业级应用不可或缺的一部分。

钉钉小程序基于前端 Web 技术栈，采用类似于 Vue 的模板语法和组件化结构，非常适合快速构建轻量级企业内部应用。登录页虽然看似简单，但却是用户与系统交互的第一步，良好的体验和简洁的设计往往能给用户留下深刻印象。

本章节直接上干货，模板可以看往期文章！

1.page.json中添加需要的组件

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/login/index",
			"style": {
				"navigationBarTitleText": "登陆",
				"usingComponents": {
					"ant-button": "/mycomponents/node_modules/antd-mini/es/Button/index",
					"ant-avatar": "/mycomponents/node_modules/antd-mini/es/Avatar/index",
					"ant-footer": "/mycomponents/node_modules/antd-mini/es/Footer/index"
				}
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"usingComponents": {
					"ant-button": "/mycomponents/node_modules/antd-mini/es/Button/index"
				}
			}
		},
		{
			"path": "pages/about/index",
			"style": {
				"navigationBarTitleText": "关于",
				"usingComponents": {
					"ant-button": "/mycomponents/node_modules/antd-mini/es/Button/index"
				}
			}
		},
		{
			"path": "pages/mine/index",
			"style": {
				"navigationBarTitleText": "我的",
				"usingComponents": {
					"ant-button": "/mycomponents/node_modules/antd-mini/es/Button/index"
				}
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "归梦数据",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
		"list": [
			{
				"pagePath": "pages/index/index",
				"text": "首页"
			},
			{
				"pagePath": "pages/mine/index",
				"text": "我的"
			}
		]
	}
}

2.在src/pages/login/index.vue中编写代码

<template>
  <view class="container">
    <view class="content">
      <view class="header-block">
        <ant-avatar size="large" src="/static/logo.png" className="avatar"/>
      </view>
      <view class="title-block">
        <text class="title">钉钉小程序</text>
        <text class="sub-title">适用于钉钉小程序的登陆模板</text>
      </view>
      <view class="button-block">
        <ant-button type="primary" class="login-button">钉钉一键登录</ant-button>
      </view>
      <view class="footer">
        <ant-footer content="@2020-2025 归梦工作室 版权所有" />
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.container {
  width: 100%;
  margin-top: 120rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .header-block {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20rpx;

    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: $uni-text-color;
    }

    .sub-title {
      font-size: 28rpx;
      color: $uni-text-color-grey;
      margin-top: 10rpx;
    }
  }

  .button-block {
    width: 100%;
    margin-top: 120rpx;

    .login-button {
      width: 680rpx;
      margin: 0 auto;
    }
  }

  .footer {
    width: 100%;
    position: fixed;
    bottom: 30rpx;
    left: 0;
  }

}


</style>
<script setup lang="ts">
</script>

3. 如果你发现报错没有安装sass的话，请执行下面指令：

pnpm install sass -D