快捷導(dǎo)航

C#微信公眾號開發(fā)之自定義菜單

更新時間：2022年06月15日 11:45:40 作者：艾三元

這篇文章介紹了C#微信公眾號開發(fā)之自定義菜單，文中通過示例代碼介紹的非常詳細。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

前言:

回顧之前的微信公眾號配置和消息處理的內(nèi)容，我們已經(jīng)掌握了如何配置服務(wù)器與微信公眾號建立連接，也掌握了通過消息管理的方式，對用戶的信息進行處理，完成公眾號消息回復(fù)功能，實現(xiàn)公眾號與用戶之間的完整對話。而在本文將針對自定義菜單做簡單的開發(fā)應(yīng)用，微信公眾平臺具有自定義菜單的功能。開發(fā)者可利用該功能為公眾賬號的會話界面底部增加自定義菜單，用戶點擊菜單中的選項，可以調(diào)出相應(yīng)的回復(fù)信息或網(wǎng)頁鏈接。自定義菜單接口將為公眾賬號的信息展示空間提供更多可能性。

說明：

1、自定義菜單最多包括3個一級菜單，每個一級菜單最多包含5個二級菜單。
2、一級菜單最多4個漢字，二級菜單最多7個漢字，多出來的部分將會以“...”代替。
3、創(chuàng)建自定義菜單后，菜單的刷新策略是，在用戶進入公眾號會話頁或公眾號profile頁時，如果發(fā)現(xiàn)上一次拉取菜單的請求在5分鐘以前，就會拉取一下菜單，如果菜單有更新，就會刷新客戶端的菜單。測試時可以嘗試取消關(guān)注公眾賬號后再次關(guān)注，則可以看到創(chuàng)建后的效果。

類型:

自定義菜單接口可實現(xiàn)多種類型按鈕，如下：

1、click：點擊推事件用戶點擊click類型按鈕后，微信服務(wù)器會通過消息接口推送消息類型為event的結(jié)構(gòu)給開發(fā)者（參考消息接口指南），并且?guī)习粹o中開發(fā)者填寫的key值，開發(fā)者可以通過自定義的key值與用戶進行交互；
2、view：跳轉(zhuǎn)URL用戶點擊view類型按鈕后，微信客戶端將會打開開發(fā)者在按鈕中填寫的網(wǎng)頁URL，可與網(wǎng)頁授權(quán)獲取用戶基本信息接口結(jié)合，獲得用戶基本信息。
3、scancode_push：掃碼推事件用戶點擊按鈕后，微信客戶端將調(diào)起掃一掃工具，完成掃碼操作后顯示掃描結(jié)果（如果是URL，將進入URL），且會將掃碼的結(jié)果傳給開發(fā)者，開發(fā)者可以下發(fā)消息。
4、scancode_waitmsg：掃碼推事件且彈出“消息接收中”提示框用戶點擊按鈕后，微信客戶端將調(diào)起掃一掃工具，完成掃碼操作后，將掃碼的結(jié)果傳給開發(fā)者，同時收起掃一掃工具，然后彈出“消息接收中”提示框，隨后可能會收到開發(fā)者下發(fā)的消息。
5、pic_sysphoto：彈出系統(tǒng)拍照發(fā)圖用戶點擊按鈕后，微信客戶端將調(diào)起系統(tǒng)相機，完成拍照操作后，會將拍攝的相片發(fā)送給開發(fā)者，并推送事件給開發(fā)者，同時收起系統(tǒng)相機，隨后可能會收到開發(fā)者下發(fā)的消息。
6、pic_photo_or_album：彈出拍照或者相冊發(fā)圖用戶點擊按鈕后，微信客戶端將彈出選擇器供用戶選擇“拍照”或者“從手機相冊選擇”。用戶選擇后即走其他兩種流程。
7、pic_weixin：彈出微信相冊發(fā)圖器用戶點擊按鈕后，微信客戶端將調(diào)起微信相冊，完成選擇操作后，將選擇的相片發(fā)送給開發(fā)者的服務(wù)器，并推送事件給開發(fā)者，同時收起相冊，隨后可能會收到開發(fā)者下發(fā)的消息。
8、location_select：彈出地理位置選擇器用戶點擊按鈕后，微信客戶端將調(diào)起地理位置選擇工具，完成選擇操作后，將選擇的地理位置發(fā)送給開發(fā)者的服務(wù)器，同時收起位置選擇工具，隨后可能會收到開發(fā)者下發(fā)的消息。
9、media_id：下發(fā)消息（除文本消息）用戶點擊media_id類型按鈕后，微信服務(wù)器會將開發(fā)者填寫的永久素材id對應(yīng)的素材下發(fā)給用戶，永久素材類型可以是圖片、音頻、視頻、圖文消息。請注意：永久素材id必須是在“素材管理/新增永久素材”接口上傳后獲得的合法id。
10、view_limited：跳轉(zhuǎn)圖文消息URL用戶點擊view_limited類型按鈕后，微信客戶端將打開開發(fā)者在按鈕中填寫的永久素材id對應(yīng)的圖文消息URL，永久素材類型只支持圖文消息。請注意：永久素材id必須是在“素材管理/新增永久素材”接口上傳后獲得的合法id。

資源：

1、借助Senparc.Weixin SDK
2、只需要前端和控制器，不需要數(shù)據(jù)庫

開始:

控制器：

新建一個UserMessageHandler.cs，實現(xiàn)編輯菜單，獲取菜單，刪除菜單

1、編輯(新增)菜單

        /// <summary>
        /// 編輯新增菜單
        /// </summary>
        /// <param name="resultFull">獲取菜單的完整結(jié)果</param>
        /// <param name="MenuMatchRule">個性化菜單規(guī)則</param>
        /// <returns></returns>
        [HttpPost]
        public ActionResult CreateMenu(GetMenuResultFull resultFull, MenuMatchRule MenuMatchRule)
        {
            // 使用appid 和appsecret 向微信憑證獲取接口請求access_token
            string AccessToken = Senparc.Weixin.MP.CommonAPIs.CommonApi.GetToken(AppId, AppSecret).access_token;  //獲取AccessToken值
            var IsAddCondidional = MenuMatchRule != null && !MenuMatchRule.CheckAllNull();
            var apiName = string.Format("使用接口：{0}。", (IsAddCondidional ? "個性化菜單接口" : "普通自定義菜單接口"));
            try
            {
                //重新整理按鈕信息
                WxJsonResult result = null;
                IButtonGroupBase buttonGroup = null;
                if (IsAddCondidional)
                {
                    //個性化接口
                    //微信公眾平臺新增了個性化菜單接口，開發(fā)者可以通過該接口，讓公眾號的不同用戶群體看到不一樣的自定義菜單
                    buttonGroup = Senparc.Weixin.MP.CommonAPIs.CommonApi.GetMenuFromJsonResult(resultFull, new ConditionalButtonGroup()).menu;
                    var ConditionalButtonGroup = buttonGroup as ConditionalButtonGroup;
                    ConditionalButtonGroup.matchrule = MenuMatchRule;
                    result = Senparc.Weixin.MP.CommonAPIs.CommonApi.CreateMenuConditional(AccessToken, ConditionalButtonGroup);
                    apiName += string.Format("menuid：{0}。", (result as CreateMenuConditionalResult).menuid);
                }
                else
                {
                    //普通接口
                    buttonGroup = Senparc.Weixin.MP.CommonAPIs.CommonApi.GetMenuFromJsonResult(resultFull, new ButtonGroup()).menu;
                    result = Senparc.Weixin.MP.CommonAPIs.CommonApi.CreateMenu(AccessToken, buttonGroup);
                }

                var json = new
                {
                    Success = result.errmsg == "ok",
                    Message = "菜單更新成功。" + apiName
                };
                return Json(json);
            }
            catch (Exception ex)
            {
                var json = new { Success = false, Message = string.Format("更新失敗：{0}。{1}", ex.Message, apiName) };
                return Json(json);
            }
        }

2、獲取菜單

        /// <summary>
        /// 獲取菜單
        /// </summary>
        /// <returns></returns>
        public ActionResult GetMenu()
        {
            string AccessToken = Senparc.Weixin.MP.CommonAPIs.CommonApi.GetToken(AppId, AppSecret).access_token;  //獲取AccessToken值
            var result = Senparc.Weixin.MP.CommonAPIs.CommonApi.GetMenu(AccessToken);
            if (result == null)
            {
                return Json(new { error = "菜單不存在或驗證失敗！" }, JsonRequestBehavior.AllowGet);
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }

3、刪除菜單

        /// <summary>
        /// 刪除菜單
        /// </summary>
        /// <returns></returns>
        public ActionResult DeleteMenu()
        {
            try
            {
                string AccessToken = Senparc.Weixin.MP.CommonAPIs.CommonApi.GetToken(AppId, AppSecret).access_token;  //獲取AccessToken值
                var result = Senparc.Weixin.MP.CommonAPIs.CommonApi.DeleteMenu(AccessToken);
                var json = new
                {
                    Success = result.errmsg == "ok",
                    Message = result.errmsg
                };
                return Json(json, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                var json = new { Success = false, Message = ex.Message };
                return Json(json, JsonRequestBehavior.AllowGet);
            }
        }

借助Senparc.Weixin SDK，快速的完成了對普通菜單和個性化菜單的實現(xiàn)。

前端界面：

在前端頁面中，我們可以將頁面設(shè)計為這種布局的樣式

請求示例：

{
    "button": [
        {
            "name": "灌籃高手",
            "sub_button": [
                {
                    "type": "view",
                    "url": "https://www.cnblogs.com/i3yuan/",
                    "name": "陵南高中"
                },
                {
                    "type": "view",
                    "url": "https://www.cnblogs.com/i3yuan/",
                    "name": "海南高中"
                },
                {
                    "type": "view",
                    "url": "https://www.cnblogs.com/i3yuan/",
                    "name": "湘北高中"
                }
            ]
        },
        {
            "name": "漫畫集",
            "sub_button": [
                {
                    "type": "view",
                    "url": "https://www.cnblogs.com/i3yuan/",
                    "name": "趣味漫畫"
                }
            ]
        },
        {
            "type": "view",
            "url": "",
            "name": "個人中心"
        }
    ]
}

效果：