微信公众号分享的引导页(附素材)
参考 : https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
不过要提醒的是,这种自定义的分享,微信要即将废弃了
在微信公众号内应该是没办法唤起分享弹出框.(没深入研究过),暂时做了引导页去引导用户点击右上方按钮去分享
分享会用到: 微信JS-SDK (需要验签)
第一步,程序后台计算验签数据
$durl = \'http://\'.$_SERVER[\'HTTP_HOST\'].$_SERVER[\'REQUEST_URI\']; $timestamp = time(); $nonceStr = createNonceStr(); //生成随机字符串 $jsapiTicket = getTicket($appID,$appsecret); //先换取token,再用token换取的Ticket // 这里参数的顺序要按照 key 值 ASCII 码升序排序 (字典序排序) $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr×tamp=$timestamp&url=$durl"; $signature = sha1($string); //把上面计算的数据传递到网页模板中区 $smarty->assign("appid",\'XXXXX\'); $smarty->assign("timestamp",$timestamp); $smarty->assign("noncestr",$nonceStr); $smarty->assign("signature",$signature); $smarty->assign("durl",$durl);
生成随机字符串方法
function createNonceStr($length = 16) { $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; $str = ""; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1); } return $str; }
获取Ticket方法
function getTicket($appID,$appsecret) {$access_token = getAccessToken($appID,$appsecret); $ticket = curlPost("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=$access_token&type=jsapi"); $ticket = json_decode($ticket); if(isset($ticket->ticket)) {return $ticket->ticket; } else { return ""; } } function getAccessToken($appID,$appsecret) { $token = curlPost("https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$appID&secret=$appsecret"); $token = json_decode($token); if(isset($token->access_token)) {return $token->access_token; } else { return ""; } } function curlPost($url, $data = null) {//post请求接口 $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); if (!empty($data)) { curl_setopt($ch, CURLOPT_POST, TRUE); curl_setopt($ch, CURLOPT_POSTFIELDS, $data); } curl_setopt($ch, CURLOPT_TIMEOUT, 5); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); $output = curl_exec($ch); curl_close($ch); return $output; }
第二部,在微信公众号网页使用 微信JS-SDK
引入 : http://res.wx.qq.com/open/js/jweixin-1.4.0.js
配置:
wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: \'{$appid}\', // 必填,公众号的唯一标识 timestamp: \'{$timestamp}\', // 必填,生成签名的时间戳 nonceStr: \'{$noncestr}\', // 必填,生成签名的随机串 signature: \'{$signature}\',// 必填,签名 jsApiList: [\'onMenuShareTimeline\',\'onMenuShareAppMessage\'] // 必填,需要使用的JS接口列表 });
用了那个接口,写那些接口jsApiList:
wx.ready(function(){ wx.onMenuShareTimeline({ title: \'{$group_buy_info.goods_name}-团购详情\', // 分享标题 link: \'{$link_url}\', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: \'{$group_buy_info.goods_thumb}\', // 分享图标 success: function () { // 用户点击了分享后执行的回调函数 } }); wx.onMenuShareAppMessage({ title: \'{$group_buy_info.goods_name}-团购详情\', // 分享标题 desc: \'{$group_buy_info.group_buy_desc}\', // 分享描述 link: \'{$link_url}\', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: \'{$group_buy_info.goods_thumb}\', // 分享图标 type: \'link\', // 分享类型,music、video或link,不填默认为link dataUrl: \'\', // 如果type是music或video,则要提供数据链接,默认为空 success: function () { // 用户点击了分享后执行的回调函数 } }); });
用户点击按钮更改分享内容(没有试过):
function weixinSendAppMessage(title,desc,link,imgUrl){ WeixinJSBridge.invoke(\'onMenuShareAppMessage\',{ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: imgUrl, // 分享图标 type: \'link\', // 分享类型,music、video或link,不填默认为link dataUrl: \'\', // 如果type是music或video,则要提供数据链接,默认为空 success: function () { // 用户点击了分享后执行的回调函数 } }); }
上面功能性已经完成
下面需要引导用户点击右上方按钮分享……
引导页面使用的是layui的样式
<style> .layui-m-layer-nobg{ background-color:rgba(0,0,0,0)!important; position: absolute; top:0px; right: 0px; } </style> <!--分享引导框开始--> <div id="guide_box" class="hide" > <img src="/images/guide_point.png" class="img-responsive img-rounded" width="200px"> <img src="/images/guide_btn.png" class="img-responsive img-rounded" width="200px" onclick="layer.closeAll();"> </div> <!--分享引导框结束--> <script> layer.open({ type: 1, title: false, closeBtn: 0, shade:0.2, offset:\'rt\', //右上 area: \'0px\', skin: \'nobg\', //没有背景色,就是上面的.layui-m-layer-nobg样式,layui框架自动加前缀 shadeClose: true, content: $(\'#guide_box\').html() }); </script>
素材guide_point.png:
素材guide_btn.png: