Home Web Front-end HTML Tutorial Detailed explanation of sample code analysis of html static pages to implement WeChat sharing ideas

Detailed explanation of sample code analysis of html static pages to implement WeChat sharing ideas

May 26, 2017 pm 03:21 PM

When sharing a web page on WeChat, you want the link to be shared to be title + description + thumbnail. The method is provided in the WeChat development code example, but it only applies to dynamic pages. Since dedecms generates static files, I actually want to use ajax to obtain jssdk parameters and also implement the WeChat sharing function. I will share it with you here.
Front-end HTML code example:

<script src="http://外部站点引入/js/jquery-1.11.1.min.js"></script>
Copy after login
<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>
Copy after login

Modify the server file 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;
?>
Copy after login

Others can be set according to the dynamic page parameters.

The above is the detailed content of Detailed explanation of sample code analysis of html static pages to implement WeChat sharing ideas. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

The Roles of HTML, CSS, and JavaScript: Core Responsibilities The Roles of HTML, CSS, and JavaScript: Core Responsibilities Apr 08, 2025 pm 07:05 PM

HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.

React's Role in HTML: Enhancing User Experience React's Role in HTML: Enhancing User Experience Apr 09, 2025 am 12:11 AM

React combines JSX and HTML to improve user experience. 1) JSX embeds HTML to make development more intuitive. 2) The virtual DOM mechanism optimizes performance and reduces DOM operations. 3) Component-based management UI to improve maintainability. 4) State management and event processing enhance interactivity.

Understanding HTML, CSS, and JavaScript: A Beginner's Guide Understanding HTML, CSS, and JavaScript: A Beginner's Guide Apr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The difference between H5 and mini-programs and APPs The difference between H5 and mini-programs and APPs Apr 06, 2025 am 10:42 AM

H5. The main difference between mini programs and APP is: technical architecture: H5 is based on web technology, and mini programs and APP are independent applications. Experience and functions: H5 is light and easy to use, with limited functions; mini programs are lightweight and have good interactiveness; APPs are powerful and have smooth experience. Compatibility: H5 is cross-platform compatible, applets and APPs are restricted by the platform. Development cost: H5 has low development cost, medium mini programs, and highest APP. Applicable scenarios: H5 is suitable for information display, applets are suitable for lightweight applications, and APPs are suitable for complex functions.

What should I do if the company's security software conflicts with applications? How to troubleshoot HUES security software causes common software to fail to open? What should I do if the company's security software conflicts with applications? How to troubleshoot HUES security software causes common software to fail to open? Apr 01, 2025 pm 10:48 PM

Compatibility issues and troubleshooting methods for company security software and application. Many companies will install security software in order to ensure intranet security. However, security software sometimes...

What is the difference between H5 page production and WeChat applets What is the difference between H5 page production and WeChat applets Apr 05, 2025 pm 11:51 PM

H5 is more flexible and customizable, but requires skilled technology; mini programs are quick to get started and easy to maintain, but are limited by the WeChat framework.

How to solve the problem of JS resource caching in enterprise WeChat? How to solve the problem of JS resource caching in enterprise WeChat? Apr 04, 2025 pm 05:06 PM

Discussion on the JS resource caching issue of Enterprise WeChat. When upgrading project functions, some users often encounter situations where they fail to successfully upgrade, especially in the enterprise...

How to choose H5 and applets How to choose H5 and applets Apr 06, 2025 am 10:51 AM

The choice of H5 and applet depends on the requirements. For applications with cross-platform, rapid development and high scalability, choose H5; for applications with native experience, rich functions and platform dependencies, choose applets.

See all articles