剛寫完釘釘?shù)腍5微應(yīng)用,在此記錄一些H5里面調(diào)用釘釘原生的方法 H5使用的是vue2寫的
- 首先引入釘釘?shù)膕dk包,我是在index.html中直接引用的,然后就可以直接在H5中使用dd的一些不需要鑒權(quán)的方法了,如果需要調(diào)用獲取位置等之類的方法,得先調(diào)用鑒權(quán)的方法,具體的可以參考官方文檔 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>
- 鑒權(quán), 需要使用鑒權(quán)才能調(diào)用的方法的時(shí)候可以調(diào)用鑒權(quán),不需要的可以不鑒權(quán),直接上代碼
我是通過(guò)接口從后臺(tái)拿到的一些 鑒權(quán)需要用到的數(shù)據(jù)
this.$api.auth
.getDDConfig()
.then(res => {
window.dd.config({
agentId: 'xxxxx', // 必填，微應(yīng)用ID
corpId: res.data.corpId, //必填，企業(yè)ID
timeStamp: res.data.timestamp, // 必填，生成簽名的時(shí)間戳
nonceStr: res.data.nonceStr, // 必填倒淫，自定義固定字符串蚕捉。
signature: res.data.signature, // 必填降铸，簽名
type: 0, //選填路召。0表示微應(yīng)用的jsapi,1表示服務(wù)窗的jsapi；不填默認(rèn)為0幔嗦。該參數(shù)從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邀泉。
})
})
釘釘掃一掃方法使用(不需要鑒權(quán))
- 因?yàn)轫?yè)面中有多個(gè)地方需要使用掃一掃方法,所以我都是在vue中的mixin里面寫的
// mixins/index.js
// 掃碼
getScan() {
return new Promise((resolve, reject) => {
// 釘釘環(huán)境
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)
//調(diào)用 在需要用的.vue 文件中
this.getScan().then(res => {
const code = res.text // 拿到二維碼返回的信息
//接下來(lái)就可以走自己的邏輯流程了
})
設(shè)置小程序標(biāo)題(不需要鑒權(quán))
// mixins/index.js
setTitle(name) {
window.dd.biz.navigation.setTitle({
title: name, //控制標(biāo)題文本，空字符串表示顯示默認(rèn)文本
onSuccess: function() {
/*結(jié)構(gòu)
{
}*/
},
onFail: function() {}
})
}
// 使用
this.setTitle('標(biāo)題')
控制左上角返回按鈕 (不需要鑒權(quán))
- 得注意一下 android 和ios中 控制左上角返回是不一樣的(被這個(gè)坑過(guò))
// mixins/index.js
// 控制左上角返回按鈕 在主頁(yè)面不返回
leftTopButton() {
const _this = this
return new Promise(resolve => {
// 安卓中調(diào)用的是這種
if (_this.getPhoneEnv() === 'android') {
document.addEventListener('backbutton', function(e) {
resolve()
// 在這里處理你的業(yè)務(wù)邏輯
e.preventDefault() //backbutton事件的默認(rèn)行為是回退歷史記錄钝鸽，如果你想阻止默認(rèn)的回退行為汇恤，那么可以通過(guò)preventDefault()實(shí)現(xiàn)
})
}
// ios 使用的是這種
window.dd.biz.navigation.setLeft({
control: true, //是否控制點(diǎn)擊事件，true 控制寞埠，false 不控制屁置， 默認(rèn)false
text: '', //控制顯示文本，空字符串表示顯示默認(rèn)文本
onSuccess: function() {
resolve()
//如果control為true仁连，則onSuccess將在發(fā)生按鈕點(diǎn)擊事件被回調(diào)
},
onFail: function() {}
})
})
},
//使用 通過(guò)上面那樣封裝一下,使用就比較簡(jiǎn)單了 直接調(diào)用即可
this.leftTopButton().then(() => {
// 在這里面寫你想跳哪就跳哪
this.$router.push(params)
})
- 其他的還有一些方法,需要用到的話 可以自己去官網(wǎng)查看
還有一些關(guān)于消息鏈接跳轉(zhuǎn)的小問(wèn)題
1631866768(1).png
- 其中的 redirect_url傳的參數(shù)問(wèn)題
得是redirect_url=https://www.xxx.com/h5/xxx
不能是redirect_url=https://www.xxx.com/h5/xxx/#/login 這種, 因?yàn)檫@種得話釘釘會(huì)從#開始截取掉,被這個(gè)坑了一下
還有就是傳參的問(wèn)題,鏈接上面只接收一個(gè)參數(shù) 如果有多個(gè)參數(shù)可以使用 ?data='xxx,xxxx'這種
正確格式如下:
dingtalk://dingtalkclient/action/openapp?corpid=免登企業(yè)corpId&container_type=work_platform&app_id=0_{應(yīng)用agentid}&redirect_type=jump&redirect_url=https://www.xxx.com/h5/xxx?data='xxx,xxx'
