本文將圍繞“如何在釘釘企業應用中自定義右上角菜單”這一主題進行講解，并結合現代前端技術棧（Vue3 + Composition API）展示完整實現過程，幫助你快速構建具備原生交互體驗的企業應用。
一、前置準備
1. 注冊釘釘開發者賬號并創建應用
- 訪問?釘釘開放平臺
- 創建一個?企業內部應用
- 獲取以下參數：
corpId：企業唯一標識agentId：應用的 Agent ID
注意：確保你的應用已開啟“前端接口權限”，并配置了正確的域名白名單（必須 HTTPS）
二、自定義右上角菜單的作用與原理
釘釘默認為每個頁面提供了一個“...”按鈕，點擊后可看到一些系統默認的操作項（如刷新、復制鏈接等）。通過調用釘釘提供的 JSAPI 接口，我們可以覆蓋這個菜單，添加我們自己的按鈕和事件處理邏輯。
核心流程如下：
- 頁面加載時調用?
dd.http.get?或?dd.http.post?獲取必要的數據或狀態； - 調用?
dd.showActionSheet?或?dd.ui.setRight()?設置右上角按鈕； - 綁定點擊事件，執行業務邏輯（如跳轉頁面、提交數據等）；
三、前端實現詳解（基于 Vue3 + Composition API）
我們將使用釘釘提供的 JSAPI 實現自定義右上角菜單按鈕，并綁定點擊事件。
1. 引入釘釘 SDK
在 HTML 文件中引入釘釘官方 JSAPI：
<script src="https://g.alicdn.com/dingding/open-develop/1.11.5/dingtalk.js"></script>2. 創建自定義菜單組件（CustomMenu.vue）
<template><div class="menu-container"><h2>歡迎使用自定義右上角菜單</h2><p>點擊右上角按鈕可以執行自定義操作。</p><p v-if="actionResult" style="color: green;">{{ actionResult }}</p></div>
</template><script setup>
import { ref, onMounted } from 'vue';const actionResult = ref('');onMounted(() => {if (window.dd) {// 設置右上角按鈕dd.ui.setRight({show: true, // 顯示按鈕text: '更多', // 按鈕文字onSuccess: () => {console.log("右上角按鈕被點擊");// 觸發自定義菜單彈出dd.actionSheet({title: "請選擇操作",items: ["刷新數據", "提交表單", "關于本頁"],onSuccess: (result) => {const index = result.itemIndex;let selected = "";switch(index) {case 0:selected = "刷新數據";refreshData();break;case 1:selected = "提交表單";submitForm();break;case 2:selected = "關于本頁";showAbout();break;default:selected = "未知操作";}actionResult.value = `您選擇了：${selected}`;},onFail: (err) => {console.error("菜單彈出失敗：", err);}});},onFail: (err) => {console.error("設置右上角按鈕失敗：", err);}});} else {console.warn("當前環境不支持釘釘 JSAPI");}
});// 示例方法：刷新數據
function refreshData() {console.log("開始刷新數據...");// 可在此處調用 dd.http.get 請求更新數據
}// 示例方法：提交表單
function submitForm() {console.log("開始提交表單...");// 可在此處調用 dd.http.post 提交表單數據
}// 示例方法：顯示關于信息
function showAbout() {console.log("顯示關于信息");alert("這是一個演示頁面，用于展示釘釘右上角菜單的自定義功能。");
}
</script><style scoped>
.menu-container {padding: 20px;max-width: 600px;margin: auto;font-family: Arial, sans-serif;
}
</style>四、關鍵代碼解析
| 方法 | 描述 |
|---|---|
dd.ui.setRight({ show, text, onSuccess }) | 設置右上角按鈕樣式與點擊行為 |
dd.actionSheet({ title, items, onSuccess }) | 彈出底部操作菜單 |
dd.http.get(url)?/?dd.http.post(url, data) | 發起網絡請求獲取或提交數據 |
五、常見問題與調試建議
| 問題 | 解決方案 |
|---|---|
dd is not defined | 確保在釘釘客戶端內打開頁面，且 SDK 已正確加載 |
| 按鈕不顯示 | 檢查是否調用了?setRight?并設置了?show: true |
| 菜單無法彈出 | 查看是否被其他 UI 層遮擋或未觸發?onSuccess |
| 域名未授權 | 確保訪問地址已在釘釘后臺配置為合法域名 |
| 權限不足 | 檢查是否開啟了“前端 JSAPI 權限” |
六、總結
通過本文的學習，我們掌握了如何在釘釘企業應用中使用 JSAPI 自定義右上角菜單，并結合 Vue3 實現了完整的前端交互邏輯。這種能力不僅可以提升用戶體驗，還能讓我們的應用更貼近釘釘平臺的原生風格，增強整體一致性。
未來，我們還可以進一步拓展該功能，例如結合 dd.http 請求動態生成菜單項、根據用戶角色顯示不同菜單內容等，從而打造更加智能和個性化的企業應用界面。
)
