ASP.NET Web API實現微信公眾平台開發（三）自定義菜單

承接之前的流程，在完成服務器綁定和獲取access_token之后，本文主要講述如何實現微信自定義菜單。

 

官方示例效果

 

開始之前

 

1、自定義菜單最多包括3個一級菜單，每個一級菜單最多包含5個二級菜單。
2、一級菜單最多4個漢字，二級菜單最多7個漢字，多出來的部分將會以“...”代替。
3、創建自定義菜單后，由於微信客戶端緩存，需要24小時微信客戶端才會展現出來。測試時可以嘗試取消關注公眾賬號后再次關注，則可以看到創建后的效果。

 

按鈕類型

 

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

 

更多細節請看官方文檔：http://mp.weixin.qq.com/wiki/13/43de8269be54a0a6f64413e4dfa94f39.html#

 

實現方式

 

研究文檔后，使用官方自定義菜單組建驗證后，可以發現，其實現原理十分簡單，開發者只需要把自定菜單結構json文件post到微信指定API，等待九小時后即可看到效果。

 

API接口：

 

//采用Post方式與https協議
https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN

 

其中ACCESS_TOKEN字段為獲取到的有效的token。

 

Post內容官方示例：

 

{
     "button":[
     {    
          "type":"click",
          "name":"今日歌曲",
          "key":"V1001_TODAY_MUSIC"
      },
      {
           "name":"菜單",
           "sub_button":[
           {    
               "type":"view",
               "name":"搜索",
               "url":"http://www.soso.com/"
            },
            {
               "type":"view",
               "name":"視頻",
               "url":"http://v.qq.com/"
            },
            {
               "type":"click",
               "name":"贊一下我們",
               "key":"V1001_GOOD"
            }]
       }]
 }

 

這里我采用Postman簡單驗證一下

 

 

發現順利通過，所以接下來我們要在我們的Web程序中作對應的實現。

 

實現思路：定義一個Post方法將需要的自定義鍵盤結構Post給web服務，web服務再對微信服務器發出定向請求，access_token和api均在內部處理。

 

代碼如下：

 

//Post處理方法
public async Task<HttpResponseMessage> Post(HttpRequestMessage request)
        {
            var json = await request.Content.ReadAsStringAsync();
            if (!string.IsNullOrEmpty(json))
            {
                var result = await CreateCustomMenu(json);
                return result;
            }
            return null;
        }
//創建自定義菜單
        private async Task<HttpResponseMessage> CreateCustomMenu(string json)
        {
            var api = "https://api.weixin.qq.com/cgi-bin/menu/create?access_token=" + Access_Token;
            var client = new HttpClient();
            var postContent = new StringContent(json, UTF8Encoding.UTF8, "application/json");
            var response=await client.PostAsync(api, postContent);
            return response;
        }

 

所以我們實際請求的API將會是我們自己定義的：http://cwwebservice.azurewebsites.net/api/wx ，下面使用Postman繼續驗證一下：

 

驗證通過

下面只需要靜靜等待9小時后，查看結果，預覽如下：

 

 

總結

 

自定義菜單是最常用的微信功能，很多功能都依賴此作進一步實現。至於菜單指令的處理，我將其歸入后續的消息回復和事件處理中。