微信H5后台开发

/

2018-4-2

微信后台开发流程:

  1. 注册

  2. 基本配置\服务器配置

  3. 基本配置过程用到的服务端代码

    1. <?php
    2. // 微信服务器配置(验证token)
    3. $signatur=$_GET['signature'];
    4. $timestamp=$_GET['timestamp'];
    5. $nonce=$_GET['nonce'];
    6. $echostr=$_GET['echostr'];
    7. // 网页上填的token
    8. $token="hanxiao666";
    9. $tmpArr= array($token,$timestamp,$nonce);
    10. sort($tmpArr,SORT_STRING);
    11. $tmpStr=implode($tmpArr);
    12. $tmpStr=sha1($tmpStr);
    13. if($tmpStr==$signatur){
    14. return $echostr;
    15. }
    16. else{
    17. return "";
    18. }
    19. ?>
  4. 常用接口方法

    1. accesstoken接口:很多接口的基础参数,见代码

      1. function getToken($appid,$appsecret,$redis){
      2. if(empty($redis->get('wx_accessToken'))){
      3. $ch = curl_init();
      4. $timeout = 5;
      5. curl_setopt($ch,CURLOPT_URL,'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$appsecret);
      6. curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
      7. $output=curl_exec($ch);
      8. curl_close($ch);
      9. $accessToken=json_decode($output)->access_token;
      10. $redis->set("wx_accessToken",$accessToken);
      11. $redis->expire("wx_accessTokne",2400);
      12. return $accessToken;
      13. }
      14. else{
      15. return $redis->get('wx_accessToken');
      16. }
      17. }
      18. function refreshToken($appid,$appsecret,$redis){
      19. $ch = curl_init();
      20. $timeout = 5;
      21. curl_setopt($ch,CURLOPT_URL,'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$appsecret);
      22. curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
      23. $output=curl_exec($ch);
      24. curl_close($ch);
      25. $accessToken=json_decode($output)->access_token;
      26. $redis->set("wx_accessToken",$accessToken);
      27. $redis->expire("wx_accessTokne",2400);
      28. return $accessToken;
      29. }
    2. signature接口:前端在使用JS-SDK的时候需要进行注册,也就是前端的wx.config,其中有一个参数叫signature,需要后端协助获取,前端会传给我们一个字符串(一般来说是定值,不变),一个时间戳,一个url(包含传来请求的JS代码的前端路由),我们会先获取一个基础access_token,注意,不是前端可以独自获取的那个带跳转url的access_token,此非彼,然后通过access_token再获取一个ticket,再通过ticket与前端传来的三个字段进行一系列加密,即可获得signature,返回,前端即可成功调用wx-JS-SDK

      1. function getTicket($accessToken,$redis,$appid,$appsecret){
      2. if(!empty($redis->get("wx_ticket"))&&$redis->get("wx_ticket")!="" ){
      3. return $redis->get("wx_ticket");
      4. }
      5. else{
      6. $ch = curl_init();
      7. $timeout = 5;
      8. curl_setopt($ch,CURLOPT_URL,'https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token='. $accessToken.'&type=jsapi');
      9. curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
      10. $output=curl_exec($ch);
      11. curl_close($ch);
      12. if( json_decode($output)->errcode != '0'){
      13. return getTicket(refreshToken($appid,$appsecret,$redis),$redis,$appid,$appsecret);
      14. }
      15. $ticket=json_decode($output)->ticket;
      16. $redis->set("wx_ticket",$ticket);
      17. $redis->expire("wx_ticket",3600);
      18. return $redis->get("wx_ticket");
      19. };
      20. }
      21. function makeSignature($ticket,$randstr,$timestamp,$url){
      22. $tmpStr='jsapi_ticket='.$ticket.'&noncestr='.$randstr.'&timestamp='.$timestamp.'&url='.$url;
      23. $tmpStr=sha1($tmpStr);
      24. return $tmpStr;
      25. }
    3. 入口:

      1. //跨域解决,可以忽略
      2. header('Access-Control-Allow-Origin:*');
      3. header('Access-Control-Allow-Headers:Origin, Content-Type, Cookie, Accept,token,tokenId,Accept,X-Requested-With');
      4. header('Access-Control-Allow-Methods:PUT,POST,GET,DELETE,OPTIONS');
      5. //********************
      6. $appid="XXXXXXX";
      7. $appsecret = "XXXXXXX";
      8. $redis = new redis();
      9. $redis->connect('127.0.0.1', 6379);
      10. $route=$_GET['route'];
      11. switch ($route){
      12. case accesstoken:
      13. $token = getToken($appid,$appsecret,$redis);
      14. echo json_encode("{\"accessToken\":\"".$token."\"}");
      15. break;
      16. case jssignature:
      17. $token= getToken($appid,$appsecret,$redis);
      18. $ticket = getTicket($token,$redis,$appid,$appsecret);
      19. $signature= makeSignature($ticket,$_GET['randstr'],$_GET['timestamp'],$_GET['url']);
      20. echo json_encode(" {\"signature\":\"".$signature."\"}");
      21. break;
      22. case webaccesstoken:
      23. $ch = curl_init();
      24. $timeout = 5;
      25. curl_setopt($ch,CURLOPT_URL,'https://api.weixin.qq.com/sns/oauth2/access_token?appid='. $appid.'&secret='.$appsecret.'&code='.$_GET['code'].'&grant_type=authorization_code');
      26. curl_setopt($ch,CURLOPT_RETURNTRANSFER,1);
      27. $output=curl_exec($ch);
      28. curl_close($ch);
      29. $openId=json_decode($output)->openid;
      30. echo json_encode(" {\"openid\":\"".$openId."\"}");
      31. break;
      32. }
  5. 关于前端域名的配置,要在微信公众平台上配置两个部分,不填写前端在微信开发者工具中获取access_token的时候会遇到各种奇怪的报错,不过如果用手机端测试会获得更详细的错误信息(错误码10003等)

    1. JS接口安全域名
    2. 网页授权获取用户基本信息中的回调页面域名
    3. Jssignature:大坑一个
      • 前端用的timestamp,nocestr等参数和后端要保持一致,时间戳是秒级
      • 一定要保证wx.config调用的页面url和制作签名的url一致
  6. 还有一些基础内容,信息自动回复,自定义菜单:

Reproduced please indicate the author and the source, and error a link to this page.
text link: //sealbaby.cn/wechatH5

Say something...

Website
Username
Email