微信JSSDK的使用

微信JS-SDK

1、在微信公眾平台（https://mp.weixin.qq.com/）注冊個公眾號，獲取APPID和AppSecret

2、獲取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'];

3、通過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'];

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

　　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);

5、生成簽名的時間戳

　　$timestamp = time();

6、生成簽名

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 );

7、設置公眾號JS安全域名：.

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

8、引入JS文件:

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

9、配置設置，示例：

　　<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>

10、使用接口，可以用微信開發者工具測試

　　
　　<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>