關鍵字：微信公眾平台 二維碼 海報
作者：方倍工作室
原文: http://www.cnblogs.com/txw1958/p/weixin-poster.html
本文介紹微信公眾平台下二維碼海報的開發過程。
一、微信二維碼海報介紹
微信二維碼海報是指在海報中嵌入和微信用戶關聯的參數二維碼的海報，用戶分享推廣之后，新用戶可以被統計為被推廣人員數，從而達到增加粉絲的傳播效果。其使用場景如下：
二、開發流程
在微信二維碼海報生成中，需要用到以下信息
1. 自定義菜單中設置一個菜單項，點擊后返回二維碼海報給用戶
2. 接口接收到菜單點擊之后，獲取用戶的頭像、ID(可以使用OpenID)
3. 生成和用戶關聯的參數二維碼，
4. 將參數二維碼進行縮放
5. 將頭像和參數二維碼合並成新的參數二維碼圖片
6. 將新參數二維碼圖片做為水印合成到背景海報中
7. 將用戶昵稱，以及二維碼時間戳(類型為臨時二維碼時)等文字合成到背景海報中
8. 將海報上傳成臨時圖片素材
9. 將圖片素材使用客服接口發送給用戶。
三、微信素材准備
海報底圖如下
3.1 生成自定義菜單
菜單的生成方法，請參考《微信公眾平台開發（58）自定義菜單》以及方倍工作室的書籍《微信公眾平台開發最佳實踐(第2版)》
本項目中使用的菜單JSON為
{ "button": [ { "name": "🐬我", "sub_button": [ { "type": "click", "name": "🎃我的海報", "key": "POSTER" }, { "type": "view", "name": "📣推廣二維碼", "url": "http://nine.doucube.com/home/scene/index" }, { "type": "click", "name": "免費路由器", "key": "ROUTER" } ] }, { "name": "掃碼發圖", "sub_button": [ { "type": "scancode_waitmsg", "name": "掃碼帶提示", "key": "rselfmenu_0_0" }, { "type": "scancode_push", "name": "掃碼推事件", "key": "rselfmenu_0_1" }, { "type": "pic_photo_or_album", "name": "拍照或相冊發圖", "key": "rselfmenu_1_1" } ] }, { "name": "發送位置", "type": "location_select", "key": "rselfmenu_2_0" } ] }
3.2 獲取用戶基本信息
使用方倍工作室SDK獲取用戶基本信息的方法如下
//獲取用戶信息 $userinfo = $weixin->get_user_info($openid); var_dump($userinfo); //獲取用戶頭像 64像素 $headimgurl = substr($userinfo['headimgurl'],0,strripos($userinfo['headimgurl'], "/"))."/64"; var_dump($headimgurl); // $headimgurl = "http://wx.qlogo.cn/mmopen/R9V6295VOlibNsicszoREqUF2CiaY8hL5fFt0D8DykUCjJ8ia4rQicbYViax3A2V0am2oUEWvw5awGia0tmwQEbI0tAu4kkCL7Eiaeia7/64";
需要注意的是，用戶默認頭像是640像素的大圖，將其切換成64位像素大小，以便放置在二維碼中間。
同樣的，用戶基本信息的獲取方法，請參考《微信公眾平台開發(76) 獲取用戶基本信息 》以及方倍工作室的書籍《微信公眾平台開發最佳實踐(第2版)》
用戶頭像信息如下所示
3.3 生成參數二維碼
使用方倍工作室SDK獲取用戶基本信息的方法如下
//創建永久二維碼，參數為用戶openid $qrcodeinfo = $weixin->create_qrcode("QR_LIMIT_STR_SCENE", $openid); var_dump($qrcodeinfo); $qrcodeurl = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=".urlencode($qrcodeinfo["ticket"]); var_dump($qrcodeurl); // $qrcodeurl = "https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=gQHf7zoAAAAAAAAAASxodHRwOi8vd2VpeGluLnFxLmNvbS9xL05rUGlyTXJsd2hxN3BCUnFNbTlNAAIEu1X8VwMEAAAAAA%3D%3D";
參數二維碼可以考慮使用永久字符串的，也可以考慮使用臨時數字，臨時數字優點沒有上限限制，缺點是有有效期。永久的則相反。
同樣的，參數二維碼的獲取方法，請參考《微信公眾平台開發(83) 生成帶參數二維碼》以及方倍工作室的書籍《微信公眾平台開發最佳實踐(第2版)》
參數二維碼如下所示
四、微信二維碼海報生成
4.1 二維碼縮放
微信二維碼默認是430像素，將其縮放成300像素，核心代碼如下
imagecopyresampled($qrcode_thumb, $qrcode_source, 0, 0, 0, 0, 300, 300, 430, 430);
4.2 頭像合成到二維碼圖片上
核心代碼如下
imagecopy($qrcode_thumb, $head_source, 118, 118, 0, 0, 64, 64);
合成后，效果如下
4.3 二維碼合成到海報中
核心代碼如下
//加水印 imagecopy($dst_qr, $qrcode_thumb, 212, 410, 0, 0, 300, 300); //水印位置
4.4 文字合成到海報中
核心代碼如下
imagettftext($dst_qr, 30, 0, 40, 85, $textcolor, $font, $text);
合成后效果如下
五、素材上傳與發送
5.1 上傳臨時圖片素材
使用方倍工作室SDK上傳圖片素材的方法如下
//將圖片上傳臨時圖文素材 $material = $weixin->upload_temporary_material("image", $filename); //logo.jpg須放於類同目錄，注意路徑 var_dump($material); $mediaid = $material["media_id"]; // array(3) { ["type"]=> string(5) "image" ["media_id"]=> string(64) "21Lz-eMFoSsA_R5gLOUJOqxbGw6YEEPRQq-UjHVbU6q64VyUBUqt7B8252ySPKdt" ["created_at"]=> int(1487213817) }
上傳后，獲得圖片的media_id
5.2 使用客服接口發送圖片
使用方倍工作室SDK發送圖片的方法如下
//客服接口發送臨時圖片素材 $send_result = $weixin->send_custom_message($openid, "image", array('media_id'=>$mediaid)); var_dump($send_result);
六、演示
關注方倍工作室微信公眾賬號，點擊菜單“我的海報”
六、內容更新及源碼下載
本節最新的教程說明及源代碼已在《微信公眾平台開發最佳實踐第3版》一書中發布，歡迎購買。