Javascript ruft die internen Felder von wx.config ab und löst WeChat-Sharing_Javascript-Fähigkeiten-js-Tutorial-php.cn

Hintergrund
Unser üblicher Prozess beim Teilen von Entwicklungen auf WeChat ist

 <&#63;php
 require_once "jssdk.php";
 $jssdk = new JSSDK("yourAppID", "yourAppSecret");
 $signPackage = $jssdk->GetSignPackage();
&#63;>
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>微信分享</title>
 </head>
 <body>
 </body>
 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
 <script>
 wx.config({
  appId: '<&#63;php echo $signPackage["appId"];&#63;>',
  timestamp: <&#63;php echo $signPackage["timestamp"];&#63;>,
  nonceStr: '<&#63;php echo $signPackage["nonceStr"];&#63;>',
  signature: '<&#63;php echo $signPackage["signature"];&#63;>',
  jsApiList: ['onMenuShareTimeline'
  'onMenuShareAppMessage'
  ]
 });

 wx.ready(function() {
  
  wx.onMenuShareTimeline({
  title: '', // 分享标题
  link: '', // 分享链接
  imgUrl: '', // 分享图标
  success: function() {
   // 用户确认分享后执行的回调函数
  },
  cancel: function() {
   // 用户取消分享后执行的回调函数
  }
  });

  wx.onMenuShareAppMessage({
  title: '', // 分享标题
  desc: '', // 分享描述
  link: '', // 分享链接
  imgUrl: '', // 分享图标
  type: '', // 分享类型,music、video或link，不填默认为link
  dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
  success: function() {
   // 用户确认分享后执行的回调函数
  },
  cancel: function() {
   // 用户取消分享后执行的回调函数
  }
  });

 });
 </script>

 </html>

Nach dem Login kopieren

Ein großer Nachteil eines solchen Codes ist, dass die Kopplung zwischen Front- und Back-End zu hoch ist. Zweitens ist das gemischte Schreiben nicht sehr schön, daher müssen wir PHP und HTML trennen, um es zu implementieren Die Freigabefunktion besteht darin, die jssdk-API von WeChat aufzurufen. Diese muss über die PHP-Hintergrundsprache abgerufen werden und diese Parameter müssen dann in wx.config eingegeben werden >http://res.wx.qq.com/open/js/jweixin-1.0.0.js Dann können Sie die gemeinsamen Funktionen schreiben. Ihre Abhängigkeit ist wx.config, die eine js-Bibliothek erfordert . und Parameter innerhalb der Konfiguration, gemeinsame Abhängigkeiten wx.config Das Wichtigste ist also, die Konfigurationsparameter von PHP zu trennen und separat abzurufen

Lösung

Schreiben Sie PHP, um die Konfigurationsparameter als Schnittstelle abzurufen, rufen Sie es mit Ajax in js auf, rufen Sie die Parameter ab und konvertieren Sie sie in Objekte. Füllen Sie dann die von Ajax erhaltenen Parameter über die Rückruffunktion in wx.config ein
Codestruktur und Funktion

index.html-Seiteneintrag
weixin.php serverseitig erhält Konfigurationsparameter
configdata.php wandelt die Konfiguration in eine Entschuldigungsausgabe um
getconfig.js verwendet Ajax, um die Daten von configdata.php abzurufen
share.js Share Rückrufschreiben
webpack.config.js Webpack-Konfigurationsdatei
index.js Nach dem Packen ruft der endgültige HTML-Code die js-Datei auf

index.html statische HTML-Datei

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>静态页面微信分享测试</title>
</head>
<body>
 <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
 <script src="statics/js/index.js"></script>
</body>
</html>

Nach dem Login kopieren

configdata.php ruft die konfigurierten Parameter im Hintergrund ab Beachten Sie, dass die URL mit der URL der Seite geschrieben werden muss, die Sie teilen, andernfalls wird ein Fehler aufgrund einer ungültigen Signatur gemeldet

 <&#63;php
class JSSDK {
 private $appId;
 private $appSecret;

 public function __construct($appId, $appSecret) {
 $this->appId = $appId;
 $this->appSecret = $appSecret;
 }

 public function getSignPackage() {
 $jsapiTicket = $this->getJsApiTicket();
 $url = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
 $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 = "https://api.weixin.qq.com/cgi-bin/ticket/getticket&#63;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 = "https://api.weixin.qq.com/cgi-bin/token&#63;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_URL, $url);

 $res = curl_exec($curl);
 curl_close($curl);

 return $res;
 }
}

Nach dem Login kopieren

weixin.php formatiert und gibt Konfigurationsparameter aus

 <&#63;php

 require_once "weixin.php";
 $jssdk = new JSSDK(appId, appSecretecret);
 $signPackage = $jssdk->GetSignPackage();
 
 class Config{ 
 var $appId; 
 var $timestamp; 
 var $nonceStr; 
 var $signature; 
 var $url;
 } 
 
 $config = new Config(); 
 
 $config -> appId = $signPackage["appId"]; 
 $config -> timestamp = $signPackage["timestamp"]; 
 $config -> nonceStr = $signPackage["nonceStr"]; 
 $config -> signature = $signPackage["signature"];
 $config -> url = $signPackage["url"]; 
 
 echo json_encode($config);
&#63;>

Nach dem Login kopieren

getconfig.js verwendet Ajax, um Schnittstellendaten (Konfigurationsparameter) abzurufen

var getConfig = function(callback) {
 $.ajax({
 url: "http://www.goxueche.com/api/configdata.php",
 type: "get",
 success: function(data) {
  callback(data);
 }
 })
}

module.exports = getConfig;

Nach dem Login kopieren

Share.js-Freigabefunktion

var getWeixincofig = require("./getconfig.js");
getWeixincofig(shareweixin);


function shareweixin(data) {

 var data = JSON.parse(data);
 console.log(data);

 window.wx.config({
 debug:true,
 appId: data.appId,
 timestamp: data.timestamp,
 nonceStr: data.nonceStr,
 signature: data.signature,
 jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage']
 });

 wxShare();
}

function wxShare() {
 //检测api是否生效
 wx.ready(function() {
 wx.checkJsApi({
 jsApiList: [
 'getNetworkType',
 'previewImage'
 ],
 success: function(res) {
 console.log(JSON.stringify(res));
 }
 });
 //分享给好友
 wx.onMenuShareAppMessage({
 title: '趣学车-有温度的互联网驾校',
 desc: '想去学车，就趣学车!',
 link: 'http://www.goxueche.com',
 imgUrl: 'http://www.goxueche.com/....png'
 });
 
 //分享到朋友圈
 wx.onMenuShareTimeline({
 title: '趣学车-有温度的互联网驾校',
 desc: '想去学车，就趣学车!',
 link: 'http://www.goxueche.com',
 imgUrl: 'http://www.goxueche.com/....png'
 });

 });
}

Nach dem Login kopieren

webpack.config.js

var webpack = require('webpack'); 
module.exports = { 
 entry: {
 index: './share.js',
 },
 output: {
 path: './',
 filename: '[name].js'
 }
};

Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.