微信公众号分享的引导页(附素材)

Posted 2021-01-15 与f

 

参考 : 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&timestamp=$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: