這篇文章主要介紹微信開發(fā)中如何實(shí)現(xiàn)自定義菜單,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
10余年的謝家集網(wǎng)站建設(shè)經(jīng)驗(yàn),針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù),響應(yīng)快,48小時(shí)及時(shí)工作處理。全網(wǎng)整合營(yíng)銷推廣的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動(dòng)調(diào)整謝家集建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì),從而大程度地提升瀏覽體驗(yàn)。創(chuàng)新互聯(lián)從事“謝家集網(wǎng)站設(shè)計(jì)”,“謝家集網(wǎng)站推廣”以來,每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
一、自定義菜單概述
自定義菜單能夠幫助公眾號(hào)豐富界面,讓用戶更好更快地理解公眾號(hào)的功能。開啟自定義菜單后,公眾號(hào)界面如圖所示:
二、申請(qǐng)自定義菜單
個(gè)人訂閱號(hào)使用微博認(rèn)證、企業(yè)訂閱號(hào)通過微信認(rèn)證;可以申請(qǐng)到自定義菜單資格
服務(wù)號(hào)默認(rèn)有菜單權(quán)限。
三、獲得AppId 和AppSecert
AppId和AppSecret在開發(fā)者中心-開發(fā)者ID中,可以找到。
四、獲得Access Token
用appid和appsecert獲得access token,接口為
api.weixin.qq.com/cgi-bi ... mp;secret=APPSECRET
程序?qū)崿F(xiàn)如下
$appid = ""; $appsecret = ""; $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appid&secret=$appsecret"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $output = curl_exec($ch); curl_close($ch); $jsoninfo = json_decode($output, true); $access_token = $jsoninfo["access_token"];
你也可以直接在瀏覽器地址欄中,拼接出地址,執(zhí)行后,獲得如下數(shù)據(jù)
代碼如下:
{"access_token":"N2L7KXa084WvelONYjkJ_traBMCCvy_UKmpUUzlrQ0EA2yNp3Iz6eSUrRG0bhaR_viswd50vDuPkY5nG43d1gbm-olT2KRMxOsVE08RfeD9lvK9lMguNG9kpIkKGZEjIf8Jv2m9fFhf8bnNa-yQH3g",
代碼如下:
"expires_in":7200}
參數(shù)說明如下
其中的
N2L7KXa084WvelONYjkJ_traBMCCvy_UKmpUUzlrQ0EA2yNp3Iz6eSUrRG0bhaR_viswd50vDuPkY5nG43d1gbm-olT2KRMxOsVE08RfeD9lvK9lMguNG9kpIkKGZEjIf8Jv2m9fFhf8bnNa-yQH3g
就是access token。
或者使用官方的接口調(diào)試工具,地址為:
https://mp.weixin.qq.com/debug/cgi-bin/apiinfo?t=index&type=%E8%87%AA%E5%AE%9A%E4%B9%89%E8%8F%9C%E5%8D%95&form=%E8%87%AA%E5%AE%9A%E4%B9%89%E8%8F%9C%E5%8D%95%E5%88%9B%E5%BB%BA%E6%8E%A5%E5%8F%A3%20/menu/create
使用網(wǎng)頁調(diào)試工具調(diào)試自定義菜單接口
點(diǎn)擊檢查問題得,得到
這樣也獲得了access token
五、組織菜單內(nèi)容
目前自定義菜單最多包括3個(gè)一級(jí)菜單,每個(gè)一級(jí)菜單最多包含5個(gè)二級(jí)菜單。一級(jí)菜單最多4個(gè)漢字,二級(jí)菜單最多7個(gè)漢字,多出來的部分將會(huì)以“...”代 替。請(qǐng)注意,創(chuàng)建自定義菜單后,由于微信客戶端緩存,需要24小時(shí)微信客戶端才會(huì)展現(xiàn)出來。建議測(cè)試時(shí)可以嘗試取消關(guān)注公眾賬號(hào)后再次關(guān)注,則可以看到創(chuàng) 建后的效果。
目前自定義菜單接口可實(shí)現(xiàn)兩種類型按鈕,如下:
click:
用戶點(diǎn)擊click類型按鈕后,微信服務(wù)器會(huì)通過消息接口推送消息類型為event 的結(jié)構(gòu)給開發(fā)者(參考消息接口指南),并且?guī)习粹o中開發(fā)者填寫的key值,開發(fā)者可以通過自定義的key值與用戶進(jìn)行交互;
view:
用戶點(diǎn)擊view類型按鈕后,微信客戶端將會(huì)打開開發(fā)者在按鈕中填寫的url值 (即網(wǎng)頁鏈接),達(dá)到打開網(wǎng)頁的目的,建議與網(wǎng)頁授權(quán)獲取用戶基本信息接口結(jié)合,獲得用戶的登入個(gè)人信息。
接口調(diào)用請(qǐng)求說明
http請(qǐng)求方式:POST(請(qǐng)使用https協(xié)議) api.weixin.qq.com/cgi-bi ... _token=ACCESS_TOKEN
請(qǐng)求示例
{ "button":[ { "type":"click", "name":"今日歌曲", "key":"V1001_TODAY_MUSIC" }, { "type":"click", "name":"歌手簡(jiǎn)介", "key":"V1001_TODAY_SINGER" }, { "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" }] }] }
參數(shù)說明
返回結(jié)果
正確時(shí)的返回JSON數(shù)據(jù)包如下:
{"errcode":0,"errmsg":"ok"}
錯(cuò)誤時(shí)的返回JSON數(shù)據(jù)包如下(示例為無效菜單名長(zhǎng)度):
{"errcode":40018,"errmsg":"invalid button name size"}
六、提交菜單內(nèi)容給服務(wù)器
菜單的JSON結(jié)構(gòu)為
{"button": [{"name":"天氣預(yù)報(bào)","sub_button":[{"type":"click","name":"北京天氣","key":"天氣北 京"}, {"type":"click","name":"上海天氣","key":"天氣上海"}, {"type":"click","name":" 廣州天氣","key":"天氣廣州"},{"type":"click","name":"深圳天氣","key":"天氣深圳"}, {"type":"view","name":"本地天氣","url":"http://m.hao123.com/a/tianqi"}]}, {"name":"方倍工作室","sub_button":[{"type":"click","name":"公司簡(jiǎn) 介","key":"company"}, {"type":"click","name":"趣味游戲","key":"游戲"}, {"type":"click","name":"講個(gè)笑話","key":"笑話"}]}]}
將以下代碼保存為menu.php,并且在瀏覽器中運(yùn)行該文件(比如 127.0.0.1/menu.php),將直接向微信服務(wù)器提交菜單
php $access_token = ""; $jsonmenu = '{ "button":[ { "name":"天氣預(yù)報(bào)", "sub_button":[ { "type":"click", "name":"北京天氣", "key":"天氣北京" }, { "type":"click", "name":"上海天氣", "key":"天氣上海" }, { "type":"click", "name":"廣州天氣", "key":"天氣廣州" }, { "type":"click", "name":"深圳天氣", "key":"天氣深圳" }, { "type":"view", "name":"本地天氣", "url":"http://m.hao123.com/a/tianqi" }] }, { "name":"瑞雪", "sub_button":[ { "type":"click", "name":"公司簡(jiǎn)介", "key":"company" }, { "type":"click", "name":"趣味游戲", "key":"游戲" }, { "type":"click", "name":"講個(gè)笑話", "key":"笑話" }] }] }'; $url = "https://api.weixin.qq.com/cgi-bin/menu/create?access_token=".$access_token; $result = https_request($url, $jsonmenu); var_dump($result); function https_request($url,$data = null){ $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE); if (!empty($data)){ curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, $data); } curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); $output = curl_exec($curl); curl_close($curl); return $output; } ?>
或者使用官方的調(diào)試接口 使用網(wǎng)頁調(diào)試工具調(diào)試該接口
提交成功后,重新關(guān)注后即可看到菜單。菜單效果類似如下:
七、響應(yīng)菜單點(diǎn)擊事件
在消息接口中處理event事件,其中的click代表菜單點(diǎn)擊,通過響應(yīng)菜單結(jié)構(gòu)中的key值回應(yīng)消息,view事件無須響應(yīng),將直接跳轉(zhuǎn)過去
define("TOKEN", "weixin"); $wechatObj = new wechatCallbackapiTest(); if (!isset($_GET['echostr'])) { $wechatObj->responseMsg(); }else{ $wechatObj->valid(); } class wechatCallbackapiTest { public function valid() { $echoStr = $_GET["echostr"]; if($this->checkSignature()){ echo $echoStr; exit; } } private function checkSignature() { $signature = $_GET["signature"]; $timestamp = $_GET["timestamp"]; $nonce = $_GET["nonce"]; $token = TOKEN; $tmpArr = array($token, $timestamp, $nonce); sort($tmpArr); $tmpStr = implode( $tmpArr ); $tmpStr = sha1( $tmpStr ); if( $tmpStr == $signature ){ return true; }else{ return false; } } public function responseMsg() { $postStr = $GLOBALS["HTTP_RAW_POST_DATA"]; if (!empty($postStr)){ $postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA); $RX_TYPE = trim($postObj->MsgType); switch ($RX_TYPE) { case "text": $resultStr = $this->receiveText($postObj); break; case "event": $resultStr = $this->receiveEvent($postObj); break; default: $resultStr = ""; break; } echo $resultStr; }else { echo ""; exit; } } private function receiveText($object) { $funcFlag = 0; $contentStr = "你發(fā)送的內(nèi)容為:".$object->Content; $resultStr = $this->transmitText($object, $contentStr, $funcFlag); return $resultStr; } private function receiveEvent($object) { $contentStr = ""; switch ($object->Event) { case "subscribe": $contentStr = "歡迎洋洋博客"; case "unsubscribe": break; case "CLICK": switch ($object->EventKey) { case "company": $contentStr[] = array("Title" =>"公司簡(jiǎn)介", "Description" =>"洋洋的博客", "PicUrl" =>"http://discuz.comli.com/weixin/weather/icon/cartoon.jpg", "Url" =>"weixin://addfriend/pondbaystudio"); break; default: $contentStr[] = array("Title" =>"默認(rèn)菜單回復(fù)", "Description" =>"您正在使用的是洋洋的博客", "PicUrl" =>"http://discuz.comli.com/weixin/weather/icon/cartoon.jpg", "Url" =>"weixin://addfriend/pondbaystudio"); break; } break; default: break; } if (is_array($contentStr)){ $resultStr = $this->transmitNews($object, $contentStr); }else{ $resultStr = $this->transmitText($object, $contentStr); } return $resultStr; } private function transmitText($object, $content, $funcFlag = 0) { $textTpl = ""; $resultStr = sprintf($textTpl, $object->FromUserName, $object->ToUserName, time(), $content, $funcFlag); return $resultStr; } private function transmitNews($object, $arr_item, $funcFlag = 0) { //首條標(biāo)題28字,其他標(biāo)題39字 if(!is_array($arr_item)) return; $itemTpl = " %s %d - "; $item_str = ""; foreach ($arr_item as $item) $item_str .= sprintf($itemTpl, $item['Title'], $item['Description'], $item['PicUrl'], $item['Url']); $newsTpl = "
"; $resultStr = sprintf($newsTpl, $object->FromUserName, $object->ToUserName, time(), count($arr_item), $funcFlag); return $resultStr; } } ?> %s %s $item_str %s
八、菜單中獲取OpenID
由于菜單中只能填寫固定的url地址,對(duì)于想要菜單中獲取用戶的OpenID的情況,可以使用OAuth3.0授權(quán)的方式來實(shí)現(xiàn)。
URL中填寫的地址為一個(gè)固定的回調(diào)地址。原理方法可以參考 微信公眾平臺(tái)開發(fā)(99) 自定義菜單獲取OpenID
valid(); }else{ $wechatObj->responseMsg(); } class wechatCallbackapiTest { public function valid() { $echoStr = $_GET["echostr"]; if($this->checkSignature()){ header('content-type:text'); echo $echoStr; exit; } } private function checkSignature() { $signature = $_GET["signature"]; $timestamp = $_GET["timestamp"]; $nonce = $_GET["nonce"]; $token = TOKEN; $tmpArr = array($token, $timestamp, $nonce); sort($tmpArr, SORT_STRING); $tmpStr = implode( $tmpArr ); $tmpStr = sha1( $tmpStr ); if( $tmpStr == $signature ){ return true; }else{ return false; } } public function responseMsg() { $postStr = $GLOBALS["HTTP_RAW_POST_DATA"]; if (!empty($postStr)){ $postObj = simplexml_load_string($postStr, 'SimpleXMLElement', LIBXML_NOCDATA); $fromUsername = $postObj->FromUserName; $toUsername = $postObj->ToUserName; $keyword = trim($postObj->Content); $time = time(); $textTpl = ""; if($keyword == "?" || $keyword == "?") { $msgType = "text"; $contentStr = '當(dāng)前時(shí)間是:'.date("Y-m-d H:i:s",time()); $resultStr = sprintf($textTpl, $fromUsername, $toUsername, $time, $msgType, $contentStr); echo $resultStr; } }else{ echo ""; exit; } } } ?> %s 0
以上是“微信開發(fā)中如何實(shí)現(xiàn)自定義菜單”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!