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

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

钉钉小程序基于前端 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中编写代码

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

pnpm install sass -D