WeChat 개발 노트: WeChat 브라우저 공유 설정 및 콜백

WeChat에서 친구에게 공유/모멘트에 공유하는 기능은 비교적 일반적이어야 합니다. 예를 들어 모멘트에 공유하는 콘텐츠는 작은 사진과 간단한 소개와 함께 표시됩니다. 이렇게 하면 이 작은 사진과 이 작은 소개가 바로 공유 콘텐츠의 클릭률의 최우선 순위가 됩니다. 기본적으로 이 이미지는 콘텐츠 주제 섹션의 첫 번째 큰 이미지로 로드되지만 소개는 URL만 로드됩니다. 이런 종류의 표시 방법은 아직 상당히 만족스럽지 못하므로 이러한 내용이 어떻게 설정되어 있는지 살펴보겠습니다. PHP를 예로 들어 보겠습니다.

먼저 공개 계정이 있어야 하며 appid와 appsecret을 얻어야 합니다.

그러면 appid와 appsecret을 통해 WeChat 플랫폼에서 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을 통해 WeChat 플랫폼에서 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'];

자, 모든 것이 준비되었습니다. 설정을 시작해 보겠습니다.

WeChat 공유 설정은 wx.config를 통해 설정됩니다.

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

가운데 appid는 WeChat 공식 계정의 appid이고, timestamp는 현재 타임스탬프이고, noncestr은 서명을 생성하는 데 사용되는 임의의 문자열이고, 서명은 생성된 서명이고, jsapilist는 우리가 사용해야 하는 WeChat 인터페이스입니다. 따라서 친구에게 공유하는 것과 Moments에 공유하는 두 가지 인터페이스를 사용할 수 있습니다.

타임스탬프, noncestr 및 서명 생성 과정을 간략하게 나열:

<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><<span style="color: #800080;">$length</span>;<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 콜백과 공유 취소 후의 콜백을 나타내는 데 매우 일반적으로 사용됩니다. 이는 일부 판단을 내리고 심리 테스트 답변을 표시하는 데 사용됩니다. 사용자가 친구들과 공유한 후에도 클래스의 작은 기능은 여전히 ​​매우 유용합니다.