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

钉钉小程序基于前端 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