WeChat development notes: WeChat browser sharing settings and callbacks-php手册-php.cn

The function of sharing to friends/sharing to Moments in WeChat should be relatively common. Take sharing to Moments as an example. The shared content is displayed in Moments with a small picture + a simple introduction. The form is for friends to see, and the details are revealed after clicking. In this way, this small picture and this small introduction directly become the top priority of the click-through rate of the shared content. By default, this image will load as the first large image in the topic section of the content, while the introduction will only load a URL. This kind of display method is still quite unsatisfactory, so let’s take a look at how these contents are set up. Take PHP as an example:

First we need to have a public account and obtain the appid and appsecret.

Then, we can exchange the access_token from the WeChat platform through the appid and appsecret.

<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'];

Copy after login

Through access_token, we can request a jsapi_ticket from the WeChat platform:

<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'];

Copy after login

Okay, the preparations are ready, we can start our settings.

WeChat sharing settings are set through 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>

Copy after login

The middle appid is the appid of our WeChat official account, timestamp is the current timestamp, noncestr is a random string used to generate signatures, signature is the generated signature, jsapilist is the WeChat interface we need to use, here we Just use the two interfaces of sharing to friends and sharing to Moments.

Briefly list the generation process of timestamp, noncestr, and 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><<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>);

Copy after login

At this point, we have completed a configuration of wx.config. Next, we can freely set the small pictures and introduction content we just mentioned:

    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>

Copy after login

In the middle, the values success and cancel are also very commonly used. They represent the js callback after successful sharing and the callback after canceling sharing respectively. They are used to judge whether the user will display psychological test answers after sharing in the circle of friends. Small functions are still very useful.