钉钉微应用/企业内部应用初步开发-H5前端
需要具备的开发环境,移动端钉钉Dev版、chrome、翻墙,以及测试时使用的手机一定要好注册首先在钉钉中注册一个企业,创建一个新应用,如下:点击应用即可进入到应用详情页最至关重要的两点:开发管理、权限管理应用首页地址:即本地IP+?corpid=$CORPID$,携带 ?问号corpid=CORPIDCORPIDCORPID在获取免登授权码时会用到服务端出口IP:是指后台开发java的服务IP,若
·
需要具备的开发环境,移动端钉钉Dev版、chrome、翻墙,以及测试时使用的手机一定要好
注册
首先在钉钉中注册一个企业,创建一个新应用,如下:
点击应用即可进入到应用详情页
最至关重要的两点:开发管理、权限管理
- 应用首页地址:即本地IP+
?corpid=$CORPID$
,携带 ?问号
corpid= C O R P I D CORPID CORPID在获取免登授权码时会用到 - 服务端出口IP:是指后台开发java的服务IP,若ipv4 为动态ip,那么它的服务端出口IP有时也会发生变化
- 打开开发时需要使用的权限,例如:手机号信息、成员信息读权利
最后发布
移动端调试
按照官方的步骤完成即可
- 在手机上打开H5调试开关
一般安卓手机都是打开【设置】,找到手机版本后连续点 5 次后,系统会提示已打开【开发模式】 - 手机【设置】中搜索【开发者选项】,打开【USB调试】
- 打开钉钉【设置】,选择【通用】-【开发者选项】-【微应用调试】注意:必须是钉钉Dev版才行。Android调试包
- 手机打开【项目应用】,连接到电脑,打开chrome,输入chrome://inspect 开始调试。
- 如果项目名称一直不出现多刷新几遍,前提是翻墙
如果没有翻墙,会一直显示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中前两条只要在任意文件中使用一次后,全局都会被注册使用
- 下拉刷新,使用一次后,每个页面都可以【下拉刷新】
如果某页面中使用了表单标签下拉选,滑动下拉选时会触发【下拉刷新】
https://developers.dingtalk.com/document/app/onPullDownRefresh
this.$dd.ui.pullToRefresh.enable({
onSuccess: () => {
this.$refreshPage()
this.$dd.ui.pullToRefresh.stop()
}
})
- 返回上一级页面,触发一次后,每个页面都会提示“确认返回吗?”,即使是首页面也会有。
dd.biz.navigation.goBack({
onSuccess : function(result) {
alert('确认返回吗?')
},
onFail : function(err) {}
})
- 修改导航标题,仅限移动端可使用
PC端报错信息为:Can’t show slide panel, errorCode: 21
dd.biz.navigation.setTitle({ title : '数据仓', });
- 右上角的分享事件
官方解释:暂时不支持配置url,或携带参数信息,默认分享当前页面地址
初次接触钉钉开发,有不足或者遗漏的地方,望谅解并告知,谢谢!
更多推荐
所有评论(0)