小程序模板網(wǎng)

微信小程序?qū)崿F(xiàn)帶參二維碼,后臺交互/wx.request({})方法/渲染頁面方法 ...

發(fā)布時間:2018-04-16 10:32 所屬欄目:小程序開發(fā)教程

 

作者:秀杰,授權(quán)地址 
效果圖:

場景:生成一個帶用戶參數(shù)的二維碼,顯示在小程序端或打印輸入,其他人掃碼進(jìn)入識別用戶來路

**后端:**php實現(xiàn)

調(diào)用接口:https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential與https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode

小程序端:<image src="https://youdomain.com/getQRCode?uid=123456" />,無js調(diào)用

文檔出處:https://mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html

注意點:二維碼生成的過程與小程序端邏輯無關(guān),在后端實現(xiàn)生成圖片輸出給<image>即可。

由于代碼比較簡單,就直接上代碼了

 

  1. // 服務(wù)端生成圖片
  2. public function getQRCode() {
  3. // 獲取access_token
  4. $accessTokenObject = json_decode(file_get_contents('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.WxPayConfig::APPID.'&secret='.WxPayConfig::APPSECRET));
  5. // 拼接微信服務(wù)端獲取二維碼需要的url,見文檔https://mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html
  6. $url = 'https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=' . $accessTokenObject->access_token;
  7. $uid = $this->input->get('uid');
  8. $json = '{"path": "pages/index/index?"' . $uid . ', "width": 430}';
  9. $ch = curl_init();
  10. //設(shè)置超時
  11. curl_setopt($ch, CURLOPT_TIMEOUT, 60);
  12. //如果有配置代理這里就設(shè)置代理
  13. if(WxPayConfig::CURL_PROXY_HOST != "0.0.0.0"
  14. && WxPayConfig::CURL_PROXY_PORT != 0){
  15. curl_setopt($ch,CURLOPT_PROXY, WxPayConfig::CURL_PROXY_HOST);
  16. curl_setopt($ch,CURLOPT_PROXYPORT, WxPayConfig::CURL_PROXY_PORT);
  17. }
  18. curl_setopt($ch,CURLOPT_URL, $url);
  19. curl_setopt($ch,CURLOPT_SSL_VERIFYPEER,TRUE);
  20. curl_setopt($ch,CURLOPT_SSL_VERIFYHOST,2);//嚴(yán)格校驗
  21. //要求結(jié)果為字符串且輸出到屏幕上
  22. curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
  23. //設(shè)置header
  24. header('Content-Type: image/jpeg');
  25. //post提交方式
  26. curl_setopt($ch, CURLOPT_POST, TRUE);
  27. curl_setopt($ch, CURLOPT_POSTFIELDS, $json);
  28. //運行curl
  29. $data = curl_exec($ch);
  30. //返回結(jié)果
  31. curl_close($ch);
  32. echo $data;
  33. }

header設(shè)置為header('Content-Type: image/jpeg');然后echo服務(wù)端返回的二進(jìn)制data就可以了。

源碼下載:http://git.oschina.net/dotton/lendoo-wx,本文涉及代碼存于/pages/member/share文件夾中。

更多信息請看:  跳坑《九十》帶參數(shù)二維碼相關(guān)知識(帶參二維碼)40159錯誤

 

二:后臺交互/wx.request({})方法/渲染頁面方法

分享者:霓虹,原文地址  的后臺獲取數(shù)據(jù)方式get/post具體函數(shù)格式如下:wx.request({})

 

  1. data: {
  2. logs:[]
  3. },
  4. onLoad:function(){
  5. this.getdata();
  6.  
  7. }
  8. getdata:function(){//定義函數(shù)名稱
  9. var that=this; // 這個地方非常重要,重置data{}里數(shù)據(jù)時候setData方法的this應(yīng)為以及函數(shù)的this, 如果在下方的sucess直接寫this就變成了wx.request()的this了
  10. wx.request({
  11. url:'http://www.phonegap100.com/appapi.php?a=getPortalCate',//請求地址
  12. data:{//發(fā)送給后臺的數(shù)據(jù)
  13. name:"bella",
  14. age:20
  15. },
  16. header:{//請求頭
  17. "Content-Type":"applciation/json"
  18. },
  19. method:"GET",//get為默認(rèn)方法/POST
  20. success:function(res){
  21. console.log(res.data);//res.data相當(dāng)于ajax里面的data,為后臺返回的數(shù)據(jù)
  22.       that.setData({//如果在sucess直接寫this就變成了wx.request()的this了.必須為getdata函數(shù)的this,不然無法重置調(diào)用函數(shù)
  23.  
  24.       logs:res.data.result
  25.  
  26.           })
  27.  
  28. },
  29. fail:function(err){},//請求失敗
  30. complete:function(){}//請求完成后執(zhí)行的函數(shù)
  31. })
  32. },

wxml頁面:

 

  1. <view wx:for="{{logs}}" wx:for-item="value">
  2. {{value.catname}}
  3. </view>

頁面結(jié)果: 



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/23432.html 復(fù)制鏈接 如需定制請聯(lián)系易優(yōu)客服咨詢:800182392 點擊咨詢
QQ在線咨詢