H5微信服务号实现分享关联方法

2021-09-06 阅读：2719 类型：后端分类：微信开发标签：微信开发 html

思路：分享关联，我们通过分享携带参数的方法，携带什么参数呢？最简单的方法就是携带用户的openid，以下是实现的分享关联的方法案例

1、index.php文件：获取code,并且获取分享参数

<?php
$appid='appid';
$shareop = $_GET["op"];
$redirect_uri = urlencode ( 'http://www.tpxhm.com/demo/getUserInfo.php?shareop='.$shareop );
$url ="https://open.weixin.qq.com/connect/oauth2/authorize?appid=$appid&redirect_uri=$redirect_uri&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
header("Location:".$url);
?>

2、getUserInfo.php授权获取用户信息，并实现分享功能

<?php
header("Access-Control-Allow-Origin:*");
$appid = "appid";  
$secret = "secret";  
$code = $_GET["code"];
//第一步:取得openid
$oauth2Url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid=$appid&secret=$secret&code=$code&grant_type=authorization_code";
$oauth2 = getJson($oauth2Url);
//第二步:根据全局access_token和openid查询用户信息  
$access_token = $oauth2["access_token"];  
$openid = $oauth2['openid'];  
$get_user_info_url = "https://api.weixin.qq.com/sns/userinfo?access_token=$access_token&openid=$openid&lang=zh_CN";
$userinfo = getJson($get_user_info_url);


$shareop = $_GET["shareop"];
//打印用户信息
 // print_r($userinfo); exit;
function getJson($url){
  $ch = curl_init();
  curl_setopt($ch, CURLOPT_URL, $url);
  curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); 
  curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); 
  curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
  $output = curl_exec($ch);
  curl_close($ch);
  return json_decode($output, true);
}

// 步骤2.生成签名的随机串
  function nonceStr($length){
    $str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJK1NGJBQRSTUVWXYZ';//随即串，62个字符
    $strlen = 62;
    while($length > $strlen){
      $str .= $str;
      $strlen += 62;
    }
    $str = str_shuffle($str);
    return substr($str,0,$length);
  }
  // 步骤3.获取access_token
  $result = http_get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$secret);
  $json = json_decode($result,true);
  $access_token = $json['access_token'];
  function http_get($url){
    $oCurl = curl_init();
    if(stripos($url,"https://")!==FALSE){
      curl_setopt($oCurl, CURLOPT_SSL_VERIFYPEER, FALSE);
      curl_setopt($oCurl, CURLOPT_SSL_VERIFYHOST, FALSE);
      curl_setopt($oCurl, CURLOPT_SSLVERSION, 1); //CURL_SSLVERSION_TLSv1
    }
    curl_setopt($oCurl, CURLOPT_URL, $url);
    curl_setopt($oCurl, CURLOPT_RETURNTRANSFER, 1 );
    $sContent = curl_exec($oCurl);
    $aStatus = curl_getinfo($oCurl);
    curl_close($oCurl);
    if(intval($aStatus["http_code"])==200){
      return $sContent;
    }else{
      return false;
    }
  }
  // 步骤4.获取ticket
  $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$access_token";
  $res = json_decode ( http_get ( $url ) );
  $ticket = $res->ticket;
  // 步骤5.生成wx.config需要的参数
  $surl = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
  $ws = getWxConfig( $ticket,$surl,time(),nonceStr(16) );
  function getWxConfig($jsapiTicket,$url,$timestamp,$nonceStr) {
    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
    $signature = sha1 ( $string );
    $WxConfig["appId"] = $appid;
    $WxConfig["nonceStr"] = $nonceStr;
    $WxConfig["timestamp"] = $timestamp;
    $WxConfig["url"] = $url;
    $WxConfig["signature"] = $signature;
    $WxConfig["rawString"] = $string;
    return $WxConfig;
  }


?>

<!doctype html>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<title>demo</title>


</head>

<script type="text/javascript">

  var code = '<?php echo $userinfo['errcode']?>'
if(code !=41001){
  localStorage.setItem('openid','<?php echo $userinfo['openid'];?>')
  localStorage.setItem('nickName','<?php echo $userinfo['nickname'];?>')
  localStorage.setItem('sex','<?php echo $userinfo['sex'];?>')
  localStorage.setItem('city','<?php echo $userinfo['city'];?>')
  localStorage.setItem('country','<?php echo $userinfo['country'];?>')
  localStorage.setItem('province','<?php echo $userinfo['province'];?>')
  localStorage.setItem('headimgurl','<?php echo $userinfo['headimgurl'];?>')
}else{
  console.log(2456)
}
if(localStorage.getItem('openid')==null){
  window.location.href="http://www.tpxhm.com/index.php?op="+'<?php echo $shareop;?>'
}

</script>
<body>
<!-- 分享 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script>
  // 配置接口成功
  wx.config({
    appId: '<?php echo $appid; ?>',
    timestamp: '<?php echo $ws["timestamp"]; ?>',
    nonceStr: '<?php echo $ws["nonceStr"]; ?>',
    signature: '<?php echo $ws["signature"]; ?>',
    jsApiList: [ // 必填，需要使用的JS接口列表
      'updateAppMessageShareData', // 自定义“分享给朋友”
      'updateTimelineShareData', // 自定义“分享到朋友圈”
       'playVoice', // 播放录音的接口
    ]
  });
  wx.ready(function() {
    wx.updateAppMessageShareData({
      title: '分享标题', // 分享标题
      desc: '分享描述', // 分享描述
      link: 'http://www.tpxhm.com/demo/index.php?op='+localStorage.getItem('openid'),
      imgUrl: 'http://www.tpxhm.com/demo/images/share.jpg', // 分享图标
      success: function () {
        // 设置成功
      }
    })
    wx.updateTimelineShareData({
      title: '分享标题', // 分享标题
      link: 'http://www.tpxhm.com/demo/index.php?op='+localStorage.getItem('openid'),
      imgUrl: 'http://www.tpxhm.com/demo/images/share.jpg', // 分享图标
      success: function () {
        // 设置成功
      }
    })
  });



</script>
</body>

</html>