Comment appeler l'interface de partage sur la page WeChat html5

Cet article présente principalement les informations pertinentes sur l'exemple d'interface de partage d'appels de page HTML5 WeChat. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Récemment, l'entreprise a créé une page H5 permettant aux étudiants de voter. Elle est principalement utilisée sur WeChat et doit ajouter la fonction de partage WeChat

Cet article enregistre principalement les questions qui doivent l'être ; prêté attention lors de l'appel de l'interface de partage WeChat ;

1 Pour le framework angulaire1 utilisé dans le front-end, vous devez d'abord introduire le fichier d'interface WeChat sur la page d'index ;

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

2. Dans myApp Écrivez la fonction de partage WeChat dans le fichier .run Notez que cette fonction doit obtenir et analyser l'URL de la page actuelle, puis l'envoyer à. le backend pour générer la signature correspondante et télécharger directement le code

// 微信分享函数
    function wxShare() {
        var url = $location.absUrl().split('#')[0];
            wxServices.postWxShare(url).then(function (res) {
            if (res.data.code == 0) {
                var respanse = res.data.data;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: respanse.appId,
                    timestamp: respanse.timestamp, // 必填，生成签名的时间戳
                    nonceStr: respanse.nonceStr, // 必填，生成签名的随机串
                    signature: respanse.signature,// 必填，签名
                    jsApiList: ['onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone']// 必填，需要使用的JS接口列表
                });
            }
        })
    }

Après avoir analysé l'URL actuelle, envoyez-la à l'interface backend ; doit renvoyer l'appId, l'horodatage, la chaîne aléatoire et la signature, puis ajouter manuellement la liste d'interfaces (jsApiList) si nécessaire. Notez qu'il s'agit d'une liste d'interfaces sous la forme d'un tableau, il me suffit d'appeler l'interface de partage ici Lors du débogage, vous pouvez définir debug sur true, de sorte que chaque fois que l'interface WeChat est appelée, les informations de l'interface soient alertées, ce qui permet de vérifier facilement si l'appel de l'interface est normal

3. cette fonction, personnalisez le contenu de partage, le code est le suivant

wx.ready(function () {
        var obj = {
            title: 'SPBCN团体赛开始投票啦！', // 分享标题
            desc: 'SPBCN团体赛开始投票了，快来为我们加油吧！', // 分享描述
            link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            // 该链接是重定向链接，因为需要获取用户code，但是该链接又无法直接写微信获取code的链接，
            // 所以需要点击后重新加载新的页面，来实现重定向，重新打开获取code的微信链接，实现获取用户信息的功能；
            imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // 分享图标
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        };
        // 2.1 监听“分享给朋友”，按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareAppMessage(obj);

        // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareTimeline(obj);

        // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareQQ(obj);

        // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareWeibo(obj);

        // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
        wx.onMenuShareQZone(obj);
    })

wx.ready est dans wx .config s'exécute automatiquement. objet pour partager du contenu, puis l'appeler directement. Vous pouvez également définir différents contenus pour partager des amis, des Moments, Weibo, etc. pour plus de détails, consultez le document de l'interface WeChat

Mettez principalement l'accent sur le partage. lien. Le lien doit être sous le nom de domaine sécurisé JS défini par votre compte officiel, sinon le partage ne peut pas réussir

L'échec du partage est que l'image du lien de partage ne peut pas être chargée pour vous. Images personnalisées et partagées ; les titres sont également faux ;

5. Mon projet est destiné au vote, je dois donc obtenir le code d'utilisateur à chaque fois que je clique. Si vous partagez simplement un article et n'avez pas besoin d'informations sur l'utilisateur, mettez-le simplement. directement Changez simplement le lien vers le lien de votre article ;

6. Pour la catégorie de vote, je l'ai traité spécialement, c'est-à-dire la redirection du lien. Tout le monde sait qu'il existe deux façons pour H5 d'obtenir l'utilisateur WeChat. informations, l'un est Suivez le compte public WeChat ; un autre invite l'utilisateur à obtenir les informations publiques de l'utilisateur, et l'utilisateur peut cliquer sur OK. Cependant, les deux doivent être fusionnés dans un lien WeChat spécial conformément aux exigences de WeChat. Par conséquent, le nom de domaine est fourni avec WeChat et n'est pas le nom de domaine sécurisé JS de notre propre compte officiel

7 ; Par conséquent, pour le lien partagé, si vous avez encore besoin d'obtenir le code utilisateur, vous devez utiliser d'autres méthodes pour y parvenir. Ce que j'ai utilisé, c'est d'ajouter une page vierge, et une fois la page chargée, passez à WeChat pour l'obtenir. le lien de code, http://dev.spbcn .org/wechat-vote-phone/redirect.html Ce lien est une page vierge, et le code de la page est le suivant :

window.onload = function () {
        // 重定向链接，跟微信公众号中获取用户code是一样的链接
        window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号appid&redirect_uri=http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect"
    }

8. Cette méthode a des inconvénients, ajoutez simplement une page vierge supplémentaire, je n'ai pas encore pensé à un bon moyen, tout le monde est invité à laisser un message

9. Si vous n'ajoutez pas cette étape, le lien partagé s'affichera normalement, mais le code ne pourra pas être obtenu et le backend ne pourra pas juger les utilisateurs, ce qui rend impossible l'interdiction de voter pour les utilisateurs

Ce qui précède est l'intégralité du contenu ; de cet article. J'espère qu'il sera utile à l'apprentissage de tout le monde. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Comment utiliser HTML5 pour réaliser la fonction de partage avec les amis WeChat, les amis QQ, le code QR Weibo de l'espace QQ

HTML5, le code d'implémentation pour ajouter une icône sur le côté droit de la liste déroulante Sélectionner (pour améliorer l'expérience utilisateur)

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!