微信開發筆記：微信瀏覽器分享設定以及回調

在微信中分享給好友/分享到朋友圈這個功能應該是比較常用的了，就拿分享到朋友圈舉例，分享出去的內容在朋友圈的展示是以一張小圖片+一個簡單的介紹的形式來給好友看到的，點擊後才是詳情，那麼這麼一來，這張小圖片和這段小簡介就直接成為了這個被分享後的內容的被點擊率的重中之重。在預設情況下，這張圖片會載入內容主題部分的第一張大圖片，而簡介只會載入一個網址。這樣的展示方式還是相當不盡人意的，那我們來看一下這一些內容，是透過什麼形式來設定的，拿PHP來做個舉例：

 

首先我們需要有一個公眾號，並且獲得appid及appsecret。

然後，我們透過appid和appsecret，就可以向微信平台來換取access_token了。

<span style="color: #008080;">define</span>("APPID", <span style="color: #800080;">$appid</span><span style="color: #000000;">);
</span><span style="color: #008080;">define</span>("APPSECRET", <span style="color: #800080;">$appsecret</span><span style="color: #000000;">);
 
</span><span style="color: #008000;">//</span><span style="color: #008000;"> 获取access_token</span>
<span style="color: #800080;">$token_access_url</span> = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" . APPID . "&secret=" .<span style="color: #000000;"> APPSECRET;
</span><span style="color: #800080;">$res</span> = <span style="color: #008080;">file_get_contents</span>(<span style="color: #800080;">$token_access_url</span>); <span style="color: #008000;">//</span><span style="color: #008000;">获取文件内容或获取网络请求的内容</span>
<span style="color: #800080;">$result</span> = json_decode(<span style="color: #800080;">$res</span>, <span style="color: #0000ff;">true</span>); <span style="color: #008000;">//</span><span style="color: #008000;">接受一个 JSON 格式的字符串并且把它转换为 PHP 变量</span>
<span style="color: #800080;">$access_token</span> = <span style="color: #800080;">$result</span>['access_token'];

透過access_token，我們可以向微信平台索取一個jsapi_ticket：

<span style="color: #008000;">//</span><span style="color: #008000;"> 获取jsapi_ticket</span>
<span style="color: #800080;">$ticket_url</span> = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=TOKEN"<span style="color: #000000;">;

</span><span style="color: #800080;">$res</span> = <span style="color: #008080;">file_get_contents</span>(<span style="color: #800080;">$ticket_url</span>); <span style="color: #008000;">//</span><span style="color: #008000;">获取文件内容或获取网络请求的内容</span>
<span style="color: #800080;">$result</span> = json_decode(<span style="color: #800080;">$res</span>, <span style="color: #0000ff;">true</span>); <span style="color: #008000;">//</span><span style="color: #008000;">接受一个 JSON 格式的字符串并且把它转换为 PHP 变量</span>
<span style="color: #800080;">$ticket</span> = <span style="color: #800080;">$result</span>['ticket'];

好了，準備工作就緒，我們可以開始我們的設定了。

微信的分享設定是透過wx.config來進行的。

<script><span style="color: #000000;">
wx.config({
    debug: <span style="color: #0000ff;">false, <span style="color: #008000;">//<span style="color: #008000;"> 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '<?php echo APPID;?>', <span style="color: #008000;">//<span style="color: #008000;"> 必填，公众号的唯一标识
    timestamp: <?php echo $timestamp;?>, <span style="color: #008000;">//<span style="color: #008000;"> 必填，生成签名的时间戳
    nonceStr: '<?php echo $noncestr;?>', <span style="color: #008000;">//<span style="color: #008000;"> 必填，生成签名的随机串
    signature: '<?php echo $signature;?>',<span style="color: #008000;">//<span style="color: #008000;"> 必填，签名
    jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] <span style="color: #008000;">//<span style="color: #008000;"> 必填，需要使用的JS接口列表
<span style="color: #000000;">});
</script>

中間appid就是我們微信公眾號的appid，timestamp是當前的時間戳，noncestr是隨機的字符串，用來生成簽名的，signature是生成的簽名，jsapilist是我們需要使用的微信接口，這邊的話我們就使用分享給好友以及分享到朋友圈這兩個介面就可以了。

簡單列一下timestamp，noncestr，以及signature的生成流程：

<span style="color: #008000;">//</span><span style="color: #008000;"> 生成签名
  // 生成随机字符串</span>
<span style="color: #0000ff;">class</span><span style="color: #000000;"> RandChar{
  </span><span style="color: #0000ff;">function</span> getRandChar(<span style="color: #800080;">$length</span><span style="color: #000000;">){
   </span><span style="color: #800080;">$str</span> = <span style="color: #0000ff;">null</span><span style="color: #000000;">;
   </span><span style="color: #800080;">$strPol</span> = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789abcdefghijklmnopqrstuvwxyz"<span style="color: #000000;">;
   </span><span style="color: #800080;">$max</span> = <span style="color: #008080;">strlen</span>(<span style="color: #800080;">$strPol</span>)-1<span style="color: #000000;">;

   </span><span style="color: #0000ff;">for</span>(<span style="color: #800080;">$i</span>=0;<span style="color: #800080;">$i</span>$length;<span style="color: #800080;">$i</span>++<span style="color: #000000;">){
    </span><span style="color: #800080;">$str</span>.=<span style="color: #800080;">$strPol</span>[<span style="color: #008080;">rand</span>(0,<span style="color: #800080;">$max</span>)];<span style="color: #008000;">//</span><span style="color: #008000;">rand($min,$max)生成介于min和max两个数之间的一个随机整数</span>
<span style="color: #000000;">   }
   </span><span style="color: #0000ff;">return</span> <span style="color: #800080;">$str</span><span style="color: #000000;">;
  }
}
</span><span style="color: #800080;">$randCharObj</span> = <span style="color: #0000ff;">new</span><span style="color: #000000;"> RandChar();
</span><span style="color: #800080;">$noncestr</span> = <span style="color: #800080;">$randCharObj</span>->getRandChar(16<span style="color: #000000;">);


</span><span style="color: #800080;">$timestamp</span> = <span style="color: #008080;">time</span><span style="color: #000000;">();
</span><span style="color: #0000ff;">if</span> (<span style="color: #800080;">$_SERVER</span>['QUERY_STRING'<span style="color: #000000;">]){
    </span><span style="color: #800080;">$url</span> = 'http://'.<span style="color: #800080;">$_SERVER</span>['HTTP_HOST'].<span style="color: #800080;">$_SERVER</span>['PHP_SELF'].'?'.<span style="color: #800080;">$_SERVER</span>['QUERY_STRING'<span style="color: #000000;">];
}</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
    </span><span style="color: #800080;">$url</span> = 'http://'.<span style="color: #800080;">$_SERVER</span>['HTTP_HOST'].<span style="color: #800080;">$_SERVER</span>['PHP_SELF'<span style="color: #000000;">];
}

</span><span style="color: #800080;">$parameters</span> = <span style="color: #0000ff;">array</span>("noncestr" => <span style="color: #800080;">$noncestr</span>,
                        "jsapi_ticket" => <span style="color: #800080;">$ticket</span>,
                        "timestamp" => <span style="color: #800080;">$timestamp</span>,
                        "url" => <span style="color: #800080;">$url</span><span style="color: #000000;">);
</span><span style="color: #008080;">ksort</span>(<span style="color: #800080;">$parameters</span><span style="color: #000000;">);

</span><span style="color: #800080;">$string1</span> = ""<span style="color: #000000;">;
</span><span style="color: #0000ff;">foreach</span> (<span style="color: #800080;">$parameters</span> <span style="color: #0000ff;">as</span> <span style="color: #800080;">$key</span> => <span style="color: #800080;">$val</span><span style="color: #000000;">){
    </span><span style="color: #800080;">$string1</span> .= <span style="color: #800080;">$key</span>."=".<span style="color: #800080;">$val</span>."&"<span style="color: #000000;">;
}
</span><span style="color: #800080;">$string1</span> = <span style="color: #008080;">substr</span>(<span style="color: #800080;">$string1</span>,0,-1<span style="color: #000000;">);
</span><span style="color: #800080;">$signature</span> = <span style="color: #008080;">sha1</span>(<span style="color: #800080;">$string1</span>);

至此，我們對於wx.config的一個配置就已經完成了，接下去就可以自由設定我們剛剛提到的小圖片和簡介內容了：

    wx.ready(<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 分享到朋友圈设置</span>
<span style="color: #000000;">        wx.onMenuShareTimeline({
            title: </span>'测试标题', <span style="color: #008000;">//</span><span style="color: #008000;"> 分享标题</span>
            link: 'http://www.baidu.com', <span style="color: #008000;">//</span><span style="color: #008000;"> 分享链接</span>
            imgUrl: 'http://mp.weixin.qq.com/wiki/static/assets/dc5de672083b2ec495408b00b96c9aab.png', <span style="color: #008000;">//</span><span style="color: #008000;"> 分享图标</span>
            success: <span style="color: #0000ff;">function</span><span style="color: #000000;"> () { 
                alert(</span>"分享成功"<span style="color: #000000;">);
            },
            cancel: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> () { 
                alert(</span>"分享失败"<span style="color: #000000;">);
            }
        });
        </span><span style="color: #008000;">//</span><span style="color: #008000;"> 分享给好友</span>
<span style="color: #000000;">        wx.onMenuShareAppMessage({
            title: </span>'测试标题', <span style="color: #008000;">//</span><span style="color: #008000;"> 分享标题</span>
            desc: '测试分享描述', <span style="color: #008000;">//</span><span style="color: #008000;"> 分享描述</span>
            link: 'http://www.baidu.com', <span style="color: #008000;">//</span><span style="color: #008000;"> 分享链接</span>
            imgUrl: 'http://mp.weixin.qq.com/wiki/static/assets/dc5de672083b2ec495408b00b96c9aab.png', <span style="color: #008000;">//</span><span style="color: #008000;"> 分享图标</span>
            type: '', <span style="color: #008000;">//</span><span style="color: #008000;"> 分享类型,music、video或link，不填默认为link</span>
            dataUrl: '', <span style="color: #008000;">//</span><span style="color: #008000;"> 如果type是music或video，则要提供数据链接，默认为空</span>
            success: <span style="color: #0000ff;">function</span><span style="color: #000000;"> () { 
                alert(</span>"分享成功"<span style="color: #000000;">);
            },
            cancel: </span><span style="color: #0000ff;">function</span><span style="color: #000000;"> () { 
                alert(</span>"分享失败"<span style="color: #000000;">);
            }
        });
    })</span>

中間提一下，success和cancel這兩個的值也是相當常用的，分別表示成功分享後的js回調以及取消分享後的回調，用來做一些判斷用戶分享朋友圈後顯示心理測試答案之類的小功能還是很有用的。