Heim Web-Frontend HTML-Tutorial Detaillierte Erläuterung der Beispielcode-Analyse von statischen HTML-Seiten zur Umsetzung von WeChat-Sharing-Ideen

Detaillierte Erläuterung der Beispielcode-Analyse von statischen HTML-Seiten zur Umsetzung von WeChat-Sharing-Ideen

May 26, 2017 pm 03:21 PM

Wenn Sie eine Webseite auf WeChat teilen, besteht der Link, den Sie teilen möchten, aus Titel + Beschreibung + Miniaturansicht. Die Methode wird im WeChat-Entwicklungscodebeispiel bereitgestellt, gilt jedoch nur für dynamische Seiten. Da dedecms statische Dateien generiert, möchte ich tatsächlich Ajax verwenden, um JSSDK-Parameter abzurufen und auch die WeChat-Freigabefunktion zu implementieren. Ich werde sie hier mit Ihnen teilen.
Front-End-HTML-Codebeispiel:

<script src="http://外部站点引入/js/jquery-1.11.1.min.js"></script>
Nach dem Login kopieren
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script>var url=location.href;
  $.ajax({
    type : "get",
    url : "http://xxx/jssdk.php?url="+url,//替换网址,xxx根据自己jssdk文件位置修改    dataType : "jsonp",
    jsonp: "callback",
    jsonpCallback:"success_jsonpCallback",
    success : function(data){
        wx.config({
     appId: data.appId,
     timestamp: data.timestamp,
     nonceStr: data.nonceStr,
     signature: data.signature,
    jsApiList: [
         "onMenuShareTimeline", //分享给好友
         "onMenuShareAppMessage", //分享到朋友圈
         "onMenuShareQQ",  //分享到QQ
         "onMenuShareWeibo" //分享到微博]
});
},
   error:function(data){
          alert("连接失败!");
     }
});
  wx.ready(function (){  var shareData = {
  title: &#39;标题&#39;,
  desc: &#39;简介&#39;,//这里请特别注意是要去除html  link: &#39;链接&#39;,
  imgUrl: &#39;标题图&#39;
  };
  wx.onMenuShareAppMessage(shareData);
  wx.onMenuShareTimeline(shareData);
  wx.onMenuShareQQ(shareData);
  wx.onMenuShareWeibo(shareData);
    });</script>
Nach dem Login kopieren

Ändern Sie die Serverdatei jssdk.php

<?php$url = $_GET[&#39;url&#39;];class JSSDK {  private $appId;  private $appSecret;  private $url;  public function __construct($appId, $appSecret,$url) {    $this->appId = $appId;    $this->appSecret = $appSecret;$this->url = $url;
  }  public function getSignPackage() {    $jsapiTicket = $this->getJsApiTicket();    $protocol = (!empty($_SERVER[&#39;HTTPS&#39;]) && $_SERVER[&#39;HTTPS&#39;] !== &#39;off&#39; || $_SERVER[&#39;SERVER_PORT&#39;] == 443) ? "https://" : "http://";   // $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";$url =$this->url;    $timestamp = time();    $nonceStr = $this->createNonceStr();    // 这里参数的顺序要按照 key 值 ASCII 码升序排序
    $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";    $signature = sha1($string);    $signPackage = array(
      "appId"     => $this->appId,
      "nonceStr"  => $nonceStr,
      "timestamp" => $timestamp,
      "url"       => $url,
      "signature" => $signature,
      "rawString" => $string
    );    return $signPackage; 
  }  private function createNonceStr($length = 16) {    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";    $str = "";    for ($i = 0; $i < $length; $i++) {      $str .= substr($chars, mt_rand(0, strlen($chars) - 1), 1);
    }    return $str;
  }  private function getJsApiTicket() {    // jsapi_ticket 应该全局存储与更新,以下代码以写入到文件中做示例
    $data = json_decode(file_get_contents("jsapi_ticket.json"));    if ($data->expire_time < time()) {      $accessToken = $this->getAccessToken();      // 如果是企业号用以下 URL 获取 ticket
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?access_token=$accessToken";
      $url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?type=jsapi&access_token=$accessToken";      $res = json_decode($this->httpGet($url));      $ticket = $res->ticket;      if ($ticket) {        $data->expire_time = time() + 7000;        $data->jsapi_ticket = $ticket;        $fp = fopen("jsapi_ticket.json", "w");        fwrite($fp, json_encode($data));        fclose($fp);
      }
    } else {      $ticket = $data->jsapi_ticket;
    }    return $ticket;
  }  private function getAccessToken() {    // access_token 应该全局存储与更新,以下代码以写入到文件中做示例
    $data = json_decode(file_get_contents("access_token.json"));    if ($data->expire_time < time()) {      // 如果是企业号用以下URL获取access_token
      // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
      $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";      $res = json_decode($this->httpGet($url));      $access_token = $res->access_token;      if ($access_token) {        $data->expire_time = time() + 7000;        $data->access_token = $access_token;        $fp = fopen("access_token.json", "w");        fwrite($fp, json_encode($data));        fclose($fp);
      }
    } else {      $access_token = $data->access_token;
    }    return $access_token;
  }  private function httpGet($url) {    $curl = curl_init();
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($curl, CURLOPT_TIMEOUT, 500);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($curl, CURLOPT_URL, $url);    $res = curl_exec($curl);
    curl_close($curl);    return $res;
  }
}$jssdk = new JSSDK("公众号ID", "公众号密钥",$url);//按照自己的公众号填写$signPackage = $jssdk->GetSignPackage();$tmp=json_encode(array (&#39;appId&#39;=>$signPackage["appId"],&#39;timestamp&#39;=>$signPackage["timestamp"],&#39;nonceStr&#39;=>$signPackage["nonceStr"],&#39;signature&#39;=>$signPackage["signature"],&#39;url&#39;=>$signPackage["url"]));$callback = $_GET[&#39;callback&#39;];echo $callback.&#39;(&#39;.$tmp.&#39;)&#39;;exit;
?>
Nach dem Login kopieren

Andere können entsprechend den dynamischen Seitenparametern festgelegt werden.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Beispielcode-Analyse von statischen HTML-Seiten zur Umsetzung von WeChat-Sharing-Ideen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
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

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Die Rollen von HTML, CSS und JavaScript: Kernverantwortung Apr 08, 2025 pm 07:05 PM

HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.

HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch Apr 12, 2025 am 12:02 AM

WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.

Der Unterschied zwischen H5- und Miniprogramm und Apps Der Unterschied zwischen H5- und Miniprogramm und Apps Apr 06, 2025 am 10:42 AM

H5. Der Hauptunterschied zwischen Mini -Programmen und App ist: Technische Architektur: H5 basiert auf Web -Technologie, und Mini -Programme und Apps sind unabhängige Anwendungen. Erfahrung und Funktionen: H5 ist leicht und einfach zu bedienen, mit begrenzten Funktionen; Mini -Programme sind leicht und haben eine gute Interaktivität. Apps sind leistungsstark und haben reibungslose Erfahrung. Kompatibilität: H5 ist plattformübergreifend, Applets und Apps werden von der Plattform eingeschränkt. Entwicklungskosten: H5 verfügt über niedrige Entwicklungskosten, mittlere Mini -Programme und die höchste App. Anwendbare Szenarien: H5 eignet sich für Informationsanzeigen, Applets eignen sich für leichte Anwendungen und Apps eignen sich für komplexe Funktionen.

Reacts Rolle bei HTML: Verbesserung der Benutzererfahrung Reacts Rolle bei HTML: Verbesserung der Benutzererfahrung Apr 09, 2025 am 12:11 AM

React kombiniert JSX und HTML, um die Benutzererfahrung zu verbessern. 1) JSX bettet HTML ein, um die Entwicklung intuitiver zu gestalten. 2) Der virtuelle DOM -Mechanismus optimiert die Leistung und reduziert den DOM -Betrieb. 3) Komponentenbasierte Verwaltungs-Benutzeroberfläche zur Verbesserung der Wartbarkeit. 4) Staatsmanagement und Ereignisverarbeitung verbessern die Interaktivität.

Was soll ich tun, wenn die Sicherheitssoftware des Unternehmens mit Anwendungen in Konflikt steht? Wie kann die Sicherheitssoftware von Far HUEEs beheben, dass eine gemeinsame Software nicht geöffnet wird? Was soll ich tun, wenn die Sicherheitssoftware des Unternehmens mit Anwendungen in Konflikt steht? Wie kann die Sicherheitssoftware von Far HUEEs beheben, dass eine gemeinsame Software nicht geöffnet wird? Apr 01, 2025 pm 10:48 PM

Kompatibilitätsprobleme und Fehlerbehebungsmethoden für Unternehmenssicherheit und Anwendung von Unternehmenssicherheit. Viele Unternehmen werden Sicherheitssoftware installieren, um die Sicherheit der Intranet zu gewährleisten. Sicherheitssoftware jedoch manchmal ...

So wählen Sie H5 und Applets So wählen Sie H5 und Applets Apr 06, 2025 am 10:51 AM

Die Auswahl von H5 und Applet hängt von den Anforderungen ab. Für Anwendungen mit plattformübergreifender, schneller Entwicklung und hoher Skalierbarkeit wählen Sie H5. Für Anwendungen mit nativen Erfahrung, umfangreichen Funktionen und Plattformabhängigkeiten wählen Sie Applets.

Was ist der Unterschied zwischen H5 -Seitenproduktion und Wechat -Applets Was ist der Unterschied zwischen H5 -Seitenproduktion und Wechat -Applets Apr 05, 2025 pm 11:51 PM

H5 ist flexibler und anpassbarer, erfordert jedoch qualifizierte Technologie. Mini -Programme werden schnell anfangen und leicht zu warten, sind jedoch durch das WeChat -Framework begrenzt.

Die Rolle von HTML: Strukturierung von Webinhalten Die Rolle von HTML: Strukturierung von Webinhalten Apr 11, 2025 am 12:12 AM

Die Rolle von HTML besteht darin, die Struktur und den Inhalt einer Webseite durch Tags und Attribute zu definieren. 1. HTML organisiert Inhalte über Tags wie das Lesen und Verständnis. 2. Verwenden Sie semantische Tags wie usw., um die Zugänglichkeit und SEO zu verbessern. 3. Optimierung des HTML -Codes kann die Ladegeschwindigkeit und die Benutzererfahrung der Webseite verbessern.

See all articles