H5页面分享到朋友或者朋友圈,其实是很容易的,但是对于没弄过的友友,下面的详细过程你可以仔细看看咯。
下面来看看具体流程
要分享到朋友(朋友圈),首先你要到微信公众号,网页要授权先。如图,在接口权限表里。
接口安全域名那里也填写了吧,用来调用微信开放的JS接口
配置好后,接下来就码代码了。网上很少有网页带上分享的代码,这里给大家先分享了。我写的是饿了么与美团的分享页面。
最近弄了一个饿了么与美团领取通用优惠券的。这个对于经常点外卖的朋友,是最合适不过了。因为点外卖可以省点钱呀!顺便再分享一下了。
美团外卖:美团外卖优惠券天天领饿了么: 饿了么通用优惠券,干饭省钱
模板文件
链接:https://pan.baidu.com/s/1vcM4TfYhBWP8JfkzCSZ1ww
提取码:zl01
代码,我用的是laravel框架,页面:index.blade.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>美团外卖优惠券-饿了么外卖优惠券-点击关注公众号[ i外卖优惠券 ]</title>
<meta name="keywords" content="美团外卖优惠券-饿了么外卖优惠券-点击关注公众号[ i外卖优惠券 ]">
<meta name="description" content="一键领取美团/饿了么外卖红包的网站,一键领取饿了么无门槛通用红包、品质联盟红包等各种外卖红包!">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<link rel="stylesheet" href="{{ url('frontResource/style/main.css') }}">
</head>
<body>
<header id="header">
<div class="content">
<h1><a href="#three">外卖优惠券每天免费领</a></h1>
<p><a href="#three">按(Ctrl+D)收藏本网站,每天都可领取!</a></p>
<hr>
<p><a href="#three">美团外卖、饿了么2~66元红包免费领无门槛使用、通用优惠券、下午茶红包、夜宵红包、美食红包等你领!</a></p>
</div>
</header>
<section id="three" class="wrapper style2 special">
<header class="major">
<h2 style="color:#FC0307; font-weight:bold;">领外卖通用优惠券,每天免费领</h2>
<h2>
<p>【点击下面链接直接领取】</p>
</h2>
</header>
<div>
<ul class="actions special">
<li><a href="https://mmbizurl.cn/s/JrnzHc3ly" class="button" rel="nofollow" target="_blank" style="background:#fec22c;">美团外卖最高68元</a></li>
</ul>
</div>
<div>
<ul class="actions special">
<li><a href="https://tb.g2h3.com/59x6G" class="button" rel="nofollow" target="_blank" style="background: #00b8fe">饿了么外卖优惠券</a></li>
</ul>
</div>
</section>
引入微信分享的js,这个是必须要引入的。
<script src="https://res2.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
分享的代码,该注意的是:nonceStr,signature,appId ,link都要加上引号,不然会报错。
<script>
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '<?php echo $data["appId"];?>', // 必填,公众号的唯一标识
timestamp:<?php echo $data["timestamp"];?>, // 必填,生成签名的时间戳
nonceStr:'<?php echo $data["nonceStr"];?>', // 必填,生成签名的随机串
signature:'<?php echo $data["signature"];?>',// 必填,签名
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'onMenuShareQQ',
'onMenuShareWeibo',
'onMenuShareQZone'
]
});
wx.ready(function(){
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,
// 所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。
// 对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
wx.error(function(res){
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,
// 也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
</script>
<script>
wx.ready(function() {
wx.onMenuShareTimeline(data);
wx.onMenuShareAppMessage(data);
});
//
var data={
title: '外卖优惠券免费领取', // 分享标题
desc: '美团外卖、饿了么2~66元红包,每天可免费领取无门槛使用、通用优惠券', // 分享描述
link: '<?php echo $data["url"];?>', // 分享链接
imgUrl: 'http://hd.xxx.com/frontResource/images/20210111.png', // 分享图标
success: function() {
// 用户确认分享后执行的回调函数
alert("分享成功");
},
cancel: function() {
// 用户取消分享后执行的回调函数
alert("分享失败");
}
};
</script>
前端页面代码就那样,很简单。
后端传值渲染过来的,也是前端必要的数据就这么几个,都在上面js里。这里用的是laravel。路由用get。
Route::get('front/outfood', ['as'=> 'front.outfood.index',
'uses' => 'OutFoodController@index']);
Controller用到的是weixin仓储的依赖注入,主要返回的方法:getSignPackage
class OutFoodController extends Controller
{
private $wechatAuthRepository;
public function __construct(WechatAuthRepository $wechatAuthRepos)
{
$this->wechatAuthRepository = $wechatAuthRepos;
}
public function index()
{
$data = $this->wechatAuthRepository->getSignPackage();
return view('front.outfood.index',compact('data'));
}
}
getSignPackage()方法里主要就是$jsapiTicket 获取签名,$nonceStr是随机16位字符串的方法。返回来的$signPackage 就是前端页面所需要的数据
public function getSignPackage() {
$weixin_config = WeiXinConfig::where('id', 1)->first(['appid']);
$jsapiTicket = $this->getJsApiTicket();
$url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$timestamp = time();
$nonceStr = $this->getNonceStr(16);
// 这里参数的顺序要按照 key 值 ASCII 码升序排序
$string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$url";
$signature = sha1($string);
$signPackage = array(
"appId" => $weixin_config['appid'],
"nonceStr" => $nonceStr,
"timestamp" => $timestamp,
"url" => $url,
"signature" => $signature,
"rawString" => $string
);
return $signPackage;
}
获取签名$jsapiTicket的方法,ticket在7200s就会过期,我们可以使过期时间加长,我这里处理后放在cache里。
private function getJsApiTicket() {
// jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
$data = \Cache::get('jsapi_ticket');
if(!$data){
$res = $this->jsApiTicket();
$ticket = $res['jsapi_ticket'];
}else{
if($data['expire_time'] < time()){
$res = $this->jsApiTicket();
$ticket = $res['jsapi_ticket'];
}else{
$ticket = $data['jsapi_ticket'];
}
}
return $ticket;
}
public function jsApiTicket()
{
$data = [];
$accessToken = $this->get_access_token();
$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";
$res = $this->curlGetDate($url);
$ticket = $res->ticket;
if ($ticket) {
$data['expire_time'] = time() + 7000;
$data['jsapi_ticket'] = $ticket;
\Cache::put('jsapi_ticket',$data);
}
return $data;
}
获取ticket,就要获取到access_token,这里access_token的过期时间也是7200s,我们也可以拉长点。防止时间差
//获取普通access_token的统一方法,用于各种接口
public function get_access_token(){
$weixinConfig = WeiXinConfig::where('id', 1)->first();
$now = time();
if ($now < strtotime($weixinConfig->expired_at)) {
return $weixinConfig->access_token;
}
$url = 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' . $weixinConfig->appid . '&secret=' . $weixinConfig->secret;
$json = http_request_json_weixin($url);
$data = json_decode($json, true);
if(is_array($data) && isset($data['access_token'])){
$weixinConfig->access_token = $data['access_token'];
$weixinConfig->expired_at = $now + 7000;// 原token有效期为7200秒 先手动设置为7000秒 防止时间差
$weixinConfig->save();
return $weixinConfig->access_token;
}
throw new \Exception('获取access_token失败 res:' . $json, -110);
}
还有一些必要的方法
获取随机字符串方法,如下:
/**
*
* 产生随机字符串
* @param int $length
* @return string
*/
public function getNonceStr($length = 32)
{
$chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
$str = '';
$char_len = strlen($chars);
while($length-- > 0){
$rand = mt_rand(0, $char_len - 1);
$str .= $chars{$rand};
}
return $str;
}
curlGetDate 方法,如下:
//curl get请求
public function curlGetDate( $url )
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);
$output = curl_exec($ch);
curl_close($ch);
return json_decode($output);
}
http_request_json_weixin 方法
//curl模拟请求
function http_request_json_weixin($url, $data=null){
$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);
if(!empty($data)){
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
}
$result = curl_exec($ch);
curl_close($ch);
return $result;
}
获取appid的方法的话,你可以直接写死在页面,也可以方法配置文件里,或者统一数据表里。