Home > Article > Web Front-end > HTML5 embedded DingTalk tutorial
1, you need to introduce DingTalk official js into the project
<script type="text/javascript" src="http://g.alicdn.com/dingding/dingtalk-jsapi/2.3.0/dingtalk.open.js" > </script>
or npm is also acceptable
Recommended tutorial: "HTML"
2. DingTalk's own API requires authentication, so you must authenticate before using it. Right
Get the authentication of DingTalk interface
dd.config({ agentId:agentid, // 必填,微应用ID corpId:corpId,//必填,企业ID timeStamp:timeStamp, // 必填,生成签名的时间戳 nonceStr: nonceStr, // 必填,生成签名的随机串 signature:signature, // 必填,签名 type:0, jsApiList : [ 'runtime.info', 'biz.contact.choose','biz.contact.chooseMobileContacts', 'device.notification.confirm', 'device.notification.alert', 'device.notification.prompt', 'biz.ding.post','biz.util.previewImage', 'biz.util.openLink','device.geolocation.start','device.geolocation.get','biz.util.uploadImageFromCamera','biz.util.uploadImage' , 'device.audio.startRecord','device.audio.stopRecord','device.audio.play','device.audio.pause','device.audio.download','device.audio.translateVoice','device.audio.onPlayEnd' ] // 必填,需要使用的jsapi列表,注意:不要带dd。 });
3. After authentication, you can use DingTalk API in the project, but when calling When using DingTalk’s API, it must be executed in dd.ready, otherwise an error will be reported
dd.ready(()=>{ //获取地理位置 dd.device.geolocation.get({ targetAccuracy : Number, coordinate : Number, withReGeocode : Boolean, useCache:true, //默认是true,如果需要频繁获取地理位置,请设置false onSuccess : (result) =>{ alert('succe: ' + JSON.stringify(result)) }, onFail : (err) => { alert('fail: ' + JSON.stringify(err)) } }) })
PS: If you use DingTalk’s API globally, you can Called on the app.vue page, you can also call it on main.js
Related tutorials: "CSS Tutorial"
The above is the detailed content of HTML5 embedded DingTalk tutorial. For more information, please follow other related articles on the PHP Chinese website!