Javascript obtient les champs internes de wx.config et résout les compétences de partage WeChat

Javascript obtient les champs internes de wx.config et résout les compétences de partage WeChat_javascript

WBOY

Libérer： 2016-05-16 15:11:21

original

1563 Les gens l'ont consulté

Contexte
Notre processus habituel lors du partage de développement sur WeChat est

 <&#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>

Copier après la connexion

Ce qui précède est un fichier PHP. Un gros inconvénient d'un tel code est que le couplage entre le front et le back end est trop élevé. Deuxièmement, l'écriture mixte n'est pas très belle, nous devons donc séparer PHP et HTML pour implémenter le. fonction de partage. La première chose est d'appeler l'API jssdk de WeChat pour obtenir les paramètres de configuration. Ceux-ci doivent être obtenus via le langage d'arrière-plan php, puis configurer ces paramètres dans wx.config <🎜 doivent être introduits avant wx.config. >http://res.wx.qq.com/open/js/jweixin-1.0.0.js Ensuite, vous pouvez écrire les fonctions partagées. Leur dépendance est wx.config, qui nécessite une bibliothèque js. . et les paramètres dans la configuration, partagez les dépendances wx.config Donc le plus important est de séparer les paramètres de configuration de php et de les obtenir séparément

Solution Écrivez le PHP pour obtenir les paramètres de configuration comme interface, utilisez ajax pour l'appeler en js, obtenez les paramètres et convertissez-les en objets, puis insérez les paramètres obtenus par ajax dans wx.config via la fonction de rappel

Structure et fonction du code

Entrée de la page index.html
Le côté serveur weixin.php obtient les paramètres de configuration
configdata.php convertit la configuration en sortie d'excuse
getconfig.js utilise ajax pour obtenir les données de configdata.php
lettre de rappel de partage share.js
fichier de configuration webpack.config.js webpack
index.js Après packaging, le html final appelle le fichier js

fichier statique html index.html

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

Copier après la connexion

configdata.php obtient les paramètres configurés en arrière-plan Notez que l'url doit être écrite avec l'URL de la page que vous partagez, sinon une erreur de signature invalide sera signalée

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

Copier après la connexion

formats weixin.php et paramètres de configuration des sorties

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

Copier après la connexion

getconfig.js utilise ajax pour obtenir les données d'interface (paramètres de configuration)

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

module.exports = getConfig;

Copier après la connexion

Fonction de partage share.js

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

 });
}

Copier après la connexion

webpack.config.js

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

Copier après la connexion

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.