刚写完钉钉的H5微应用,在此记录一些H5里面调用钉钉原生的方法 H5使用的是vue2写的
- 首先引入钉钉的sdk包,我是在index.html中直接引用的,然后就可以直接在H5中使用dd的一些不需要鉴权的方法了,如果需要调用获取位置等之类的方法,得先调用鉴权的方法,具体的可以参考官方文档 https://developers.dingtalk.com/document/app/jsapi-authentication
// index.html
<script>
var ua = navigator.userAgent.toLowerCase()
if (navigator.userAgent.toLowerCase().indexOf('dingtalk') > -1) {
var head = document.head || document.getElementsByTagName('head')[0]
var script = document.createElement('script')
script.setAttribute(
'src',
'https://g.alicdn.com/dingding/dingtalk-jsapi/2.10.3/dingtalk.open.js'
)
head.appendChild(script)
}
</script>
- 鉴权, 需要使用鉴权才能调用的方法的时候可以调用鉴权,不需要的可以不鉴权,直接上代码
我是通过接口从后台拿到的一些 鉴权需要用到的数据
this.$api.auth
.getDDConfig()
.then(res => {
window.dd.config({
agentId: 'xxxxx', // 必填，微应用ID
corpId: res.data.corpId, //必填，企业ID
timeStamp: res.data.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.nonceStr, // 必填，自定义固定字符串。
signature: res.data.signature, // 必填，签名
type: 0, //选填。0表示微应用的jsapi,1表示服务窗的jsapi；不填默认为0。该参数从dingtalk.js的0.8.3版本开始支持
jsApiList: [
'runtime.info',
'biz.contact.choose',
'device.notification.confirm',
'device.notification.alert',
'device.notification.prompt',
'biz.ding.post',
'biz.util.openLink',
'device.geolocation.get'
] // 必填，需要使用的jsapi列表，注意：不要带dd。
})
})
钉钉扫一扫方法使用(不需要鉴权)
- 因为页面中有多个地方需要使用扫一扫方法,所以我都是在vue中的mixin里面写的
// mixins/index.js
// 扫码
getScan() {
return new Promise((resolve, reject) => {
// 钉钉环境
window.dd.biz.util.scan({
type: 'all',
onSuccess: function(data) {
resolve({ text: data.text })
},
onFail: function(err) {
reject(err)
}
})
})
},
// 然后在main.js 中混入一下
import mixins from '@/mixins'
Vue.mixin(mixins)
//调用 在需要用的.vue 文件中
this.getScan().then(res => {
const code = res.text // 拿到二维码返回的信息
//接下来就可以走自己的逻辑流程了
})
设置小程序标题(不需要鉴权)
// mixins/index.js
setTitle(name) {
window.dd.biz.navigation.setTitle({
title: name, //控制标题文本，空字符串表示显示默认文本
onSuccess: function() {
/*结构
{
}*/
},
onFail: function() {}
})
}
// 使用
this.setTitle('标题')
控制左上角返回按钮 (不需要鉴权)
- 得注意一下 android 和ios中 控制左上角返回是不一样的(被这个坑过)
// mixins/index.js
// 控制左上角返回按钮 在主页面不返回
leftTopButton() {
const _this = this
return new Promise(resolve => {
// 安卓中调用的是这种
if (_this.getPhoneEnv() === 'android') {
document.addEventListener('backbutton', function(e) {
resolve()
// 在这里处理你的业务逻辑
e.preventDefault() //backbutton事件的默认行为是回退历史记录，如果你想阻止默认的回退行为，那么可以通过preventDefault()实现
})
}
// ios 使用的是这种
window.dd.biz.navigation.setLeft({
control: true, //是否控制点击事件，true 控制，false 不控制， 默认false
text: '', //控制显示文本，空字符串表示显示默认文本
onSuccess: function() {
resolve()
//如果control为true，则onSuccess将在发生按钮点击事件被回调
},
onFail: function() {}
})
})
},
//使用 通过上面那样封装一下,使用就比较简单了 直接调用即可
this.leftTopButton().then(() => {
// 在这里面写你想跳哪就跳哪
this.$router.push(params)
})
- 其他的还有一些方法,需要用到的话 可以自己去官网查看
还有一些关于消息链接跳转的小问题
1631866768(1).png
- 其中的 redirect_url传的参数问题
得是redirect_url=https://www.xxx.com/h5/xxx
不能是redirect_url=https://www.xxx.com/h5/xxx/#/login 这种, 因为这种得话钉钉会从#开始截取掉,被这个坑了一下
还有就是传参的问题,链接上面只接收一个参数 如果有多个参数可以使用 ?data='xxx,xxxx'这种
正确格式如下:
dingtalk://dingtalkclient/action/openapp?corpid=免登企业corpId&container_type=work_platform&app_id=0_{应用agentid}&redirect_type=jump&redirect_url=https://www.xxx.com/h5/xxx?data='xxx,xxx'
