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

Cette fois, je vais vous montrer comment appeler l'interface de la page partagée sur la page WeChat h5. Quelles sont les précautions pour appeler l'interface de la page partagée sur la page WeChat h5. jetons un coup d'oeil.

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 ;

2. Écrivez la fonction de partage WeChat dans le fichier myApp.run, faites attention à cette fonction. Vous devez obtenir et analyser l'URL de la page actuelle, puis l'envoyer au backend pour générer la signature correspondante et la télécharger directement. le code ;

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

Après avoir analysé l'URL actuelle, envoyez-la à l'interface backend, et le backend doit ajouter l'appId , l'horodatage, la

// 微信分享函数
    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接口列表
                });
            }
        })
    }

chaîne aléatoire

et la signature sont renvoyés, et puis la liste d'interfaces (jsApiList) est ajoutée manuellement selon les besoins. Notez qu'elle se présente sous la forme d'un tableau. Il me suffit d'appeler l'interface de partage ici lors du débogage, vous pouvez changer debug en true, pour que chaque ; chaque fois que vous appelez l'interface WeChat, l'alerte d'informations sur l'interface apparaîtra, vous permettant ainsi de vérifier si l'appel de l'interface est normal ;
3. Après cette fonction, personnalisez le contenu de partage, le code est le suivant ; 🎜>

wx.ready est automatiquement exécuté après wx.config. Je définis un objet commun pour partager du contenu, puis je l'appelle directement, ou vous pouvez le séparer selon vos besoins pour définir différents contenus à partager avec des amis. , Moments, Weibo, etc., veuillez vous référer au document de l'interface WeChat pour plus de détails

Insistez principalement sur le lien de partage, qui doit être sous le nom de domaine sécurisé JS défini par votre compte officiel, sinon il ne peut pas être partagé Succès

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);
    })

L'échec du partage est que l'image du lien de partage ne peut pas charger votre image personnalisée et que le titre de partage est incorrect

5. Mon projet est soumis à un vote, je dois donc le faire tous les jours ; time Cliquez pour obtenir le code utilisateur. Si vous partagez simplement l'article et n'avez pas besoin d'informations utilisateur, remplacez simplement le lien par le lien de votre article

6. Pour la catégorie de vote, je l'ai spécialement traité ; ici, qui est de se concentrer sur Le lien est dirigé. Tout le monde sait qu'il existe deux façons pour H5 d'obtenir des informations sur les utilisateurs de WeChat. L'une consiste à suivre le compte officiel de WeChat, l'autre invite l'utilisateur à obtenir les informations publiques de l'utilisateur. 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 public

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, accédez à WeChat pour obtenir le. lien de code, http://dev.spbcn .org/wechat-vote-phone/redirect.html Ce lien est une page vierge Le code de la page est le suivant :

8. La méthode a des inconvénients, c'est-à-dire qu'elle ajoute une page vierge supplémentaire. Je n'y ai pas encore pensé. Invitez tout le monde à laisser un message

Si cette étape n'est pas ajoutée, le lien partagé s'affichera. normalement, mais le code ne peut pas être obtenu et le backend ne peut pas juger l'utilisateur, ce qui entraîne l'impossibilité de restreindre le vote des utilisateurs

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"
    }

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour plus d'informations, veuillez prêter attention aux autres articles connexes sur le site Web php chinois !

Lecture recommandée :

h5 implémente plusieurs téléchargements d'aperçus d'images et des contrôles de glissement cliquables

La technologie frontale implémente la superposition de texture de texte

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!