Titre personnalisé de la page H5, lien, description, partage d'images avec des amis WeChat, Moments, espace QQ et QQ

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, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过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()函数进行加密】，得到signature。

b.现在来说说怎样获得调用微信调用JS接口的临时票据jsapi_ticke

因为jsapi_ticket的有效期为7200秒，并且需要通过access_token来获取到，所以我们先获取access_token；access_token公众号的一天获取次数有限，2000次，且有效时间为7200秒，所以我们可以考虑每次获取到的access_token放入缓存或者让数据表中，在有效期内反复调用【我是存储到数据表中的】。

下面是我自己写的一个简单类和数据表结构

class Wxapi{
    protected $appid;
    protected $appsecret;
 
    /**
     * 构造函数
     * 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();//当前时间戳
        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();//当前时间戳
        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返回给前端，然后前端进行权限验证。

为了方便调试，我们可以在微信开发者工具中进行调试。下载链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

当页面去调用微信的JSSDK接口时，成功可以看到对应的微信返回数据。

如果出现错误，请根据开发文档进行修改：

然后在手机上进行分享，测试是否成功；下面是我成功的操作。

朋友圈分享：

微信群组分享：

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!