钉钉H5微应用基础学习

这篇具有很好参考价值的文章主要介绍了钉钉H5微应用基础学习。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

钉钉开发文档

一、使用调试工具——IDE:

1、先下载调试工具,并且新建一个企业内部应用。
如果需要管理员权限,可以自己创建一个企业。
(tips:一定要屏蔽自己创建的企业的消息,不然消息很多)
2、保证现在自己使用的node版本是16以上的,不然会报以下错误:
钉钉H5微应用基础学习
3、根据教程进行启动,我这里模拟器一直打不开,文件更改也不让保存,所以放弃
钉钉H5微应用基础学习

二、使用本地开发工具:

1、执行以下命令,安装DingTalk-Design-CLI。
npm i dingtalk-design-cli@0.20.4 -g

钉钉H5微应用基础学习

2、执行以下命令,查看是否已经成功安装DingTalk-Design-CLI。
ding -v

钉钉H5微应用基础学习

3、执行以下命令,初始化代码模版到本地。
ding  init -o h5Test -a h5 -t h5_jsapi_component_demo_vue -l javascript

钉钉H5微应用基础学习

4、执行以下命令,启动开发、调试功能。
  • 在刚刚初始化好的代码目录下执行以下命令,启动本地开发、调试。
cd h5Test
ding dev web

钉钉H5微应用基础学习
钉钉H5微应用基础学习
钉钉H5微应用基础学习

三、使用钉钉h5微应用跳转到第三方网站:

JSAPI调试文章来源地址https://www.toymoban.com/news/detail-508854.html

1、使用uniapp新建一个H5项目
2、安装钉钉JSAPI:
npm install dingtalk-jsapi --save
3、main.js文件引入JSAPI:
import * as dd from 'dingtalk-jsapi'; // 此方式为整体加载,也可按需进行加载
4、在vue文件中写入代码:
<template>
	<view class="content">
		<view class="text-area">
			<text class="title" v-if="isPhone">仅支持在浏览器端访问</text>
		</view>
	</view>
</template>

<script>
	import * as dd from 'dingtalk-jsapi'; // 引入钉钉JSAPI
	export default {
		data() {
			return {
				isPhone: false // 当前的设备是移动端还是pc端
			}
		},
		onLoad() {
			var info = navigator.userAgent;
			//通过正则表达式的test方法判断是否包含“Mobile”字符串
			this.isPhone = /mobile/i.test(info);
			console.log("this.isPhone",this.isPhone)
			if(this.isPhone) {
				// 获取code码,并且将code发送给后端,让后端进行用户信息的获取
				this.init()
			}
		},
		methods: {
			init() {
				let that = this
				// 企业的corpid,由前端从URL中获取。
				let corpId = that.getCorpId('corpId');
				// 通过dd.env.platform检查当前是否在钉钉环境下
				if (dd.env.platform !== "notInDingTalk") {
					dd.ready(function() {
						// 获取免登授权码
					    dd.runtime.permission.requestAuthCode({
					        corpId, // 企业id
							success: (res) => {
							    const { code } = res; // 通过该免登授权码可以获取用户身份
								that.getAuthor(code)
							},
							fail: () => {},
							complete: () => {}
						});
							
					});
				}
			},
			// 从url中获取企业的corpId
			getCorpId(key) {
				let query = window.location.search.substring(1)
				let vars = query.split("&")
				for (let i=0;i<vars.length;i++) {
					let item = vars[i].split("=")
					if(item[0] == key) return item[1]
				}
				return false
			},
			// 获取用户的信息,然后完成跳转
			getAuthor(code) {
				console.log('拿到的code',code)
				dd.biz.util.openLink({
				    url:"https://ele.qre.com.cn/login.html#/user/login", // 要打开链接的地址
				    onSuccess : function(result) {
				        /**/
				    },
				    onFail : function(err) {}
				})
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
5、打包给后端,部署到服务器端,在服务器端联调。

到了这里,关于钉钉H5微应用基础学习的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 安卓移动应用开发课程设计(图书借阅系统)代码+使用流程介绍文档

    目录 第1章 概述 1 1.1 开发背景 1 1.2 开发目标 1 1.3 设计原则 1 第2章 需求分析 1 2.1 项目定义 2 2.2 需求陈述 2 2.3 不同角色用例 2 第3章 可行性分析 3 3.1 经济可行性分析 3 3.2 技术可行性分析 3 3.3 法律可行性分析 4 3.4 操作可行性分析 4 第4章 总体设计 4 4.1 设计思路 4 4.2 设计意义

    2024年02月06日
    浏览(72)
  • 鸿蒙应用开发学习|基础环境和开发工具

    第一章 HarmonyOS是什么 第二章 基础环境和开发工具 HUAWEI DevEco Studio是基于IntelliJ IDEA Community开源版本打造,面向全场景多设备,提供一站式的应用/服务集成开发环境(IDE),支持分布式多端开发、分布式多端调测、多端模拟仿真,提供全方位的质量与安全保障。 高效智能代码

    2024年01月22日
    浏览(54)
  • SkeyeWebPlayer.js H5播放器使用文档说明

    SkeyeWebPlayer.js H5播放器,是一款能够同时支持HTTP、HTTP-FLV、HLS(m3u8)视频直播与视频点播等多种协议, 支持H.264、H.265、AAC等多种音视频编码格式,支持mse、wasm等多种解码方式,支持Windows、Android、iOS全平台终端的H5播放器。 功能说明 支持 m3u8/HLS 播放; 支持 HTTP-FLV/WS-FLV 播放

    2023年04月08日
    浏览(34)
  • 前端UNIAPP端webview嵌入H5使用说明文档

    一、关闭webView窗口 功能说明 关闭已经打开的Webview窗口,需先获取窗口对象或窗口id,并可指定关闭窗口的动画及动画持续时间。 参数说明 参数 是否必须 参数类型/固定值 说明 id_wvobj 是 String  要关闭Webview窗口id或窗口对象,若操作窗口对象已经关闭,则无任何效果。 使用

    2024年04月16日
    浏览(43)
  • Flutter学习四:Flutter开发基础(六)调试Flutter应用

    目录 0 引言 1 调试Flutter应用 1.1 日志与断点 1.1.1 debugger() 声明 1.1.2 print和debugPrint 1.1.3 调试模式、中间模式、发布模式 1.1.4 断点 1.2 调试应用程序层 1.2.1 转储Widgets树 1.2.2  转储渲染树 1.2.3 转储Layer树 1.2.4 转储语义树 1.2.5 调度(打印帧的开始和结束) 1.2.6 可视化调试

    2024年02月12日
    浏览(56)
  • 企业微信代开发应用步骤(小程序、H5同理)

    1.前提条件: 服务商进行微信认证 2.创建应用代开发模板 配置代开发模板回调URL: Token:随机获取(确定后不可更改,否则需更改服务端回调代码逻辑) EncodingAESKey:随机获取(确定后不可更改,否则需更改服务端回调代码逻辑) 已上线的模板更新过后需要 重新提交上线

    2024年02月01日
    浏览(41)
  • vue2+vant2+rem+axios+钉钉自动登录 h5模板

    请轻轻的点一下这里~ Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。 本示例 Node.js 14.17.0 对应配置 .env.staging config/env.staging.js 对应配置 .env.production config/env.production.js package.json 里的 scripts 配置 serve stage build ,通

    2024年02月03日
    浏览(34)
  • uni-app使用支付宝小程序开发者工具开发钉钉小程序

    一、添加运行配置 在项目的 package.json 文件中添加以下配置 配置完毕后在 HBuilderX 中会显示运行钉钉小程序按钮  二、设置钉钉小程序开发工具路径(支付宝小程序开发者工具)  三、通过 HBuilderX  把 uniapp 项目编译成钉钉小程序 编译成功后会自动打开钉钉小程序开发工具,编

    2024年02月11日
    浏览(62)
  • MFC单文档应用程序的基础

    一、口令对话框 例题1: 编写一个单文档应用程序,在视图中显示自己的姓名;单击鼠标左键,在消息框中显示 鼠标左键被按下的次数;单击鼠标右键,在消息框中显示鼠标右键被按下的次数。 操作步骤: 1、创建一个SDI应用程序(具体步骤略)。 2、在视图类中找到C***Vi

    2024年02月02日
    浏览(72)
  • mfc入门基础(一)-单文档应用程序框架

    最近因为相关业务,需要接触下mfc的一些老代码,但是mfc上手并没有qt那么简单,所以四处寻找学习资料,发现一个写的挺好的教程,这边我进行转载下,学习的过程中进行了一些修改,总结下。 此处附上原文链接:鸡啄米MFC入门系列教程_逸适安然的博客-CSDN博客_鸡啄米 V

    2024年02月04日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包