웹 프론트엔드 HTML 튜토리얼 WeChat 공유 아이디어를 구현하기 위한 HTML 정적 페이지의 샘플 코드 분석에 대한 자세한 설명

WeChat 공유 아이디어를 구현하기 위한 HTML 정적 페이지의 샘플 코드 분석에 대한 자세한 설명

May 26, 2017 pm 03:21 PM

WeChat에서 웹페이지를 공유할 때 공유하려는 링크는 제목 + 설명 + 썸네일입니다. 해당 방법은 WeChat 개발 코드 예제에 제공되지만 동적 페이지에만 적용됩니다. Dedecms는 정적 파일을 생성하므로 실제로 ajax를 사용하여 jssdk 매개변수를 얻고 WeChat 공유 기능도 구현하고 싶습니다. 여기에서 공유하겠습니다.
프런트 엔드 HTML 코드 예:

<script src="http://外部站点引入/js/jquery-1.11.1.min.js"></script>
로그인 후 복사
<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>
로그인 후 복사

서버 파일 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;
?>
로그인 후 복사

기타는 동적 페이지 매개변수에 따라 설정할 수 있습니다.

위 내용은 WeChat 공유 아이디어를 구현하기 위한 HTML 정적 페이지의 샘플 코드 분석에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
Will R.E.P.O. 크로스 플레이가 있습니까?
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

DeepSeek 이미지 생성 자습서 DeepSeek 이미지 생성 자습서 Feb 19, 2025 pm 04:15 PM

Deepseek : 강력한 AI 이미지 생성 도구! DeepSeek 자체는 이미지 생성 도구가 아니지만 강력한 핵심 기술은 많은 AI 페인팅 도구를 지원합니다. DeepSeek을 사용하여 이미지를 간접적으로 생성하는 방법을 알고 싶으십니까? 계속 읽으십시오! DeepSeek 기반 AI 도구로 이미지 생성 : 다음 단계에서는 다음 도구를 사용하도록 안내합니다. AI 페인팅 도구 시작 : DeepSeek 기반 AI 페인팅 도구를 검색하고 열면 "Simple AI"를 검색하십시오). 도면 모드 선택 : "AI 드로잉"또는 유사한 함수를 선택하고 "애니메이션 아바타", "풍경"과 같은 필요에 따라 이미지 유형을 선택하십시오.

Gateio 중국 공식 웹 사이트 Gate.io 거래 플랫폼 웹 사이트 Gateio 중국 공식 웹 사이트 Gate.io 거래 플랫폼 웹 사이트 Feb 21, 2025 pm 03:06 PM

2013 년에 설립 된 주요 암호 화폐 거래 플랫폼 인 Gate.io는 중국 사용자에게 완전한 공식 중국 웹 사이트를 제공합니다. 이 웹 사이트는 스팟 거래, 선물 거래 및 대출을 포함한 광범위한 서비스를 제공하며 중국 인터페이스, 풍부한 자원 및 커뮤니티 지원과 같은 특별한 기능을 제공합니다.

OKX 거래 플랫폼의 취급 수수료 목록 OKX 거래 플랫폼의 취급 수수료 목록 Feb 15, 2025 pm 03:09 PM

OKX Trading Platform은 거래 수수료, 인출 수수료 및 금융 수수료를 포함하여 다양한 요금을 제공합니다. 현물 거래의 경우 거래량은 거래량 및 VIP 수준에 따라 다르며 "시장 제조업체 모델"을 채택합니다. 즉, 시장은 각 거래에 대해 낮은 취급 수수료를 청구합니다. 또한 OKX는 통화 표준 계약, USDT 계약 및 배송 계약을 포함한 다양한 선물 계약을 제공하며 각 계약의 수수료 구조도 다릅니다.

Gateio Exchange App Old 버전 Gateio Exchange App Old 버전 다운로드 채널 Gateio Exchange App Old 버전 Gateio Exchange App Old 버전 다운로드 채널 Mar 04, 2025 pm 11:36 PM

Gateio Exchange 앱은 공식, 제 3 자 애플리케이션 시장, 포럼 커뮤니티 및 기타 채널을 다루는 기존 버전의 채널을 다운로드합니다. 또한 기존 버전을 쉽게 얻고 새로운 버전 또는 장치 호환성을 사용하여 불편 함 문제를 해결하는 데 도움이됩니다.

Ouyi Exchange App 국내 다운로드 자습서 Ouyi Exchange App 국내 다운로드 자습서 Mar 21, 2025 pm 05:42 PM

이 기사는 중국의 Ouyi Okx 앱의 안전한 다운로드에 대한 자세한 안내서를 제공합니다. 국내 앱 스토어의 제한으로 인해 사용자는 OUYI OKX의 공식 웹 사이트를 통해 앱을 다운로드하거나 공식 웹 사이트에서 제공 한 QR 코드를 사용하여 스캔 및 다운로드하는 것이 좋습니다. 다운로드 프로세스 중에 공식 웹 사이트 주소를 확인하고 응용 프로그램 권한을 확인하고 설치 후 보안 스캔을 수행하며 2 요인 확인을 활성화하십시오. 사용하는 동안 현지 법률 및 규정을 따르고, 안전한 네트워크 환경을 사용하고, 계정 보안을 보호하고, 사기에 대해 경계하고, 합리적으로 투자하십시오. 이 기사는 참조 용이며 투자 조언은 자신의 위험에 처해 있습니다.

HTML, CSS 및 JavaScript의 역할 : 핵심 책임 HTML, CSS 및 JavaScript의 역할 : 핵심 책임 Apr 08, 2025 pm 07:05 PM

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

참깨 오픈 도어 로그인 등록 입구 게이트 .io 교환 등록 공식 웹 사이트 입구 참깨 오픈 도어 로그인 등록 입구 게이트 .io 교환 등록 공식 웹 사이트 입구 Mar 04, 2025 pm 04:51 PM

Gate.io (Sesame Open Door)는 세계 최고의 암호 화폐 거래 플랫폼입니다. 자습서는 계정 등록 및 로그인, KYC 인증, 화폐 및 디지털 통화 재충전, 거래 쌍 선택, 한도/시장 거래 주문 및 주문 및 거래 기록보기와 같은 단계를 다루고 Cryptocurrency 거래를 위해 GATE.IO 플랫폼을 신속하게 시작할 수 있도록 도와줍니다. 초보자이든 베테랑이든,이 튜토리얼에서 혜택을 받고 Gate.io 거래 기술을 쉽게 마스터 할 수 있습니다.

H5와 미니 프로그램과 앱의 차이점 H5와 미니 프로그램과 앱의 차이점 Apr 06, 2025 am 10:42 AM

H5. 미니 프로그램과 앱의 주요 차이점은 다음과 같습니다. 기술 아키텍처 : H5는 웹 기술을 기반으로하며 미니 프로그램 및 앱은 독립적 인 응용 프로그램입니다. 경험과 기능 : H5는 가볍고 사용하기 쉽고 기능이 제한되어 있습니다. 미니 프로그램은 가벼우 며 상호성이 우수합니다. 앱은 강력하고 부드러운 경험이 있습니다. 호환성 : H5는 크로스 플랫폼 호환성이며 애플릿 및 앱은 플랫폼에 의해 제한됩니다. 개발 비용 : H5는 개발 비용이 낮고 중간 미니 프로그램 및 최고 앱이 있습니다. 적용 가능한 시나리오 : H5는 정보 표시에 적합하고 애플릿은 가벼운 응용 프로그램에 적합하며 앱은 복잡한 기능에 적합합니다.

See all articles