suchen

Heim >Web-Frontend >js-Tutorial >Javascript ruft die internen Felder von wx.config ab und löst WeChat-Sharing_Javascript-Fähigkeiten

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

WBOY
WBOYOriginal
2016-05-16 15:11:211568Durchsuche

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>

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>

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;
 }
}

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;>

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;
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'
 });

 });
}
webpack.config.js

var webpack = require('webpack'); 
module.exports = { 
 entry: {
 index: './share.js',
 },
 output: {
 path: './',
 filename: '[name].js'
 }
};
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
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
Vorheriger Artikel：Einführung in sehr praktische neue Funktionen in ES6_Javascript-KenntnissenNächster Artikel：Einführung in sehr praktische neue Funktionen in ES6_Javascript-Kenntnissen

In Verbindung stehende Artikel

Mehr sehen