Conseils pour implémenter des fonctions de partage personnalisées dans les mini-programmes WeChat utilisant PHP-tutoriel php-php.cn

Conseils pour implémenter des fonctions de partage personnalisées dans les mini-programmes WeChat utilisant PHP

王林

Libérer： 2023-05-31 20:22:01

original

2245 Les gens l'ont consulté

Avec la popularité des mini-programmes WeChat, de plus en plus de développeurs commencent à prêter attention aux compétences de développement et aux meilleures pratiques des mini-programmes WeChat. L'une des fonctionnalités importantes est la fonction de partage personnalisé, car elle contribue à améliorer l'expérience utilisateur et l'effet de communication du mini-programme. Dans cet article, nous présenterons comment utiliser PHP pour implémenter des fonctions de partage personnalisées dans les mini-programmes WeChat.

1. Principe de partage du programme WeChat Mini

Dans le programme WeChat Mini, le principe de mise en œuvre de la fonction de partage personnalisé est similaire à celui du compte officiel WeChat. Lorsque l'utilisateur clique sur le bouton « Partager », le mini programme enverra une requête au serveur WeChat pour obtenir les informations de partage de la page du mini programme. Le serveur WeChat renverra des données JSON contenant des informations telles que le titre du partage, la description du partage, le lien de partage et l'image de partage, et le mini-programme affichera ces informations dans la boîte de partage contextuelle.

2. Étapes de mise en œuvre des informations de partage personnalisées

1. Obtenir access_token

Avant d'utiliser la fonction de partage personnalisé, nous devons obtenir le access_token de l'applet WeChat, qui est le jeton pour accéder à l'API WeChat. Nous pouvons utiliser le code suivant pour obtenir le access_token :

$wx_appid = 'your_appid'; // 小程序的appid
$wx_appsecret = 'your_appsecret'; // 小程序的appsecret
$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$wx_appid}&secret={$wx_appsecret}";
$result = json_decode(file_get_contents($url), true);
$access_token = $result['access_token'];

Copier après la connexion

2. Obtenir jsapi_ticket

L'obtention de jsapi_ticket concerne la signature requise lors de l'appel ultérieur de l'API WeChat à l'aide de JSSDK. Nous pouvons utiliser le code suivant pour obtenir jsapi_ticket :

$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$access_token}&type=jsapi";
$result = json_decode(file_get_contents($url), true);
$jsapi_ticket = $result['ticket'];

Copier après la connexion

3. Générer une signature

Dans la page du mini programme, nous devons utiliser le JSSDK fourni par WeChat pour appeler l'API WeChat. Cependant, avant d'utiliser JSSDK, nous devons générer une signature pour vérifier la légitimité de l'appelant. Nous pouvons utiliser le code suivant pour générer une signature :

$noncestr = mt_rand(); // 生成随机字符串
$timestamp = time(); // 生成时间戳
$url = 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']; // 当前页面的URL
$string = "jsapi_ticket={$jsapi_ticket}&noncestr={$noncestr}&timestamp={$timestamp}&url={$url}";
$signature = sha1($string); // 生成签名

Copier après la connexion

4. Définir les informations de partage

Grâce aux étapes ci-dessus, nous avons obtenu les informations nécessaires, et nous devons ensuite envoyer les informations obtenues au client du mini programme. Nous pouvons utiliser le code suivant pour configurer le partage d'informations :

$share_info = array(
    'title' => 'your_share_title', // 分享标题
    'desc' => 'your_share_desc', // 分享描述
    'link' => 'your_share_link', // 分享链接
    'imgUrl' => 'your_share_imgurl', // 分享图片
);
$jsapi_config = array(
    'debug' => false, // 是否开启调试模式
    'appId' => $wx_appid, // 小程序的appid
    'timestamp' => $timestamp, // 时间戳
    'nonceStr' => $noncestr, // 随机字符串
    'signature' => $signature, // 签名
    'jsApiList' => array('onMenuShareAppMessage', 'onMenuShareTimeline', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'), // 需要使用的微信API列表
);
$share_info_json = json_encode($share_info);
$jsapi_config_json = json_encode($jsapi_config);
echo "<script>var share_info = {$share_info_json}; var jsapi_config = {$jsapi_config_json};</script>";

Copier après la connexion

5. Appelez JSSDK dans la page

Enfin, présentez la bibliothèque JSSDK en bas de la page et appelez l'API JSSDK à l'endroit approprié. Nous pouvons utiliser le code suivant pour introduire la bibliothèque JSSDK dans la page :

<script src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>

Copier après la connexion

Là où nous devons utiliser la fonction de partage personnalisé dans la page, nous pouvons utiliser le code suivant pour appeler l'API WeChat :

wx.config(jsapi_config); // 初始化JSSDK库
wx.ready(function () {
    // onMenuShareAppMessage：分享给好友
    wx.onMenuShareAppMessage({
        title: share_info.title,
        desc: share_info.desc,
        link: share_info.link,
        imgUrl: share_info.imgUrl,
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });

    // onMenuShareTimeline：分享到朋友圈
    wx.onMenuShareTimeline({
        title: share_info.title,
        link: share_info.link,
        imgUrl: share_info.imgUrl,
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });

    // onMenuShareQQ：分享到QQ
    wx.onMenuShareQQ({
        title: share_info.title,
        desc: share_info.desc,
        link: share_info.link,
        imgUrl: share_info.imgUrl,
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });

    // onMenuShareWeibo：分享到微博
    wx.onMenuShareWeibo({
        title: share_info.title,
        desc: share_info.desc,
        link: share_info.link,
        imgUrl: share_info.imgUrl,
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });

    // onMenuShareQZone：分享到QQ空间
    wx.onMenuShareQZone({
        title: share_info.title,
        desc: share_info.desc,
        link: share_info.link,
        imgUrl: share_info.imgUrl,
        success: function () {
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            // 用户取消分享后执行的回调函数
        }
    });
});

Copier après la connexion

3. Résumé

Implémenté dans l'applet WeChat Pour personnaliser la fonction de partage, vous devez suivre les étapes d'obtention de access_token, jsapi_ticket et générer une signature, et enfin appeler l'API de JSSDK dans la page pour compléter la fonction de partage. Bien que le processus de mise en œuvre soit relativement lourd, il vous suffit d'ajouter un morceau de code à la page du mini programme pour obtenir une belle fonction de partage et améliorer l'expérience utilisateur et les effets de communication.

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!