首頁 > 建站資源 > 微信營銷 > 微信開發教程:自定義菜單掃一掃、發圖片、發地理位置

微信開發教程:自定義菜單掃一掃、發圖片、發地理位置

時間:2014-10-08    來源:方倍工作室

自定義菜單能夠幫助公眾號豐富界面,讓用戶更好更快地理解公眾號的重要功能。微信增加了點擊菜單后調起掃一掃(支持二維碼/一維碼)、發圖片、發地理位置的能力,需開發實現。原有自定義菜單開發權限的公眾號,均可獲得以上能力。

在這篇微信公眾平臺開發教程中,我們將介紹如何在自定義菜單上開發掃一掃、發圖片、發地理位置等功能。原有點擊和跳轉事件的開發,請參考微信公眾平臺開發(58)自定義菜單

本文分為以下二個部分:

  1. 掃一掃、發圖片、發地理位置介紹
  2. 生成掃一掃、發圖片、發地理位置功能菜單
  3. 開發掃一掃、發圖片、發地理位置響應程序
  4. 使用場景
一、菜單介紹

1. 掃碼推送事件 scancode_push
用戶點擊按鈕后,微信客戶端將調起掃一掃工具,完成掃碼操作后顯示掃描結果(如果是URL,將進入URL),且會將掃碼的結果傳給開發者,開發者可以下發消息。

2. 掃碼推送事件,且彈出“消息接收中”提示框 scancode_waitmsg
用戶點擊按鈕后,微信客戶端將調起掃一掃工具,完成掃碼操作后,將掃碼的結果傳給開發者,同時收起掃一掃工具,然后彈出“消息接收中”提示框,隨后可能會收到開發者下發的消息。

3. 彈出系統拍照發圖 pic_sysphoto
用戶點擊按鈕后,微信客戶端將調起系統相機,完成拍照操作后,將拍攝的相片發送給開發者,并推送事件給開發者,同時收起系統相機,隨后可能會收到開發者下發的消息。

4. 彈出拍照或者相冊發圖 pic_photo_or_album
用戶點擊按鈕后,微信客戶端將彈出選擇器供用戶選擇“拍照”或者“從手機相冊選擇”。用戶選擇后即走其他兩種流程。

5. 彈出微信相冊發圖器 pic_weixin
用戶點擊按鈕后,微信客戶端將調起微信相冊,完成選擇操作后,將選擇的相片發送給開發者的服務器,并推送事件給開發者,同時收起相冊,隨后可能會收到開發者下發的消息。

6. 彈出地理位置選擇器 location_select
用戶點擊按鈕后,微信客戶端將調起地理位置選擇工具,完成選擇操作后,將選擇的地理位置發送給開發者的服務器,同時收起位置選擇工具,隨后可能會收到開發者下發的消息。

以上新增能力,均僅支持微信iPhone5.4.1以上版本,和Android5.4以上版本的微信用戶,舊版本微信用戶點擊后將沒有回應,開發者也不能正常接收到事件推送。

接口調用請求說明

http請求方式:POST(請使用https協議)

 https://api.weixin.qq.com/cgi-bin/menu/create?access_token=ACCESS_TOKEN

 按鈕請求示例如下

{
    "button": [
        {
            "name": "掃碼", 
            "sub_button": [
                {
                    "type": "scancode_waitmsg", 
                    "name": "掃碼帶提示", 
                    "key": "rselfmenu_0_0", 
                    "sub_button": [ ]
                }, 
                {
                    "type": "scancode_push", 
                    "name": "掃碼推事件", 
                    "key": "rselfmenu_0_1", 
                    "sub_button": [ ]
                }
            ]
        }, 
        {
            "name": "發圖", 
            "sub_button": [
                {
                    "type": "pic_sysphoto", 
                    "name": "系統拍照發圖", 
                    "key": "rselfmenu_1_0", 
                   "sub_button": [ ]
                 }, 
                {
                    "type": "pic_photo_or_album", 
                    "name": "拍照或者相冊發圖", 
                    "key": "rselfmenu_1_1", 
                    "sub_button": [ ]
                }, 
                {
                    "type": "pic_weixin", 
                    "name": "微信相冊發圖", 
                    "key": "rselfmenu_1_2", 
                    "sub_button": [ ]
                }
            ]
        }, 
        {
            "name": "發送位置", 
            "type": "location_select", 
            "key": "rselfmenu_2_0"
        }
    ]
}

參數說明

參數是否必須說明
button 一級菜單數組,個數應為1~3個
sub_button 二級菜單數組,個數應為1~5個
type 菜單的響應動作類型
name 菜單標題,不超過16個字節,子菜單不超過40個字節
key click等點擊類型必須 菜單KEY值,用于消息接口推送,不超過128字節
url view類型必須 網頁鏈接,用戶點擊菜單可打開鏈接,不超過256字節

二、生成菜單

菜單具體的生成方法,與之前是一樣的,先生成access token,再將菜單post內容提交給微信服務器,具體代碼及方法可以參考 微信公眾平臺開發(58)自定義菜單

生成后的效果如下如示:

 

三、響應菜單點擊

響應菜單點擊,則需要在接口文件中添加新的EventKey事件的響應,并回復相應的內容。

相關代碼如下

 1     //接收事件消息
 2     private function receiveEvent($object)
 3     {
 4         $content = "";
 5         switch ($object->Event)
 6         {
 7             case "subscribe":
 8                 $content = "歡迎關注方倍工作室 ";
 9                 $content .= (!empty($object->EventKey))?("\n來自二維碼場景 ".str_replace("qrscene_","",$object->EventKey)):"";
10                 break;
11             case "unsubscribe":
12                 $content = "取消關注";
13                 break;
14             case "CLICK":
15                 switch ($object->EventKey)
16                 {
17                     case "COMPANY":
18                         $content = array();
19                         $content[] = array("Title"=>"方倍工作室", "Description"=>"", "PicUrl"=>"http://discuz.comli.com/weixin/weather/icon/cartoon.jpg", "Url" =>"http://m.cnblogs.com/?u=txw1958");
20                         break;
21                     default:
22                         $content = "點擊菜單:".$object->EventKey;
23                         break;
24                 }
25                 break;
26             case "VIEW":
27                 $content = "跳轉鏈接 ".$object->EventKey;
28                 break;
29             case "SCAN":
30                 $content = "掃描場景 ".$object->EventKey;
31                 break;
32             case "LOCATION":
33                 $content = "上傳位置:緯度 ".$object->Latitude.";經度 ".$object->Longitude;
34                 break;
35             case "scancode_waitmsg":
36                 $content = "掃碼帶提示:類型 ".$object->ScanCodeInfo->ScanType." 結果:".$object->ScanCodeInfo->ScanResult;
37                 break;
38             case "scancode_push":
39                 $content = "掃碼推事件";
40                 break;
41             case "pic_sysphoto":
42                 $content = "系統拍照";
43                 break;
44             case "pic_weixin":
45                 $content = "相冊發圖:數量 ".$object->SendPicsInfo->Count;
46                 break;
47             case "pic_photo_or_album":
48                 $content = "拍照或者相冊:數量 ".$object->SendPicsInfo->Count;
49                 break;
50             case "location_select":
51                 $content = "發送位置:標簽 ".$object->SendLocationInfo->Label;
52                 break;
53             default:
54                 $content = "receive a new event: ".$object->Event." \n技術支持 方倍工作室";
55                 break;
56         }
57 
58         if(is_array($content)){
59             if (isset($content[0]['PicUrl'])){
60                 $result = $this->transmitNews($object, $content);
61             }else if (isset($content['MusicUrl'])){
62                 $result = $this->transmitMusic($object, $content);
63             }
64         }else{
65             $result = $this->transmitText($object, $content);
66         }
67         return $result;
68     }

 各項類型推送給后臺的xml詳解如下

scancode_waitmsg,回應該事件給用戶,用戶可收到消息

<xml>
    <ToUserName><![CDATA[gh_82479813ed64]]></ToUserName>
    <FromUserName><![CDATA[ojpX_jig-gyi3_Q9fHXQ4rdHniQs]]></FromUserName>
    <CreateTime>1412075435</CreateTime>
    <MsgType><![CDATA[event]]></MsgType>
    <Event><![CDATA[scancode_waitmsg]]></Event>
    <EventKey><![CDATA[rselfmenu_0_0]]></EventKey>
    <ScanCodeInfo>
        <ScanType><![CDATA[qrcode]]></ScanType>
        <ScanResult><![CDATA[http://weixin.qq.com/r/pUNnf4HEX9wgrcUc9xa3]]></ScanResult>
        <EventKey><![CDATA[rselfmenu_0_0]]></EventKey>
    </ScanCodeInfo>
</xml>

scancode_push,回應該事件給用戶,用戶不能收到消息

<xml>
    <ToUserName><![CDATA[gh_82479813ed64]]></ToUserName>
    <FromUserName><![CDATA[ojpX_jig-gyi3_Q9fHXQ4rdHniQs]]></FromUserName>
    <CreateTime>1412075451</CreateTime>
    <MsgType><![CDATA[event]]></MsgType>
    <Event><![CDATA[scancode_push]]></Event>
    <EventKey><![CDATA[rselfmenu_0_1]]></EventKey>
    <ScanCodeInfo>
        <ScanType><![CDATA[qrcode]]></ScanType>
        <ScanResult><![CDATA[http://weixin.qq.com/r/pUNnf4HEX9wgrcUc9xa3]]></ScanResult>
        <EventKey><![CDATA[rselfmenu_0_1]]></EventKey>
    </ScanCodeInfo>
</xml>

pic_weixin ,下面是一次推送3張相片時的數據

<xml>
    <ToUserName><![CDATA[gh_82479813ed64]]></ToUserName>
    <FromUserName><![CDATA[ojpX_jig-gyi3_Q9fHXQ4rdHniQs]]></FromUserName>
    <CreateTime>1412075552</CreateTime>
    <MsgType><![CDATA[event]]></MsgType>
    <Event><![CDATA[pic_weixin]]></Event>
    <EventKey><![CDATA[rselfmenu_1_2]]></EventKey>
    <SendPicsInfo>
        <Count>3</Count>
        <PicList>
            <item>
                <PicMd5Sum><![CDATA[a6ab74b73a298f49f6fc66f41f88d3c7]]></PicMd5Sum>
            </item>
            <item>
                <PicMd5Sum><![CDATA[5b9aea2b3683c5c21aaf3629739cafd9]]></PicMd5Sum>
            </item>
            <item>
                <PicMd5Sum><![CDATA[2325ff3f39705ac987d3e0660906791d]]></PicMd5Sum>
            </item>
        </PicList>
        <EventKey><![CDATA[rselfmenu_1_2]]></EventKey>
    </SendPicsInfo>
</xml>

回應上述消息,用戶收不到,但微信會繼續推送3個圖片消息給接口

<xml>
    <ToUserName><![CDATA[gh_82479813ed64]]></ToUserName>
    <FromUserName><![CDATA[ojpX_jig-gyi3_Q9fHXQ4rdHniQs]]></FromUserName>
    <CreateTime>1412075562</CreateTime>
    <MsgType><![CDATA[image]]></MsgType>
    <PicUrl><![CDATA[http://mmbiz.qpic.cn/mmbiz/qOTIrRtMKFxZQo3cQ6vYxmfteo0fw2Y00MuuFS6OjlNvTkx0nBQJibjjafQMf4dCtJwyMeP5e3SQCuJpcoJdb8Q/0]]></PicUrl>
    <MsgId>6064818358471506877</MsgId>
    <MediaId><![CDATA[AM8Gbiu7S2vTIMS2l9zNCWiMCpeM8wccmKdFxmstHiuAybCbB-08dTQJN40cCIBD]]></MediaId>
</xml>
<xml>
    <ToUserName><![CDATA[gh_82479813ed64]]></ToUserName>
    <FromUserName><![CDATA[ojpX_jig-gyi3_Q9fHXQ4rdHniQs]]></FromUserName>
    <CreateTime>1412075564</CreateTime>
    <MsgType><![CDATA[image]]></MsgType>
    <PicUrl><![CDATA[http://mmbiz.qpic.cn/mmbiz/qOTIrRtMKFxZQo3cQ6vYxmfteo0fw2Y0ellMniarWto4zL0pWKhr6a0FSARDeXprSgd0JmgU0YQo2iagGsYc1iaLA/0]]></PicUrl>
    <MsgId>6064818367061441471</MsgId>
    <MediaId><![CDATA[2CJKZ2mft-5hWEkVcVmnKwyvp3y59Uzv7YdpBsnGIyTlkMNb0ytU4oimTgimBGyP]]></MediaId>
</xml>
<xml>
    <ToUserName><![CDATA[gh_82479813ed64]]></ToUserName>
    <FromUserName><![CDATA[ojpX_jig-gyi3_Q9fHXQ4rdHniQs]]></FromUserName>
    <CreateTime>1412075567</CreateTime>
    <MsgType><![CDATA[image]]></MsgType>
    <PicUrl><![CDATA[http://mmbiz.qpic.cn/mmbiz/qOTIrRtMKFxZQo3cQ6vYxmfteo0fw2Y0mwQoENttnmYAz0VTicY3xkO0lhn9mE5r3FB4cF04kia50riajcjY1qvzA/0]]></PicUrl>
    <MsgId>6064818379946343361</MsgId>
    <MediaId><![CDATA[VICm1-y8w_MmdpcLYWP0u12HVXrWdhm3c3tdq1PTsbiFFgH6YOcmmIEbZ27z-Qcl]]></MediaId>
</xml>

上述多個圖片消息,后臺收到都能進行單獨回應,用戶可以收到響應消息。

pic_photo_or_album,方式和pic_weixin 一樣,先推送菜單事件,再推送圖片消息

<xml>
    <ToUserName><![CDATA[gh_82479813ed64]]></ToUserName>
    <FromUserName><![CDATA[ojpX_jig-gyi3_Q9fHXQ4rdHniQs]]></FromUserName>
    <CreateTime>1412075614</CreateTime>
    <MsgType><![CDATA[event]]></MsgType>
    <Event><![CDATA[pic_photo_or_album]]></Event>
    <EventKey><![CDATA[rselfmenu_1_1]]></EventKey>
    <SendPicsInfo>
        <Count>1</Count>
        <PicList>
            <item>
                <PicMd5Sum><![CDATA[58f4989164b2a432889e64fa81632152]]></PicMd5Sum>
            </item>
        </PicList>
        <EventKey><![CDATA[rselfmenu_1_1]]></EventKey>
    </SendPicsInfo>
</xml>
<xml>
    <ToUserName><![CDATA[gh_82479813ed64]]></ToUserName>
    <FromUserName><![CDATA[ojpX_jig-gyi3_Q9fHXQ4rdHniQs]]></FromUserName>
    <CreateTime>1412075618</CreateTime>
    <MsgType><![CDATA[image]]></MsgType>
    <PicUrl><![CDATA[http://mmbiz.qpic.cn/mmbiz/qOTIrRtMKFxZQo3cQ6vYxmfteo0fw2Y0fwSdF54rribCj9zqDG0wVDsiasKuUC8gskbuZmX43a1hs9esySIvmrqA/0]]></PicUrl>
    <MsgId>6064818598989675467</MsgId>
    <MediaId><![CDATA[Jh7Bsjaodmz-Dc_Hdz_wRzY3RiFxNvA4JHpUWRNRCIgps19ANsDFIOYOUV1dIVYV]]></MediaId>
</xml>

 pic_sysphoto 這個后臺其實收不到該菜單的消息,點擊它后,調用的是手機里面的照相機功能,而照相以后再發過來時,就收到的是一個圖片消息了

<xml>
    <ToUserName><![CDATA[gh_82479813ed64]]></ToUserName>
    <FromUserName><![CDATA[ojpX_jig-gyi3_Q9fHXQ4rdHniQs]]></FromUserName>
    <CreateTime>1412135923</CreateTime>
    <MsgType><![CDATA[image]]></MsgType>
    <PicUrl><![CDATA[http://mmbiz.qpic.cn/mmbiz/qOTIrRtMKFxGzYCchrNiczZ9aCd1fgCEWbicHGvmaz1d7VZOSMqoLB4RL69rK2Fos6fSM4FJRkLtiajpe32ibkicw1A/0]]></PicUrl>
    <MsgId>6065077606992462276</MsgId>
    <MediaId><![CDATA[PqRRUPLhMc27EG5F4cCtTozBsin7SY8kPRRuAF-CwPl5MzR5ewE5oji0FhGTDl6_]]></MediaId>
</xml>

location_select 將會調起發送位置功能,菜單的響應用戶收不到,在用戶發送位置之后,會再推送一個地理位置消息功能給用戶

<xml>
    <ToUserName><![CDATA[gh_82479813ed64]]></ToUserName>
    <FromUserName><![CDATA[ojpX_jig-gyi3_Q9fHXQ4rdHniQs]]></FromUserName>
    <CreateTime>1412075681</CreateTime>
    <MsgType><![CDATA[event]]></MsgType>
    <Event><![CDATA[location_select]]></Event>
    <EventKey><![CDATA[rselfmenu_2_0]]></span>EventKey>
    <SendLocationInfo>
        <Location_X><![CDATA[22.538145]]></Location_X>
        <Location_Y><![CDATA[113.952298]]></Location_Y>
        <Scale><![CDATA[13]]></Scale>
        <Label><![CDATA[深圳市南山區高新南一道9號]]></Label>
        <Poiname><![CDATA[]]></Poiname>
        <EventKey><![CDATA[rselfmenu_2_0]]></EventKey>
    </SendLocationInfo>
</xml>
<xml>
    <ToUserName><![CDATA[gh_82479813ed64]]></ToUserName>
    <FromUserName><![CDATA[ojpX_jig-gyi3_Q9fHXQ4rdHniQs]]></FromUserName>
    <CreateTime>1412075681</CreateTime>
    <MsgType><![CDATA[location]]></MsgType>
    <Location_X>22.538145</Location_X>
    <Location_Y>113.952298</Location_Y>
    <Scale>13</Scale>
    <Label><![CDATA[深圳市南山區高新南一道9號飛亞達科技大廈方倍工作室]]></Label>
    <MsgId>6064818869572615123</MsgId>
</xml>
四、使用場景

4.1 產品二維碼檢測真偽

 使用scancode_waitmsg事件,可以獲得掃描結果,再與現有結果進行比對,從而可以達到檢測二維碼真實性的功能。

一個檢測代碼如下所示:

1 case "scancode_waitmsg":
2     if ($object->ScanCodeInfo->ScanResult == "http://mm.wanggou.com/item/jd2.shtml?sku=11447844"){
3         $content = array();
4         $content[] = array("Title"=>"該產品檢測結果為正品", "Description"=>"書名:微信公眾平臺開發最佳實踐\n定價:¥69.00\n作者:方倍工作室\n\n點擊“查看全文”,使用微信支付在線購買", "PicUrl"=>"http://images.cnitblog.com/i/340216/201404/301756448922305.jpg", "Url" =>"http://mm.wanggou.com/item/jd2.shtml?sku=11447844");
5     }else{
6         $content = "掃碼帶提示:類型 ".$object->ScanCodeInfo->ScanType." 結果:".$object->ScanCodeInfo->ScanResult;
7     }
8     break;

當用戶使用scancode_waitmsg菜單掃描以下二維碼時,將出現檢測結果,結果為真時,還可以再進一步,讓用戶進入購買

4.2 快遞進度查詢

基于上面同樣的原理,可以實現掃描快遞條形碼,就查詢快遞進度的功能。

一個快遞的單號如下

掃描以后,返回結果為 

掃碼帶提示:類型 qrcode/CODE_39 結果:762480955342

正確識別了其中的快遞單號

4.3 導航/附近/地圖

location_select事件比之前的直接發送地理位置消息更少了一步,比如下面的

相關推薦
微信5.0上線 自定義菜單申請將重新開啟
微信公眾平臺開發模式自定義菜單開發指南
微信公眾平臺創建自定義菜單的PHP代碼
微信公眾帳號自定義菜單創建及事件響應開發教程 附源代碼
微信公眾帳號自定義菜單接口開發流程示例
微信公眾平臺服務號自定義菜單開發代碼實例
微信公眾號自定義菜單申請與使用問題解答
微信服務號申請自定義菜單的介紹
微信公眾平臺自定義菜單創建的Java代碼示例
從微信自定義菜單猜想微信App平臺化的未來
微信公眾平臺自定義菜單開發文檔詳解
微信公眾號開放自定義菜單 可輸入跳轉網址
微信公眾號頁面模版功能和圖文消息正文可插入歷史群發鏈
“掃一掃”與會員升級 微信并沒有想象中那么簡單
微信公眾平臺消息接口使用教程
微信公眾平臺教程:沒有正確響應Token驗證的解決方法
微信公眾平臺消息接口開發教程之語音觸發應用
微信公眾平臺接口開發教程之人臉識別應用
微信公眾平臺消息接口開發之小黃雞機器人應用
微信公眾平臺開發教程之在線音樂/在線點歌
微信公眾平臺開發教程之快遞查詢應用
微信公眾平臺API接口開發教程
微信公眾平臺開發教程之通用接口API指南
微信公眾平臺教程之生成帶參數二維碼
微信公眾平臺開發模式啟用及接口配置圖文教程
微信公眾平臺消息接口開發教程 附封裝工具實例代碼
微信公眾平臺開發教程之消息的接收與響應實例代碼
微信公眾帳號開發教程之文本消息長度限制詳解
微信公眾平臺開發教程之文本消息換行符詳解
微信公眾帳號開發教程之文本消息中如何添加網頁超鏈接
微信公眾平臺開發教程之QQ表情的發送與接收
微信開發教程之解析接口中的消息創建時間CreateTime
微信公眾平臺開發教程之符號表情的發送(1)
微信公眾帳號開發教程之符號表情的發送(2)

精彩推薦

熱門教程

北京pk10走势图下载 时时彩怎么玩才稳赚 玩幸运飞艇彩票合法吗 前三直选走势图 重庆时时奖开彩龙虎和 360北京pk10赛车走势图 买什么烟倒卖赚钱 如何写微信文章赚钱 我的赚钱自传 北京pk10开奖记录删除 期期单双中特 MG游戏送彩金平台 七星彩下载软件