老板最近有點飄了,他要在PC端的網站放一個微信小程序的二維碼,並且掃描這個二維碼以后要跳到小程序對應的房源詳情頁。
這是微信官方給出的文檔,連接地址:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/qr-code.html
方法一:生成小程序帶參二維碼
【方形碼】如圖:官方給出的文檔說的很簡單,頁沒有個demo.可能是給大佬看的,像我這種一般的程序員看起來還是有點困難。
【系統環境】
小姐姐這邊的系統環境是Linux系統,nginx的服務器,thinkPHP5.6的框架。
實現代碼如下:
根據微信官方的步驟;
第一步:要先獲取調用API接口的accesstoken;
1 public function getAccessToken(){ 2 3 $appid = '公司的小程序appid'; 4 5 $secret = '公司的小程序sercret'; 6 7 $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$secret; 8 9 $res = json_decode($this->httpGet($url)); 10 11 $access_token = @$res->access_token; 12 13 return $access_token; 14 15 }
第二步:請求微信獲取二維碼的接口:
官方文檔如圖:
小姐姐代碼:
public function getXcxCode(){ //獲取access token $ACCESS_TOKEN = $this->getAccessToken(); //創建二維碼 $qcode ="https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=".$ACCESS_TOKEN; $param = json_encode(array("path"=>"pages/detail/detail?id=5084","width"=> 150)); $result = $this->httpRequest( $qcode, $param,"POST"); $path = 'uploads/qrcode/h.jpg'; file_put_contents($path, $result); $return['status_code'] = 2000; $return['msg'] = 'ok'; $return['img'] = 'https://公司域名.com/' . $path; echo '<img src="'.$return['img'].'" />';exit; echo json_encode($return);exit; $base64_image ="data:image/jpeg;base64,".base64_encode( $result ); return '<image src='.$base64_image.'></image>'; }
有個問題是,官方給的返回的二維碼是一個base64的圖片,但是這種圖片在保存的時候很不方便,就需要我們把base64的圖片轉化成png.或者jpg格式的圖片進行保存。
本以為這樣子就可以大功告成,下班去約會了,竊喜中,
沒想到😂在我實際操作的過程中的file_put_contents竟然給報錯了,哇~~~~~~
不要慌張, 百度查了資料,這個是因為文件的讀寫權限問題,我們文件夾的權限通常是755,然后把文件夾權限修改成777就可以了。
說老板有點飄了,確實就是止不住了,方形的二維碼嫌丑,非得讓我搞一個圓形的漂亮一點的小程序碼。。。。。
由於房源的數量比較多,所以就選擇了wxacode.getUnlimited這個接口。
首先第一步同樣的是先要獲取access token;
同上,就不多說了;
微信官方給的文檔:
雖然可以通過scene來傳遞很多的參數,但是在實際傳參數的過程中頁出現了很多問題,我之前傳遞的參數,他接受不到。
雖然至生成了二維碼,也跳轉到了詳情頁面,就是個空頁面,對應的房源id並沒有傳遞過去。。。
請求參數scene也只做了簡單說明
看得小姐姐是一臉懵逼,在scene參數這里也出現了很多問題,在網上找了好久的技術貼還是么有找到合適的demo.
這也是我為什么非要下定決心去寫這篇博客要去知道更多人的原因。
小姐姐的代碼來嘍
public function xcxCode() { $id = trim($this->request->param('id','5084','intval')); $access_token = $this->getAccessToken(); $url = "https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=" . $access_token; $data['scene'] = 'h' . $id; //小程序的詳情頁路徑 $data['path'] = 'pages/detail/detail'; //二維碼大小 $data['width'] = '430'; $res = $this->http($url, json_encode($data),1); $path = 'uploads/qrcode/h' . $id . '.jpg'; file_put_contents($path, $res); $return['status_code'] = 2000; $return['msg'] = 'ok'; $return['img'] = 'https://公司域名.com/' . $path; echo '<img src="'.$return['img'].'" />';exit; echo json_encode($return);exit; }
小程序碼經歷千辛萬苦終於出現在了我的面前。
小程序生成帶參數的二維碼【小程序的圓形碼】保存成jpg圖片上傳到服務器
不知到會不會對后面看到的程序員們一點指引。也算是貢獻一點余熱了。哈哈哈哈