前端小白的爬坑之旅(六)

最新推荐文章于 2024-04-26 16:49:41 发布

panyiyao

最新推荐文章于 2024-04-26 16:49:41 发布

阅读量387

点赞数 1

文章标签： android ios 小程序 vue.js

本文链接：https://blog.csdn.net/panyiyao/article/details/104501041

版权

本文记录了一位前端开发者在开发钉钉疫情扫码小程序的过程，包括实现绿色、黄色、红色健康码展示，以及四个页面的制作。开发者使用了mui框架，并详细介绍了获取钉钉用户信息、扫码功能实现及表单数据提交的步骤。

摘要由CSDN通过智能技术生成

2月22号下午接到需求，公司要求做一个关于疫情扫码的钉钉小程序

首先是最终效果

绿色的码代表健康黄色的码代表要注意红色的码代表危险

加上主页一共4个页面花了大概一天时间，功能也很简单，由于经验不足导致耽误半天的时间，2月24日公司需要使用，所以加班做出来。其中犯了不少低级错误

页面使用到了mui框架。

由于是需要在钉钉上运行，所以需要获取钉钉用户信息

第一步需要导入钉钉微应用的JSAPI

<script src="//g.alicdn.com/dingding/open-develop/1.6.9/dingtalk.js"></script>

第二部需要获取到用户的code传到后台，然后后台再用code换取用户信息

dd.ready(function() {

					dd.runtime.permission.requestAuthCode({
						corpId: 'xxxxxxxxxx', // 企业id 处于安全考虑就不放出来了
						onSuccess: function(info) {
							// 通过该免登授权码可以获取用户身份
							var json = new Object();
							json.authCode = info.code;
							
							$.ajax({
								url: route + 'login',
								//将获取到的code传到后台
								data: JSON.stringify(json),
								async: false,
								headers: {
									"Content-Type": "application/json;charset=UTF-8"
								},
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								success: function(data) {
									//获取用户信息
									$(".head").attr('src', data.avatar);
									id = data.userId;
									//将获取到的数据渲染到页面上