用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

微信小程序实现带参二维码,后台交互/wx.request({})方法/渲染页面方法 ... ...

纸飞机 2018-3-8 09:36

一:微信小程序实现带参二维码作者:秀杰,授权地址 效果图:场景:生成一个带用户参数的二维码,显示在小程序端或打印输入,其他人扫码进入识别用户来路**后端:**php实现调用接口:https://api.weixin.qq.com/cgi- ...

作者:秀杰,

授权地址


效果图:

场景:生成一个带用户参数的二维码,显示在小程序端或打印输入,其他人扫码进入识别用户来路

**后端:**php实现

调用接口:

https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential

https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode

小程序端:,无js调用

文档出处:

https://mp.weixin.qq.com/debug/wxadoc/dev/api/qrcode.html

注意点:二维码生成的过程与小程序端逻辑无关,在后端实现生成图片输出给即可。

由于代码比较简单,就直接上代码了

  1. // 服务端生成图片
  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. // 拼接微信服务端获取二维码需要的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. //设置超时
  11. curl_setopt($ch, CURLOPT_TIMEOUT, 60);
  12. //如果有配置代理这里就设置代理
  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);//严格校验
  21. //要求结果为字符串且输出到屏幕上
  22. curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
  23. //设置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. //返回结果
  31. curl_close($ch);
  32. echo $data;
  33. }

header设置为header('Content-Type: image/jpeg');然后echo服务端返回的二进制data就可以了。

源码下载:

http://git.oschina.net/dotton/lendoo-wx

,本文涉及代码存于/pages/member/share文件夹中。

更多信息请看:

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

分享者:霓虹,

原文地址


的后台获取数据方式get/post具体函数格式如下:wx.request({})

  1. data: {
  2. logs:[]
  3. },
  4. onLoad:function(){
  5. this.getdata();
  6. }
  7. getdata:function(){//定义函数名称
  8. var that=this; // 这个地方非常重要,重置data{}里数据时候setData方法的this应为以及函数的this, 如果在下方的sucess直接写this就变成了wx.request()的this了
  9. wx.request({
  10. url:'http://www.phonegap100.com/appapi.php?a=getPortalCate',//请求地址
  11. data:{//发送给后台的数据
  12. name:"bella",
  13. age:20
  14. },
  15. header:{//请求头
  16. "Content-Type":"applciation/json"
  17. },
  18. method:"GET",//get为默认方法/POST
  19. success:function(res){
  20. console.log(res.data);//res.data相当于ajax里面的data,为后台返回的数据
  21.       that.setData({//如果在sucess直接写this就变成了wx.request()的this了.必须为getdata函数的this,不然无法重置调用函数
  22.       logs:res.data.result
  23.           })
  24. },
  25. fail:function(err){},//请求失败
  26. complete:function(){}//请求完成后执行的函数
  27. })
  28. },

wxml页面:

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

页面结果:

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏