PHP を使用して WeChat ミニ プログラムにカスタマイズされた共有機能を実装するためのヒント

WeChat ミニ プログラムの人気に伴い、ますます多くの開発者が WeChat ミニ プログラムの開発スキルとベスト プラクティスに注目し始めています。重要な機能の 1 つはカスタム共有機能です。これはミニ プログラムのユーザー エクスペリエンスとコミュニケーション効果の向上に役立ちます。この記事では、PHP を使用して WeChat ミニ プログラムにカスタム共有機能を実装する方法を紹介します。

1. WeChat ミニ プログラムの共有原理

WeChat ミニ プログラムにおけるカスタム共有機能の実装原理は、WeChat 公式アカウントの実装原理と同様です。ユーザーが「共有」ボタンをクリックすると、ミニ プログラムは WeChat サーバーにリクエストを送信し、ミニ プログラム ページの共有情報を取得します。 WeChat サーバーは、共有タイトル、共有説明、共有リンク、共有画像などの情報を含む JSON データを返し、ミニ プログラムはこの情報をポップアップ共有ボックスに表示します。

2. カスタム共有情報の実装手順

1. access_token の取得

カスタム共有機能を使用する前に、まず WeChat アプレットの access_token を取得する必要があります。 WeChat APIにアクセスするためのトークン。次のコードを使用して 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'];

2. jsapi_ticket の取得

jsapi_ticket の取得は、後で JSSDK を使用して WeChat API を呼び出すときに必要な署名用です。次のコードを使用して 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'];

3. 署名の生成

ミニ プログラム ページでは、WeChat が提供する JSSDK を使用して WeChat API を呼び出す必要があります。ただし、JSSDK を使用する前に、呼び出し元の正当性を検証するために署名を生成する必要があります。次のコードを使用して署名を生成できます:

$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); // 生成签名

4. 共有情報の設定

上記の手順により、必要な情報を取得したので、取得した情報を送信する必要があります。小規模なプログラム クライアントに。次のコードを使用して情報の共有を設定できます:

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

5. ページで JSSDK を呼び出します

最後に、ページの下部で JSSDK ライブラリを導入し、JSSDK API を呼び出します。適切な場所。次のコードを使用して、JSSDK ライブラリをページに導入できます:

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

ページでカスタム共有機能を使用する必要がある場合、次のコードを使用して WeChat API を呼び出すことができます:

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 () {
            // 用户取消分享后执行的回调函数
        }
    });
});

3. まとめ

WeChat アプレットにカスタム共有機能を実装するには、access_token、jsapi_ticket の取得、署名の生成という手順を経て、最後に JSSDK の API を呼び出す必要があります。ページにアクセスして共有機能を完了します。実装プロセスは比較的面倒ですが、ミニプログラムページにコードを追加するだけで、美しい共有機能を実現し、ユーザーエクスペリエンスとコミュニケーション効果を向上させることができます。

以上がPHP を使用して WeChat ミニ プログラムにカスタマイズされた共有機能を実装するためのヒントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。