钉钉微应用/企业内部应用初步开发-H5前端

需要具备的开发环境，移动端钉钉Dev版、chrome、，以及测试时使用的手机一定要好

注册

首先在钉钉中注册一个企业，创建一个新应用，如下：

点击应用即可进入到应用详情页
最至关重要的两点：开发管理、权限管理

1. 应用首页地址：即本地IP+?corpid=$CORPID$，携带 ？问号
   corpid=$CORPID$在获取免登授权码时会用到
2. 服务端出口IP：是指后台开发java的服务IP，若ipv4 为动态ip，那么它的服务端出口IP有时也会发生变化
3. 打开开发时需要使用的权限，例如：手机号信息、成员信息读权利

最后发布

移动端调试

按照官方的步骤完成即可

1. 在手机上打开H5调试开关
   一般安卓手机都是打开【设置】，找到手机版本后连续点 5 次后，系统会提示已打开【开发模式】
2. 手机【设置】中搜索【开发者选项】，打开【USB调试】
3. 打开钉钉【设置】，选择【通用】-【开发者选项】-【微应用调试】注意：必须是钉钉Dev版才行。Android调试包
4. 手机打开【项目应用】，连接到电脑，打开chrome，输入chrome://inspect 开始调试。
5. 如果项目名称一直不出现多刷新几遍，前提是
   如果没有，会一直显示HTTP/1.1 404 Not Found
   
   点击 inspect，最终效果如下
   
   如果手机本身就卡，那在测试的时候会翻倍；在浏览器中JSAPI无效

授权登录

安装JSAPI包 npm install dingtalk-jsapi --save
前端使用corpId获取code授权码，免登
以uni-app为例

methods: {
		login(corpId) {
		// 通过corpId获得code
		this.$dd.runtime.permission.requestAuthCode({
			corpId,
			onSuccess: async (result) => {
				if (result.code) {
					this.code = result.code
					// 传递给后端，进行授权登录
					const res = await this.$api.get('/login', {
						code: this.code,
						corpId
					})
					if (res.code == 0) {
						uni.showToast({
							title: '登录成功',
							icon: 'none'
						})
					}
				}
			}
		})
	},
},
onLoad(options) {
	const search = window.location.search
	const corpId = search.slice(search.indexOf('=') + 1)
	this.newCorpId(corpId)
	this.login(corpId)
},

坑

以下API中前两条只要在任意文件中使用一次后，全局都会被注册使用

1. 下拉刷新，使用一次后，每个页面都可以【下拉刷新】
   如果某页面中使用了表单标签下拉选，滑动下拉选时会触发【下拉刷新】
   https://developers.dingtalk.com/document/app/onPullDownRefresh

this.$dd.ui.pullToRefresh.enable({
   onSuccess: () => {
		this.$refreshPage()
 		this.$dd.ui.pullToRefresh.stop()
   }
})

2. 返回上一级页面，触发一次后，每个页面都会提示“确认返回吗？”，即使是首页面也会有。

dd.biz.navigation.goBack({
    onSuccess : function(result) {
        alert('确认返回吗？')
    },
    onFail : function(err) {}
})

3. 修改导航标题，仅限移动端可使用
   PC端报错信息为：Can’t show slide panel, errorCode: 21

dd.biz.navigation.setTitle({      title : '数据仓',  });

5. 右上角的分享事件
   官方解释：暂时不支持配置url，或携带参数信息，默认分享当前页面地址

初次接触钉钉开发，有不足或者遗漏的地方，望谅解并告知，谢谢！