微信公衆号開發之H5分享SDK接入

之前一直碰到微信裡消息裡的文章或連結分享到朋友圈或微信好友後，連結的圖示和标題都不是想要的(自定義)；後來研究了一下微信公衆号相關的SDK接入demo；微信在6.5之前的版本好像是微信自己抓取連結或文章的标題/圖檔(貌似是300*300)，但是在6.5版本之後微信變得惡心了需要接入他的分享接口(SDK)，效果如下：

 接入微信分享SDK，可以将這四個參數自定義顯示：标題，連結，描述，圖示，都可以達到自定義的效果。

實作如下：

1.進入微信公衆号取到你的yourAppID，yourAppSecret

2.下載下傳微信分享SDK(見部落格下方)；

3.項目中引入SDK(我的項目是thinkphp架構)；

  3.1因為很多H5需要進行分享，是以通過yourAppID，yourAppSecret擷取微信配置資訊放入基礎控制器類友善供任何被繼承的類使用：

        //微信分享--擷取機密配置資訊  ======PHP代碼部分=======

protected function getWxShareConfig(){

          $signPackage = array();

          require THINK_PATH.'Extend/Wxsharesdk/jssdk.php'; //我的SDK放在ThinkPHP/Extend目錄下

          $jssdk = new JSSDK($this->_wxshare_Appid, $this->_wxshare_AppSecret);

                //填寫開發者中心你的開發者ID

          $signPackage = $jssdk->GetSignPackage();

           return $signPackage;

       }

        //需要分享的控制器類指派

        public function __construct() {

          parent::__construct();

          $wxShareConfig = $this->getWxShareConfig();

          $this->assign("signPackage",$wxShareConfig);

        }

3.2 //微信分享=======javascript代碼部分=======

    在需要調用JS接口的頁面引入如下JS檔案，（支援https）http://res.wx.qq.com/open/js/jweixin-1.2.0.js   建議将次js代碼另存到自己項目的js

<script type="text/javascript" src="/Public/js/jweixin-1.2.0.js"></script>

<script>

    wx.config({

      debug:  false,  //調式模式，設定為ture後會直接在網頁上彈出調試資訊，用于排查問題

      appId: '{$signPackage["appId"]}', // 建議背景傳出，避免敏感資訊洩露

      timestamp: '{$signPackage["timestamp"]}',

      nonceStr: '{$signPackage["nonceStr"]}',

      signature: '{$signPackage["signature"]}',

      jsApiList: [  //需要使用的網頁服務接口

          'checkJsApi',  //判斷目前用戶端版本是否支援指定JS接口

          'onMenuShareTimeline', //分享到朋友圈

          'onMenuShareAppMessage', //分享給好友

          'onMenuShareQQ',  //分享到QQ

          'onMenuShareQZone' //分享到qq空間

      ]

    });

    var share_title = '{$share["title"]}'; //分享的标題

    var share_link = '{$share["link"]}';  //分享的連結

    var share_imgUrl = '{$share["imgUrl"]}';  //分享的圖檔位址

    wx.ready(function () {   //ready函數用于調用API，如果你的網頁在加載後就需要自定義分享和回調功能，需要在此調用分享函數。//如果是微信遊戲結束後，需要點選按鈕觸發得到分值後分享，這裡就不需要調用API了，可以在按鈕上綁定事件直接調用。是以，微信遊戲由于大多需要使用者先觸發擷取分值，此處請不要填寫如下所示的分享API

    wx.onMenuShareTimeline({  //例如分享到朋友圈的API  

      title: share_title, // 分享标題

      link: share_link, // 分享連結

      imgUrl: share_imgUrl, // 分享圖示-

      success: function () {

          // 使用者确認分享後執行的回調函數

      },

      cancel: function () {

          // 使用者取消分享後執行的回調函數

      }

    });

    wx.onMenuShareAppMessage({  //分享給好友

      title: share_title, // 分享标題

        link: share_link, // 分享連結

        imgUrl: share_imgUrl, // 分享圖示

        success: function () {

            // 使用者确認分享後執行的回調函數

        },

        cancel: function () {

            // 使用者取消分享後執行的回調函數

        }

     });

    wx.onMenuShareQQ({  //分享到QQ

        title: share_title, // 分享标題

        link: share_link, // 分享連結

        imgUrl: share_imgUrl, // 分享圖示

        success: function () {

            // 使用者确認分享後執行的回調函數

        },

        cancel: function () {

            // 使用者取消分享後執行的回調函數

        }

      });

    wx.onMenuShareQZone({  //分享到qq空間

        title: share_title, // 分享标題

          link: share_link, // 分享連結

          imgUrl: share_imgUrl, // 分享圖示

          success: function () {

              // 使用者确認分享後執行的回調函數

          },

          cancel: function () {

              // 使用者取消分享後執行的回調函數

          }

       });

    });

    wx.error(function (res) {

    //alert(res.errMsg);  //建議關閉錯誤輸出，否則使用者體驗不太好

     });

//大家可以自己試試，蠻好玩的，也不難！！！