微信公眾號分享的引導頁(附素材)

 

參考 : 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: