WeChat-Entwicklungshinweise: WeChat-Browser-Freigabeeinstellungen und Rückrufe

Die Funktion „Mit Freunden teilen“/„Mit Momenten teilen“ sollte in WeChat relativ üblich sein. Der geteilte Inhalt wird in Moments mit einem kleinen Bild und einer einfachen Einführung angezeigt Details werden nach dem Klicken angezeigt. Auf diese Weise werden dieses kleine Bild und diese kleine Einführung direkt zur obersten Priorität der Klickrate des geteilten Inhalts. Standardmäßig wird dieses Bild als erstes großes Bild im Themenbereich des Inhalts geladen, während die Einleitung nur eine URL lädt. Diese Art der Anzeige ist immer noch recht unbefriedigend. Schauen wir uns also an, wie diese Inhalte eingerichtet sind. Nehmen Sie PHP als Beispiel:

Zuerst müssen wir ein öffentliches Konto haben und die App-ID und das App-Geheimnis erhalten.

Dann können wir das access_token von der WeChat-Plattform über appid und appsecret austauschen.

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

Über access_token können wir ein jsapi_ticket von der WeChat-Plattform anfordern:

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

Okay, alles ist fertig, wir können mit der Einrichtung beginnen.

WeChat-Freigabeeinstellungen werden über wx.config festgelegt.

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

Die mittlere App-ID ist die App-ID unseres offiziellen WeChat-Kontos, Timestamp ist der aktuelle Zeitstempel, Noncestr ist eine zufällige Zeichenfolge, die zum Generieren einer Signatur verwendet wird, Signatur ist die generierte Signatur, Jsapilist ist die WeChat-Schnittstelle, die wir verwenden müssen, hier Wenn Wir können also einfach die beiden Schnittstellen „Teilen an Freunde“ und „Teilen an Moments“ verwenden.

Listen Sie kurz den Generierungsprozess von Zeitstempel, Noncestr und Signatur auf:

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

An diesem Punkt haben wir die Konfiguration von wx.config abgeschlossen. Als nächstes können wir die kleinen Bilder und Einführungsinhalte, die wir gerade erwähnt haben, frei festlegen:

    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>

In der Mitte werden auch die Werte „success“ und „cancel“ sehr häufig verwendet. Sie stellen den js-Rückruf nach erfolgreichem Teilen bzw. den Rückruf nach Abbruch des Teilens dar. Sie werden verwendet, um einige Urteile zu fällen und psychologische Testantworten anzuzeigen Nachdem der Benutzer im Freundeskreis geteilt hat, sind die kleinen Funktionen der Klasse immer noch sehr nützlich.