Récemment, j'ai rencontré une fonction au travail, qui nous oblige à personnaliser la page H5 sur notre téléphone mobile pour la partager avec des amis WeChat, Moments, QQ et QQ space.

Ce qui suit est une méthode que j'ai obtenue de Baidu et que j'ai testée moi-même?; je la partagerai avec tout le monde afin que nous puissions apprendre les uns des autres.

Principe de mise en ?uvre : Le partage personnalisé de H5 nécessite l'utilisation de l'interface de partage de la plateforme publique WeChat, qui est le JSSDK dans le développement web WeChat, [documentation spécifique : https://developers.weixin. qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html】Utilisez l'interface de partage dans le SDK de WeChat, comme indiqué ci-dessous?:

Remarque?: la fonction de partage personnalisée ci-dessous ne peut être partagée que dans le navigateur intégré de WeChat et n'est pas disponible dans d'autres navigateurs?;

# 1. Enregistrez un compte public WeChat

Nous devons d'abord ouvrir un compte public WeChat. Le type de compte public doit être un abonnement. compte ou un compte personnel Il n'y a pas de fonction d'interface de partage.

# 2. Activation des autorisations

Une fois l'enregistrement de notre compte officiel terminé, nous devons nous connecter à la plateforme publique WeChat, accéder aux autorisations de l'interface de développement et activer les autorisations pour l'interface de partage [L'authentification est requise pour ouvrir les autorisations Entreprise et certification de paiement], l'image suivante est la situation qui a été certifiée?:

# 3. Une fois l'autorisation de l'interface obtenue activé, nous devons définir un nom de domaine sécurisé d'interface JS pour le compte officiel

Connectez-vous à la plateforme publique WeChat, allez dans Paramètres -> Paramètres du compte public -> Paramètres de fonction, remplissez la sécurité de l'interface JS valide nom de domaine [nom de domaine d'accès à votre projet], comme indiqué dans la figure ci-dessous?:

# 4. Une fois le nom de domaine sécurisé renseigné avec succès, vous devez configurer un Liste blanche IP

Cliquez sur Développement->Paramètres de base->Liste blanche IP pour renseigner une IP de serveur [vous L'adresse IP du serveur où se trouve le projet], les raisons spécifiques seront mentionnées ci-dessous, comme indiqué dans la figure ci-dessous?:

# 5. Les fonctions ci-dessus doivent être configurées dans le compte public Terminé, commen?ons à mettre l'interface dans le projet spécifique

<.>

## (1) Introduisez le fichier JS

Introduisez le fichier JS suivant sur la page qui doit appeler l'interface JS, (Support https)?: http://res. wx.qq.com/open/js/jweixin-1.4.0.js

Si vous avez besoin d'améliorer encore la stabilité du service, lorsque les ressources ci-dessus sont inaccessibles, vous pouvez modifier la visite?: http://res2 .wx.qq.com/open/js/jweixin-1.4.0.js (prend en charge https)

## (2) Injecter la vérification des autorisations via l'interface de configuration Configuration

Toutes les pages qui doivent utiliser JS-SDK doivent d'abord injecter des informations de configuration, sinon elles ne pourront pas appeler

wx.config({
  debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會通過log打出，僅在pc端時才會打印。
  appId: '', // 必填，公眾號的唯一標識
  timestamp: , // 必填，生成簽名的時間戳
  nonceStr: '', // 必填，生成簽名的隨機串
  signature: '',// 必填，簽名
  jsApiList: [] // 必填，需要使用的JS接口列表
});

Parmi les paramètres de vérification des autorisations ci-dessus,

1. appId" est l'identification unique du compte officiel, qui peut être obtenue sur la plateforme publique WeChat

2. "timestamp", timestamp

3. "nonceStr", cha?ne aléatoire, [la longueur ne doit pas dépasser 32 caractères]

4. "signature", signature (doit épisser les paramètres puis chiffrer)

5.jsApiList est une liste de Interfaces JS, comme suit Image?: [Lien?: https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#62]

(3) Générer une signature "signature" [un endroit plus compliqué]

Pour générer une signature, nous devons utiliser plusieurs paramètres, puis Les paramètres sont concaténés en une cha?ne puis chiffrés à l'aide de sha1().

Les paramètres sont?: noncestr?: cha?ne aléatoire [Cela doit être cohérent avec la cha?ne aléatoire lors de la vérification des autorisations]

jsapi_ticket?: jsapi_ticket est un ticket temporaire utilisé par les comptes publics pour appeler l'interface WeChat JS. Dans des circonstances normales, le jsapi_ticket est valable 7?200 secondes et est obtenu via access_token.

horodatage?: horodatage [Cet horodatage doit également être cohérent avec l'horodatage lors de la vérification des autorisations, l'unité est la seconde]

url?: L'URL de la page Web actuelle, à l'exclusion du # et de ses caractères suivants

Puis concaténer tous les paramètres dans une cha?ne , par exemple?:

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW×tamp=1414587457&url=http://mp.weixin.qq.com?params=value

然后對上面的字符串進行加密【sha1()函數(shù)進行加密】，得到signature。

b.現(xiàn)在來說說怎樣獲得調(diào)用微信調(diào)用JS接口的臨時票據(jù)jsapi_ticke

因為jsapi_ticket的有效期為7200秒，并且需要通過access_token來獲取到，所以我們先獲取access_token；access_token公眾號的一天獲取次數(shù)有限，2000次，且有效時間為7200秒，所以我們可以考慮每次獲取到的access_token放入緩存或者讓數(shù)據(jù)表中，在有效期內(nèi)反復(fù)調(diào)用【我是存儲到數(shù)據(jù)表中的】。

下面是我自己寫的一個簡單類和數(shù)據(jù)表結(jié)構(gòu)

class Wxapi{
    protected $appid;
    protected $appsecret;
 
    /**
     * 構(gòu)造函數(shù)
     * 2019-12-10
     */
    public function __construct($appid,$appsecret){
        $this->appid=$appid;
        $this->appsecret=$appsecret;
        $this->sessionKey_url="https://api.weixin.qq.com/sns/jscode2session";
        $this->accessToken_url="https://api.weixin.qq.com/cgi-bin/token";
        $this->jsapi_ticket_url="https://api.weixin.qq.com/cgi-bin/ticket/getticket";
        $this->qrcodeUrl="https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode";
    }
 
    /**
     * 獲取access_token
     * 2019-12-10
     *
     * @param string  appid         appid
     * @param string  appsecret     appsecret
     * @param string  tableName     表名（wx_account）
     * @return string token         token
     */
    public function getToken($appid,$appsecret,$tableName){
        $accountInfo = DB::table($tableName)->where('appid',$appid)->where('appsecret',$appsecret)->first();
        $now_time = time();//當(dāng)前時間戳
        if(empty($accountInfo)){
            return false;
        }
        if($now_time-$accountInfo->access_token_time<7000){
            $token = $accountInfo->access_token;
            return $token;
        }else{
            $get_token_url = $this->accessToken_url."?grant_type=client_credential&appid=".$appid.&#39;&secret=&#39;.$appsecret;
            $getToken_json = curl_get($get_token_url);
            $getToken_arr = json_decode($getToken_json[&#39;output&#39;],true);
            $token = $getToken_arr[&#39;access_token&#39;];
            $arr = [
                &#39;access_token_time&#39;=>time(),
                &#39;access_token&#39;=>$token,
                &#39;updated_at&#39;=>date(&#39;Y-m-d H:i:s&#39;,time())
            ];
            $res = DB::table($tableName)->where(&#39;appid&#39;,$appid)->where(&#39;appsecret&#39;,$appsecret)->update($arr);
            if($res){
                return $token;
            }else{
                return false;
            }
        }
    }
 
    /**
     * 獲取jssdk-ticket
     * 2019-12-10
     *
     * @param string  appid         appid
     * @param string  appsecret     appsecret
     * @param string  tableName     表名（wx_account）
     * @return string token         token
     */
    public function getJssdkTicket($appid,$appsecret,$tableName){
        $accountInfo = DB::table($tableName)->where(&#39;appid&#39;,$appid)->where(&#39;appsecret&#39;,$appsecret)->first();
        if(empty($accountInfo)){
            return false;
        }
        $now_time = time();//當(dāng)前時間戳
        if($now_time-$accountInfo->jsapi_ticket_time<7000){
            $jsapi_ticket = $accountInfo->jsapi_ticket;
            return $jsapi_ticket;
        }else{
            $access_token=$this->getToken($appid,$appsecret,$tableName);
            if(!$access_token){
                return false;
            }
            $get_jsapi_ticket_url = $this->jsapi_ticket_url."?access_token=".$access_token."&type=jsapi";
            $getJssdkTicket_json = curl_get($get_jsapi_ticket_url);
            $getJssdkTicket_arr = json_decode($getJssdkTicket_json[&#39;output&#39;],true);
            $jsapi_ticket = $getJssdkTicket_arr[&#39;ticket&#39;];
            $arr = [
                &#39;jsapi_ticket_time&#39;=>time(),
                &#39;jsapi_ticket&#39;=>$jsapi_ticket,
                &#39;updated_at&#39;=>date(&#39;Y-m-d H:i:s&#39;,time())
            ];
            $res = DB::table($tableName)->where(&#39;appid&#39;,$appid)->where(&#39;appsecret&#39;,$appsecret)->update($arr);
            if($res){
                return $jsapi_ticket;
            }else{
                return false;
            }
        }
    }
}

這邊我們的操作是，我們后端獲取jsapi_ticket返回給前端，然后前端進行權(quán)限驗證。

為了方便調(diào)試，我們可以在微信開發(fā)者工具中進行調(diào)試。下載鏈接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

當(dāng)頁面去調(diào)用微信的JSSDK接口時，成功可以看到對應(yīng)的微信返回數(shù)據(jù)。

如果出現(xiàn)錯誤，請根據(jù)開發(fā)文檔進行修改：

然后在手機上進行分享，測試是否成功；下面是我成功的操作。

朋友圈分享：

微信群組分享：

QQ分享：

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!