Heim  >  Artikel  >  WeChat-Applet  >  Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

越努力越幸运
越努力越幸运Original
2020-05-07 14:52:52190Durchsuche

Kürzlich bin ich bei der Arbeit auf eine Funktion gestoßen, die erfordert, dass wir die H5-Seite auf unserem Mobiltelefon anpassen, um sie mit WeChat-Freunden, Moments, QQ und dem QQ-Bereich zu teilen.

Das Folgende ist eine Methode, die ich von Baidu erhalten und selbst getestet habe. Ich werde sie mit allen teilen, damit wir voneinander lernen können.

Implementierungsprinzip: Die benutzerdefinierte Freigabe von H5 erfordert die Verwendung der Freigabeschnittstelle der öffentlichen WeChat-Plattform, die das JSSDK in der WeChat-Webentwicklung ist, [spezifische Dokumentation: https://developers.weixin. qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html】Verwenden Sie die Freigabeschnittstelle im SDK von WeChat, wie unten gezeigt:

Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

Hinweis: Die unten stehende benutzerdefinierte Freigabefunktion kann nur im integrierten Browser von WeChat geteilt werden; in anderen Browsern ist sie nicht verfügbar.

# 1. Registrieren Sie ein öffentliches WeChat-Konto

Zuerst müssen wir ein öffentliches WeChat-Konto eröffnen Konto oder ein persönliches Konto Es gibt keine Sharing-Schnittstellenfunktion.

# 2. Berechtigungen aktivieren

Nachdem die Registrierung unseres offiziellen Kontos abgeschlossen ist, müssen wir uns bei der öffentlichen WeChat-Plattform anmelden, zu den Entwicklungsschnittstellenberechtigungen gehen und die Berechtigungen für aktivieren Die Freigabeschnittstelle [Zum Öffnen von Berechtigungen für Unternehmens- und Zahlungszertifizierung ist eine Authentifizierung erforderlich] zeigt das folgende Bild die zertifizierte Situation:

Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

# 3. Nach der Schnittstellenberechtigung ist aktiviert, müssen wir einen sicheren JS-Schnittstellen-Domänennamen für das offizielle Konto festlegen

Melden Sie sich bei der öffentlichen WeChat-Plattform an, gehen Sie zu Einstellungen -> Öffentliche Kontoeinstellungen -> Funktionseinstellungen und geben Sie die gültige JS-Schnittstellensicherheit ein Domänenname [Ihr Projektzugriffsdomänenname], wie in der folgenden Abbildung dargestellt:

Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

# 4. Nachdem der sichere Domänenname erfolgreich ausgefüllt wurde, müssen Sie einen konfigurieren IP-Whitelist

Klicken Sie auf Entwicklung->Grundeinstellungen->IP-Whitelist, um eine Server-IP [Ihre IP-Adresse des Servers, auf dem sich das Projekt befindet] einzugeben. Die spezifischen Gründe werden unten aufgeführt, wie in gezeigt Die Abbildung unten:

Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

# 5. Alle oben genannten Funktionen müssen im öffentlichen Konto konfiguriert werden. Abgeschlossen, beginnen wir mit der Integration der Schnittstelle in das spezifische Projekt

## (1) Führen Sie die JS-Datei ein

Fügen Sie die folgende JS-Datei auf der Seite ein, die die JS-Schnittstelle aufrufen muss (Unterstützung https): http://res. wx.qq.com/open/js/jweixin-1.4.0.js

Wenn Sie die Dienststabilität weiter verbessern müssen und die oben genannten Ressourcen nicht verfügbar sind, können Sie den Besuch ändern: http://res2 .wx.qq.com/open/js/jweixin-1.4.0.js (unterstützt https)

## (2) Injizieren Sie die Berechtigungsüberprüfung über die Konfigurationsschnittstelle. Konfiguration

Alle Seiten, die JS-SDK verwenden müssen, müssen zuerst Konfigurationsinformationen einfügen, sonst können sie nicht aufgerufen werden

wx.config({
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
  appId: '', // 必填,公众号的唯一标识
  timestamp: , // 必填,生成签名的时间戳
  nonceStr: '', // 必填,生成签名的随机串
  signature: '',// 必填,签名
  jsApiList: [] // 必填,需要使用的JS接口列表
});

Zu den oben genannten Parametern für die Berechtigungsüberprüfung gehört

1. „appId“ ist die eindeutige Identifikation des offiziellen Kontos, die auf der öffentlichen WeChat-Plattform abgerufen werden kann

Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

2. „Zeitstempel“, Zeitstempel

3. „nonceStr“, zufällige Zeichenfolge, [Länge sollte 32 Zeichen nicht überschreiten]

4. „signature“, Signatur (muss Parameter verbinden und dann verschlüsseln)

5.jsApiList ist eine Liste von JS-Schnittstellen wie folgt: Bild: [Link: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62]

Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

(3) Signatur „Signatur“ generieren [ein komplizierterer Ort]

a mehrere Parameter, und dann werden die Parameter zu einer Zeichenfolge verkettet und dann mit sha1() verschlüsselt.

Die Parameter sind: noncestr: zufällige Zeichenfolge [Dies muss mit der zufälligen Zeichenfolge bei der Berechtigungsüberprüfung konsistent sein]

jsapi_ticket: jsapi_ticket ist ein temporäres Ticket, das von öffentlichen Konten zum Aufrufen der WeChat JS-Schnittstelle verwendet wird. Unter normalen Umständen ist das jsapi_ticket 7200 Sekunden lang gültig und wird über access_token abgerufen.

Zeitstempel: Zeitstempel [Dieser Zeitstempel muss auch mit dem Zeitstempel bei der Berechtigungsüberprüfung übereinstimmen, die Einheit ist Sekunden]

URL: Die URL der aktuellen Webseite, ausgenommen # und die folgenden Zeichen

Verketten Sie dann alle Parameter zu einer Zeichenfolge , zum Beispiel:

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value

然后对上面的字符串进行加密【sha1()函数进行加密】,得到signature。

b.现在来说说怎样获得调用微信调用JS接口的临时票据jsapi_ticke

因为jsapi_ticket的有效期为7200秒,并且需要通过access_token来获取到,所以我们先获取access_token;access_token公众号的一天获取次数有限,2000次,且有效时间为7200秒,所以我们可以考虑每次获取到的access_token放入缓存或者让数据表中,在有效期内反复调用【我是存储到数据表中的】。

下面是我自己写的一个简单类和数据表结构

Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

class Wxapi{
    protected $appid;
    protected $appsecret;
 
    /**
     * 构造函数
     * 2019-12-10
     */
    public function __construct($appid,$appsecret){
        $this->appid=$appid;
        $this->appsecret=$appsecret;
        $this->sessionKey_url="https://api.weixin.qq.com/sns/jscode2session";
        $this->accessToken_url="https://api.weixin.qq.com/cgi-bin/token";
        $this->jsapi_ticket_url="https://api.weixin.qq.com/cgi-bin/ticket/getticket";
        $this->qrcodeUrl="https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode";
    }
 
    /**
     * 获取access_token
     * 2019-12-10
     *
     * @param string  appid         appid
     * @param string  appsecret     appsecret
     * @param string  tableName     表名(wx_account)
     * @return string token         token
     */
    public function getToken($appid,$appsecret,$tableName){
        $accountInfo = DB::table($tableName)->where('appid',$appid)->where('appsecret',$appsecret)->first();
        $now_time = time();//当前时间戳
        if(empty($accountInfo)){
            return false;
        }
        if($now_time-$accountInfo->access_token_time<7000){
            $token = $accountInfo->access_token;
            return $token;
        }else{
            $get_token_url = $this->accessToken_url."?grant_type=client_credential&appid=".$appid.&#39;&secret=&#39;.$appsecret;
            $getToken_json = curl_get($get_token_url);
            $getToken_arr = json_decode($getToken_json[&#39;output&#39;],true);
            $token = $getToken_arr[&#39;access_token&#39;];
            $arr = [
                &#39;access_token_time&#39;=>time(),
                &#39;access_token&#39;=>$token,
                &#39;updated_at&#39;=>date(&#39;Y-m-d H:i:s&#39;,time())
            ];
            $res = DB::table($tableName)->where(&#39;appid&#39;,$appid)->where(&#39;appsecret&#39;,$appsecret)->update($arr);
            if($res){
                return $token;
            }else{
                return false;
            }
        }
    }
 
    /**
     * 获取jssdk-ticket
     * 2019-12-10
     *
     * @param string  appid         appid
     * @param string  appsecret     appsecret
     * @param string  tableName     表名(wx_account)
     * @return string token         token
     */
    public function getJssdkTicket($appid,$appsecret,$tableName){
        $accountInfo = DB::table($tableName)->where(&#39;appid&#39;,$appid)->where(&#39;appsecret&#39;,$appsecret)->first();
        if(empty($accountInfo)){
            return false;
        }
        $now_time = time();//当前时间戳
        if($now_time-$accountInfo->jsapi_ticket_time<7000){
            $jsapi_ticket = $accountInfo->jsapi_ticket;
            return $jsapi_ticket;
        }else{
            $access_token=$this->getToken($appid,$appsecret,$tableName);
            if(!$access_token){
                return false;
            }
            $get_jsapi_ticket_url = $this->jsapi_ticket_url."?access_token=".$access_token."&type=jsapi";
            $getJssdkTicket_json = curl_get($get_jsapi_ticket_url);
            $getJssdkTicket_arr = json_decode($getJssdkTicket_json[&#39;output&#39;],true);
            $jsapi_ticket = $getJssdkTicket_arr[&#39;ticket&#39;];
            $arr = [
                &#39;jsapi_ticket_time&#39;=>time(),
                &#39;jsapi_ticket&#39;=>$jsapi_ticket,
                &#39;updated_at&#39;=>date(&#39;Y-m-d H:i:s&#39;,time())
            ];
            $res = DB::table($tableName)->where(&#39;appid&#39;,$appid)->where(&#39;appsecret&#39;,$appsecret)->update($arr);
            if($res){
                return $jsapi_ticket;
            }else{
                return false;
            }
        }
    }
}

这边我们的操作是,我们后端获取jsapi_ticket返回给前端,然后前端进行权限验证。

为了方便调试,我们可以在微信开发者工具中进行调试。下载链接:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

当页面去调用微信的JSSDK接口时,成功可以看到对应的微信返回数据。

Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

如果出现错误,请根据开发文档进行修改:

11Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

然后在手机上进行分享,测试是否成功;下面是我成功的操作。

朋友圈分享:

Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

微信群组分享:

Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

QQ分享:

1Benutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich

Das obige ist der detaillierte Inhalt vonBenutzerdefinierter Titel, Link, Beschreibung der H5-Seite, Weitergabe von Bildern an WeChat-Freunde, Momente, QQ und QQ-Bereich. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn