微信JSSDK的使用

微信JS-SDK

一、在微信公衆平臺（https://mp.weixin.qq.com/）註冊個公衆號，獲取APPID和AppSecret

二、獲取access_token（須要在公衆平臺中設置獲取access_token的白名單），PHP示例：

　　$APPID = 「此處填寫獲取的APPID」;

　　$appSecret =」此處填寫獲取的AppSecret」;

　　$token_access_url=「https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=」 . $APPID . 」&secret=」 . $appSecret;

　　$result = file_get_contents($token_access_url);

　　$resultArr = json_decode($result,true);

       $access_token = $resultArr['access_token'];

三、經過access_token獲取jsapi_ticket，PHP示例：

　　$ticket_url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi";

　　$res = file_get_contents($ticket_url);

　　$resArr = json_decode($res,true);

　　$ticket = $result['ticket'];

四、生成簽名的隨機字符串

　　function getRandChar($length){

　　　　$str = null;

　　　　$strPol = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz";

　　　　$max = strlen($strPol)-1;

　　　　for($i = 0;$i<$length;$i++){

　　　　　　$str .= $strPol[rand(0,$max)];

　　　　}

　　　　return $str;

　　}

　　$noncestr = getRandChar(16);

五、生成簽名的時間戳

　　$timestamp = time();

六、生成簽名

if ($_SERVER['QUERY_STRING']){
    $url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'];
}else{
    $url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'];
}

　　$parameters = array(

　　　　"noncestr" => $noncestr,

　　　　"jsapi_ticket" => $ticket,

　　　　"$timestamp" => $timestamp,

　　　　"url" => $url,

　　)

　　ksort($parameters);

　　$string = "";

　　foreach($parameters as $k => $v){

　　　　$string .= $k."=".$v."&";

　　}

　　$string_sha = substr($string,0,-1);

　　$signature = sha1($string_sha );

七、設置公衆號JS安全域名：.

　　微信公衆平臺的公衆號設置→功能設置。根據規則添加JS接口安全域名

八、引入JS文件:

　　<script src = "https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

九、配置設置，示例：

　　<script>

　　　　wx.config([

　　　　　　debug:false,//調試模式，開啓時會彈出返回值，PC端會經過log打印

　　　　　　appId:'<?php echo $APPID; ?>',//必填，上面已經獲取到的APPID

　　　　　　timestamp:<?php echo $timestamp; ?>,//必填，生成簽名的時間戳

　　　　　　nonceStr:'<?php echo $noncestr; ?>',//必填，生成簽名的隨機字符串

　　　　　　signature:'<?php echo $signature; ?>',//必填，簽名

　　　　　　jsApiList:[

　　　　　　　　'onMenuShareAppMessage',

　　　　　　　　'onMenuShareTimeline'

　　　　　　]//必填，須要使用的JS接口列表，全部JS接口列表見附錄2,某些接口須要進行接口受權（微信公衆平臺→開發→接口權限）纔可使用

　　　　});

　　</script>

十、使用接口，能夠用微信開發者工具測試

　　
　　<script>

wx.ready(function () {
    // 2. 分享接口
    // 2.1 監聽「分享給朋友」，按鈕點擊、自定義分享內容及分享結果接口
        wx.onMenuShareAppMessage({
            title: '互聯網之子',
            desc: '在長大的過程當中，我才慢慢發現，我身邊的全部事，別人跟我說的全部事，那些所謂原本如此，註定如此的事，它們其實沒有非得如此，事情是能夠改變的。更重要的是，有些事既然錯了，那就該作出改變。',
            link: 'http://movie.douban.com/subject/25785114/',
            imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
            trigger: function (res) {
                // 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回
                alert('用戶點擊發送給朋友');
            },
            success: function (res) {
                alert('已分享');
            },
            cancel: function (res) {
                alert('已取消');
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });

    // 2.2 監聽「分享到朋友圈」按鈕點擊、自定義分享內容及分享結果接口
        wx.onMenuShareTimeline({
            title: '互聯網之子',
            link: 'http://movie.douban.com/subject/25785114/',
            imgUrl: 'http://demo.open.weixin.qq.com/jssdk/images/p2166127561.jpg',
            trigger: function (res) {
                // 不要嘗試在trigger中使用ajax異步請求修改本次分享的內容，由於客戶端分享操做是一個同步操做，這時候使用ajax的回包會尚未返回
                alert('用戶點擊分享到朋友圈');
            },
            success: function (res) {
                alert('已分享');
            },
            cancel: function (res) {
                alert('已取消');
            },
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        });

});</script>