公眾號中,底部都是有自己定義的功能按鈕,通過點擊某個按鈕來實現指定的業務邏輯操作。
下面就來說說這些按鈕是怎樣放到微信公眾平台的,還是先來看看微信的官方解釋:
請注意:
1、自定義菜單最多包括3個一級菜單,每個一級菜單最多包含5個二級菜單。
2、一級菜單最多4個漢字,二級菜單最多7個漢字,多出來的部分將會以“...”代替。
3、創建自定義菜單后,菜單的刷新策略是,在用戶進入公眾號會話頁或公眾號profile頁時,如果發現上一次拉取菜單的請求在5分鍾以前,就會拉取一下菜單,
如果菜單有更新,就會刷新客戶端的菜單。測試時可以嘗試取消關注公眾賬號后再次關注,則可以看到創建后的效果。
自定義菜單接口可實現多種類型按鈕,如下:(由於click和view是最常見的事件,所以先講這兩個)
1、click:點擊推事件 用戶點擊click類型按鈕后,微信服務器會通過消息接口推送消息類型為event的結構給開發者(參考消息接口指南),
並且帶上按鈕中開發者填寫的key值, 開發者可以通過自定義的key值與用戶進行交互;
2、view:跳轉URL 用戶點擊view類型按鈕后,微信客戶端將會打開開發者在按鈕中填寫的網頁URL,可與網頁授權獲取用戶基本信息接口結合,獲得用戶基本信息。
創建自定義菜單其實也是通過http請求方式,實現自定義菜單的寫入,請求地址: https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN
下面來看一下官方給出的實例:
{ "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" }] }] }
觀察上面的實例可以看出,其實就是一串JSON數據,你可以選擇用字符串拼接的形式將其存儲,也可以選擇文件存儲。
這里我使用的文件儲存,將上面的實例存儲到一個叫menu.txt文件中(這里建立的好處是可以把自定義菜單與微信公眾號開發的程序文件分開,避免每次改自定義菜單也都要發布程序,除非有業務邏輯的更改)。建立一個專門創建自定義菜單的頁面wxMenuManage.aspx,其實自定義菜單通過本地執行頁面就可以將自定義菜單同步到微信服務器上面,具體請看下面的代碼:
public partial class wxMenuManage : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } /// <summary> /// 讀取並創建自定義菜單 /// </summary> private void CreateMenu() { FileStream fs = new FileStream(HttpContext.Current.Server.MapPath(".") + "\\menu.txt", FileMode.Open); StreamReader sr = new StreamReader(fs, Encoding.GetEncoding("GBK")); string menu = sr.ReadToEnd(); sr.Close(); fs.Close(); sr.Dispose(); fs.Dispose(); string access_token =wxAccess_token.IsExistAccess_Token(); //獲取access_token string i = GetPage("https://api.weixin.qq.com/cgi-bin/menu/create?access_token=" + access_token, menu); Response.Write("創建菜單結果:" + i); Response.End(); } /// <summary> /// 刪除菜單 /// </summary> private void DeleteMenu() { string access_token =wxAccess_token.IsExistAccess_Token(); //獲取access_token string i = GetPage("https://api.weixin.qq.com/cgi-bin/menu/delete?access_token=" + access_token, ""); Response.Write("刪除菜單結果:" + i); Response.End(); } /// <summary> /// 獲取自定義菜單 /// </summary> /// <param name="posturl">自定義菜單請求的地址</param> /// <param name="postData">自定義菜單內容</param> /// <returns></returns> private string GetPage(string posturl, string postData) { Stream outstream = null; Stream instream = null; StreamReader sr = null; HttpWebResponse response = null; HttpWebRequest request = null; Encoding encoding = Encoding.UTF8; byte[] data = null; if (postData.Length > 0) //有值代表創建菜單 { data = encoding.GetBytes(postData); } // 准備請求... try { // 設置參數 request = WebRequest.Create(posturl) as HttpWebRequest; CookieContainer cookieContainer = new CookieContainer(); request.CookieContainer = cookieContainer; request.AllowAutoRedirect = true; if (postData.Length > 0) { request.Method = "POST"; //創建菜單 } else { request.Method = "GET"; //刪除菜單 } request.ContentType = "application/x-www-form-urlencoded"; if (postData.Length > 0) //有值代表創建菜單 { request.ContentLength = data.Length; outstream = request.GetRequestStream(); outstream.Write(data, 0, data.Length); outstream.Close(); } //發送請求並獲取相應回應數據 response = request.GetResponse() as HttpWebResponse; //直到request.GetResponse()程序才開始向目標網頁發送Post請求 instream = response.GetResponseStream(); sr = new StreamReader(instream, encoding); //返回結果網頁(html)代碼 string content = sr.ReadToEnd(); string err = string.Empty; return content; } catch (Exception ex) { string err = ex.Message; Response.Write(err); Response.End(); return string.Empty; } } /// <summary> /// 創建菜單 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void btnCreate_Click(object sender, EventArgs e) { CreateMenu(); } /// <summary> /// 刪除菜單 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void btnDelete_Click(object sender, EventArgs e) { DeleteMenu(); } }
再來看一下我的前台頁面:
<form id="form1" runat="server"> <div> <table style="width: 100%;text-align: center;margin-top: 30px;"> <tr> <td style="text-align: right;margin-right: 10px;"> <asp:Button runat="server" ID="btnCreate" Text="創建菜單" OnClick="btnCreate_Click"/> </td> <td style="text-align: left;margin-left: 10px;"> <asp:Button runat="server" ID="btnDelete" Text="刪除菜單" OnClick="btnDelete_Click"/> </td> </tr> <tr> <td colspan="2"> <h3 style="color: red;">*注:創建之前請先刪除菜單<br/>(創建完成之后新菜單將在五分鍾之內生效)</h3> </td> </tr> </table> </div> </form>
這里需要注意的幾點:
1、頁面中我我用到了一個“創建菜單”的按鈕和一個“刪除菜單”的按鈕,因為在創建菜單之前必須要刪除之前的菜單,否則創建可能會失敗(第一次的時候可以直接創建)
2、“wxAccess_token.IsExistAccess_Token(); //獲取access_token”方法是我將前文提到的IsExistAccess_Token()方法和GetAccess_token()都封裝到了一個wxAccess_token類中
3、創建菜單的時候請求的是https://api.weixin.qq.com/cgi-bin/menu/create?access_token=" + access_token使用POST請求,刪除菜單的時候請求的是https://api.weixin.qq.com/cgi-bin/menu/delete?access_token=" + access_token使用GET請求
4、這里我是將menu.txt和wxMenuManage.aspx放到了同一目錄下,你在使用的時候注意他們的路徑
這些工作完成之后,就可以在本地運行wxMenuManage.aspx頁面了,
點擊刪除菜單按鈕如果頁面輸出的結果是,“刪除菜單結果:{"errcode":0,"errmsg":"ok"}”,說明刪除成功
點擊創建菜單按鈕如果頁面輸出的結果是,“創建菜單結果:{"errcode":0,"errmsg":"ok"}",說明創建成功
然后把你的微信公眾號取消關注,再關注就可以看到你自己的菜單了