1. 程式人生 > >微信公眾平臺開發(121) 微信二維碼海報

微信公眾平臺開發(121) 微信二維碼海報

關鍵字:微信公眾平臺 二維碼 海報
作者:方倍工作室
原文: 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為


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);

 

六、演示

關注方倍工作室微信公眾賬號,點選選單“我的海報”

 

 

六、原始碼

聯絡QQ 1354386063