Application de développement js-sdk de compte public php WeChat-tutoriel php-php.cn

Application de développement js-sdk de compte public php WeChat

墨辰丷

Libérer： 2023-03-28 13:20:02

original

1897 Les gens l'ont consulté

Cet article présente principalement en détail les informations pertinentes sur le développement et l'application du compte public PHP WeChat js-sdk. Il a une certaine valeur de référence. Les amis intéressés peuvent se référer à

Test de la fonction d'interface js, j'utilise BAE. serveur pas serveur SAE. Le serveur SAE ne peut pas écrire de fichiers et il y aura des problèmes avec le test.
Qu'est-ce que js-sdk, permettez-moi d'abord de démontrer la fonction spécifique de l'interface js-sdk.

J'ai ouvert au hasard un article push sur WeChat comme indiqué ci-dessous :

Application de développement js-sdk de compte public php WeChat

Cliquez sur le premier article

Ce qui précède est notre article de connexion Si nous envoyons cet article à un ami, l'effet d'affichage sera le suivant :

Application de développement js-sdk de compte public php WeChat

Partagez sur Moments et voyons l'effet :

Application de développement js-sdk de compte public php WeChat

Pourquoi y a-t-il aussi un lien d'article, dans le compte officiel, envoyé à des amis, l'effet d'interface affiché lors de l'envoi à Moments est différent. L'effet d'affichage du compte officiel est dû au fait que le compte officiel WeChat appelle l'interface de message WeChat lors de la poussée, et les deux derniers sont dus au fait que la page appelle l'interface SDK liée à js-sdk.

Envoyer à des amis. L'interface js est appelée pour obtenir le statut de clic du bouton "Partager avec des amis" et l'interface de partage de contenu personnalisée.
Envoyer vers Moments. L'interface js est appelée pour obtenir le statut de clic du bouton "Partager vers Moments" et l'interface de partage de contenu personnalisée.

Mise en œuvre les étapes pour appeler l'interface js-sdk :

Étape 1 : Entrez les « Paramètres de fonction » des « Paramètres du compte officiel » sur le public WeChat plateforme et renseignez le "Nom de domaine de sécurité de l'interface JS".

Comme indiqué ci-dessous :

Application de développement js-sdk de compte public php WeChat

Seules les pages placées sous ce nom de domaine peuvent appeler l'interface js.

Étape 2 : http://demo.open.weixin.qq.com/jssdk/sample.zip Connectez-vous à cette adresse pour télécharger, ouvrez le dossier php à l'intérieur, Vous avez trouvé 4 fichiers php

Application de développement js-sdk de compte public php WeChat

Les 3 premiers fichiers php sont des fichiers de configuration, n'y touchez pas, sample.php est ce que nous avons ouvert dans WeChat Page de connexion, dans cette page nous écrivons notre code de page. J'ai utilisé ce fichier pour des tests et le code qu'il contient est différent de la version originale.

<?php
// echo "nihao";
require_once "jssdk.php";
$jssdk = new JSSDK("wxaf471be5d2bc9521", "93f5c3817074d43e7a7ab3f403cc72dd");//JSSDK中的参数是appid和appsecret。
$signPackage = $jssdk->GetSignPackage();//获取配置参数。
?>

Copier après la connexion

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</head>
<body>
 <p>我靠</p>
 <p>猪八戒</p>
 <button style="color: red" id="btn">你好</button>
 <button id="btn1">唐生</button>
</body>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>//这个是js-sdk文件，一定要引入。
<script>

 var button = document.getElementsByTagName("button");
 var btn = document.getElementById("btn");
 var p = document.getElementsByTagName("p")[0];
 var btn1 = document.getElementById("btn1");
 //wx表示一个js-sdk构建的一个对象。config（）是它的一个方法，这个接口用来验证配置。
 wx.config({
 debug: true,//true表示每调用一个接口信息都会在页面alert一段字符串。方便测试过程中国是否能正确调用接口。
 appId: &#39;<?php echo $signPackage["appId"];?>&#39;,
 timestamp: <?php echo $signPackage["timestamp"];?>,
 nonceStr: &#39;<?php echo $signPackage["nonceStr"];?>&#39;,
 signature: &#39;<?php echo $signPackage["signature"];?>&#39;,
 //上面的4个参数，如果你像深入了解其来源就去查看jssdk.php代码。测试过程不需要对上面的代码做任何操作。
 jsApiList: [
  // 所有要调用的 API 都要加到这个列表中
  &#39;onMenuShareAppMessage&#39;,//获取“分享给朋友”按钮点击状态及自定义分享内容接口。
  &#39;chooseImage&#39;,//获取手机相片接口
  &#39;openLocation&#39;//获取微信地图接口
 ]
 });

//所有的js调用接口都要放到下面的ready（）中。
 wx.ready(function () {
 // 在这里调用 API
 //获取“分享给朋友”按钮点击状态，点击后发送给朋友微信，微信上的推送显示内容就是下面的数据
  wx.onMenuShareAppMessage({
   title: &#39;大圣&#39;, // 分享标题
   desc: &#39;我要坚持&#39;, // 分享描述
   link: &#39;http://www.baidu.com&#39;, // 分享链接
   imgUrl: &#39;http://discuz.comli.com/weixin/weather/icon/cartoon.jpg&#39;, // 分享图标
   type: &#39;link&#39;, // 分享类型,music、video或link，不填默认为link
   dataUrl: &#39;&#39;, // 如果type是music或video，则要提供数据链接，默认为空
   success: function () { 
    // 用户确认分享后执行的回调函数
    alert("success");
   },
   cancel: function () { 
    // 用户取消分享后执行的回调函数
    alert("error");
   }
  });
 //拍照或从手机相册选择。点击页面上的按钮就可以调用手机里的相册。
  btn.onclick = function(){
  wx.chooseImage({
   count: 1, // 默认9
   sizeType: [&#39;original&#39;, &#39;compressed&#39;], // 可以指定是原图还是压缩图，默认二者都有
   sourceType: [&#39;album&#39;, &#39;camera&#39;], // 可以指定来源是相册还是相机，默认二者都有
   success: function (res) {
    var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
   }
  })
  };
 //微信内置地图接口。点击该按钮就可转到显示当前位置的地图页面
  btn1.onclick = function() {

  wx.openLocation({
 latitude: 0, // 纬度，浮点数，范围为90 ~ -90
 longitude: 0, // 经度，浮点数，范围为180 ~ -180。
 name: &#39;&#39;, // 位置名
 address: &#39;&#39;, // 地址详情说明
 scale: 1, // 地图缩放级别,整形值,范围从1~28。默认为最大
 infoUrl: &#39;&#39; // 在查看位置界面底部显示的超链接,可点击跳转
});
  }

 });
// wx.checkJsApi({
//  jsApiList: [&#39;onMenuShareAppMessage&#39;], // 需要检测的JS接口列表，所有JS接口列表见附录2,
//  success: function(res) {
//   // 以键值对的形式返回，可用的api值true，不可用为false
//   // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
//   alert("success");
//  }
// });

// btn.onclick = function() {
//  p.innerText = "齐天大圣";
//  wx.onMenuShareAppMessage({
//  title: &#39;大圣&#39;, // 分享标题
//  desc: &#39;我要坚持&#39;, // 分享描述
//  link: &#39;http://www.baidu.com&#39;, // 分享链接
//  imgUrl: &#39;http://discuz.comli.com/weixin/weather/icon/cartoon.jpg&#39;, // 分享图标
//  type: &#39;link&#39;, // 分享类型,music、video或link，不填默认为link
//  dataUrl: &#39;&#39;, // 如果type是music或video，则要提供数据链接，默认为空
//  success: function () { 
//   // 用户确认分享后执行的回调函数
//   alert("success");
//  },
//  cancel: function () { 
//   // 用户取消分享后执行的回调函数
//   alert("error");
//  }
// });
 // }
</script>
</html>

Copier après la connexion

Pour tester la fonction d'interface de js, j'utilise le serveur BAE et non SAE serveur. Le serveur SAE ne peut pas écrire dans le fichier et le test rencontrera des problèmes.

Pour plus de fonctions et d'informations détaillées, veuillez visiter http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html

Ce qui précède est l'intégralité du contenu de cet article, j'espère que vous peut en tirer des leçons.

Recommandations associées :

Résumé des connaissances PHP sur les objets

La différence entre les constantes, les propriétés statiques et les propriétés non statiques en php

Classes et objets en php : Explication graphique détaillée des propriétés statiques et méthodes statiques

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!