Mise en place du partage secondaire de pages HTML5

Cet article présente principalement les informations pertinentes sur la mise en œuvre du partage secondaire des pages HTML5. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Le partage secondaire est très important pour les pages H5. Après tout, QQ ou WeChat utilise habituellement sa propre fonction de partage après son envoi. Contrairement au côté PC, le PC copie directement l’adresse. Je faisais des invitations il y a deux jours et j'ai rencontré beaucoup d'erreurs. Le développement personnel et le développement de l'entreprise sont encore différents. Divers problèmes et autres problèmes doivent être mentionnés dans le post-scriptum d'une invitation. Passons aux choses sérieuses.

Partage secondaire WeChat

La documentation de WeChat est plutôt bonne. Si vous lisez l'article en entier, vous pouvez en gros éviter beaucoup d'écueils (rappelez-vous que les documents WeChat sont utilisés pour écrire certains écueils à la fin au lieu de les rassembler)

Tout d'abord, commençons par expliquez comment le faire sur WeChat Partage secondaire

adresse du document en introduisant l'API officielle. Le document est bien rédigé, il suffit de le transmettre en shareInfo.

<script src="//res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: sign.appid, // 必填，公众号的唯一标识
    timestamp: sign.timestamp, // 必填，生成签名的时间戳
    nonceStr: sign.nonceStr, // 必填，生成签名的随机串
    signature: sign.signature, // 必填，签名，见附录1
    jsApiList: [
            &#39;onMenuShareTimeline&#39;,
            &#39;onMenuShareAppMessage&#39;,
            &#39;onMenuShareQQ&#39;,
            &#39;onMenuShareWeibo&#39;,
            &#39;onMenuShareQZone&#39;
        ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function() {
    wx.showOptionMenu();
    wx.onMenuShareAppMessage(shareInfo); //获取“分享给朋友”按钮点击状态及自定义分享内容接口（即将废弃）
    wx.onMenuShareTimeline(shareInfo); //获取“分享到朋友圈”按钮点击状态及自定义分享内容接口（即将废弃）
    wx.onMenuShareQQ(shareInfo); //获取“分享到QQ”按钮点击状态及自定义分享内容接口
    wx.onMenuShareWeibo(shareInfo); //获取“分享到腾讯微博”按钮点击状态及自定义分享内容接口
    wx.onMenuShareQZone(shareInfo); //获取“分享到QQ空间”按钮点击状态及自定义分享内容接口
});

Y a-t-il des pièges dans le partage secondaire sur WeChat ?

Hein ? Je l'ai bien écrit, pourquoi ça ne marche pas ? Il n’y a aucune exigence écrite dans le document ?

Vérifiez d'abord la plate-forme publique WeChat - Développement - Autorisations d'interface et constatez que ceux qui n'ont pas d'autorisations sont informés qu'ils n'ont pas été obtenus. Ensuite, optez pour l'authentification WeChat qui indique que je l'ai obtenue. Qu'est-ce qui a été dit ci-dessus ? La documentation de WeChat peut être consultée plus tard et contient généralement des instructions. C'est la phrase ci-dessous, alors le problème se pose, le compte personnel ne peut pas être authentifié.

Ne peut pas être partagé sur iOS et Android (veuillez confirmer que le compte officiel a été authentifié. Seuls les comptes officiels certifiés ont l'autorisation de partager les interfaces associées. S'il est effectivement authentifié, vérifiez si l'interface d'écoute est dans le Fonction de rappel wx.ready Déclenchée au milieu)

À propos du tri des erreurs d'ajustement de l'API

• invalid url domain, mon problème est que le nom de domaine sécurisé js n'est pas résolu

• invalid url signature, mon problème est que jsapi_ticket n'a pas été mis à jour

• Interface WeChat JS outil de vérification de signature

Parlons du document pour le deuxième partage QQ

Le document qui circule sur Internet, de quelle API s'agit-il, je j'ai essayé, mais ça ne marche pas. Entrez via l'adresse, et la maintenance finale est de 15 ans ou quelque chose comme ça.

Comment mettre en place le partage secondaire

La méthode la plus scientifique consiste à utiliser des balises méta.

<meta itemprop="name" content="标题" />
<meta itemprop="image" content="副标题" />
<meta name="description" itemprop="description" content="分享图" />

Y a-t-il quelque chose auquel vous devez faire attention ?

Cette balise méta ne peut pas être ajoutée plus tard, elle doit être là lors de l'entrée dans la page, ce qui signifie que vous ne pouvez utiliser que l'arrière-plan. modèle. Sinon, certaines Android versions inférieures ne peuvent pas extraire le résumé (oui, certains téléphones mobiles peuvent l'obtenir dynamiquement), et iOS n'est pas pris en charge.

En fait, les articles techniques sont sensibles au facteur temps

Cet article a été rédigé le 30 juillet 2018

Testé le 30 juillet 2018

Résumé : Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de didacticiels connexes, veuillez visiter le Tutoriel vidéo HTML5 !

Recommandations associées :

Tutoriel vidéo de formation sur le bien-être public php

Tutoriel graphique HTML5

Manuel HTML5 en ligne

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!