微信開發之JS-SDK + php 實作分享朋友/朋友圈，QQ/QQ空間-有解無憂

一、系結域名

先登錄微信公眾平臺進入“公眾號設定”的“功能設定”里填寫“JS介面安全域名”，

二、引入JS檔案

http://res2.wx.qq.com/open/js/jweixin-1.6.0.js

三、通過config介面注入權限驗證配置

把需要用到的JS-SDK的介面都放在jsApiList里面

四、示例代碼

前端

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title>微信分享</title>
        <script type="text/javascript" src="/static/index/js/jquery.js"></script>
        <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    </head>
    <body>
        
        <script type="text/javascript" charset="utf-8">
        wx.config({
            debug: false,
            appId: '{$signPackage.appId}',
            timestamp: {$signPackage.timestamp},
            nonceStr: '{$signPackage.nonceStr}',
            signature: '{$signPackage.signature}',
            jsApiList: [
              // 所有要呼叫的 API 都要加到這個串列中
              'updateAppMessageShareData', 'updateTimelineShareData'
            ]
          });
          
          // 在這里呼叫 API
        wx.ready(function () {
            // 分享朋友及qq
            wx.updateAppMessageShareData({ 
                title: '測驗分享標題', // 分享標題
                desc: '分享描述', // 分享描述
                link: 'http://test.zizhuyou.site/index/Plantocr/index', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                imgUrl: 'http://test.zizhuyou.site/static/index/images/dog.png', // 分享圖示
                success: function () {
                  // 設定成功
                  console.log('設定成功');
                  //alert('分享朋友或QQ成功');
                },
                
            });
            
            // 分享朋友圈及QQ空間
            wx.updateTimelineShareData({ 
                title: '測驗分享標題', // 分享標題
                link: 'http://test.zizhuyou.site/index/Plantocr/index', // 分享鏈接，該鏈接域名或路徑必須與當前頁面對應的公眾號JS安全域名一致
                imgUrl: 'http://test.zizhuyou.site/static/index/images/dog.png', // 分享圖示
                success: function () {
                  // 設定成功
                  //alert('分享朋友圈及QQ空間成功');
                }
            })
        })
        </script>
    </body>
</html>

后端

<?php
namespace app\index\controller;
use think\Controller;
use app\index\controller\Wechat;

/**
 * 微信功能開發
 */
class Wxopera extends Wechat
{

    /**
     * 微信分享
     */
    public function share(){
        $signPackage = json_decode($this->getSignPackage(),true);
    
        $this->assign('signPackage',$signPackage);
        return $this->fetch();
    }
    
    /**
     * 生成簽名
     */
    public function getSignPackage() 
    {

        // 實體化微信操作類
        $wx = new Wechat();

        // 獲取 ticket
        $jsapiTicket = $wx->getJsApiTicket();

        // 注意 URL 一定要動態獲取，不能 hardcode.
        $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https://" : "http://";
        // 當前頁面的url
        $url = "$protocol$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";

        $timestamp = time();    //生成簽名的時間戳
        $nonceStr = $this->createNonceStr();    //生成前面的隨機串

        // 這里引數的順序要按照 key 值 ASCII 碼升序排序
        $string = "jsapi_ticket=$jsapiTicket&noncestr=$nonceStr&timestamp=$timestamp&url=$url";
        // 對string進行sha1加密
        $signature = sha1($string);

        $signPackage = array(
          "appId"     => $wx->APPID,
          "nonceStr"  => $nonceStr,
          "timestamp" => $timestamp,
          "url"       => $url,
          "signature" => $signature,
          "rawString" => $string
        );
        return json_encode($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;
    }

}

注意：Wechat類是我自己封裝的，比如獲取access_token,ticket,curl請求這些，代碼可以看上一篇文字微信開發之生成二維碼，掃碼關注公眾號PHP

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/53153.html

標籤：PHP

上一篇：Laravel 7.6 發布

下一篇：解決PIL切圓形圖片存在鋸齒