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

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 présente principalement les informations pertinentes de la page WeChat html5 appelant l'exemple d'interface de partage. j'espère que cela peut aider tout le monde.

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 le fichier myApp.run, écrivez une fonction de partage WeChat. Notez que cette fonction doit obtenir et analyser l'URL de la page actuelle, puis l'envoyer au backend pour générer la signature correspondante et télécharger directement le code ; 🎜>

Après avoir analysé l'URL actuelle, envoyez-la à l'interface back-end. Le back-end doit renvoyer l'identifiant de l'application, l'horodatage, la chaîne aléatoire et la signature, et puis ajoutez la liste d'interfaces (jsApiList) manuellement si nécessaire. Notez qu'elle se présente sous la forme d'un tableau, j'en ai seulement besoin ici. Il est nécessaire d'appeler l'interface de partage

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

Lors du débogage, vous pouvez changer debug en true. , de sorte qu'à 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. comme suit ;

wx.ready est automatiquement exécuté après wx.config, j'ai défini Créer un objet général pour partager du contenu, puis l'appeler directement. définissez également différents contenus pour le partage d'amis, de cercles d'amis, de Weibo, etc. en fonction de vos besoins. Veuillez consulter le document de l'interface WeChat pour plus de détails

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

Insistez principalement sur le lien de partage, 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 ;

La performance de 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. le projet est destiné au vote, je dois donc obtenir le code utilisateur à chaque fois que je clique. Si vous partagez simplement un 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, j'ai fait ici un traitement spécial, c'est-à-dire rediriger le lien. Tout le monde sait qu'il existe deux façons pour H5 d'obtenir les informations des utilisateurs de WeChat, l'une consiste à suivre le compte officiel de WeChat ; utilisateur Si vous avez besoin d'obtenir les informations publiques de l'utilisateur, celui-ci 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 :

8. Cette méthode a des inconvénients, ajoutez-en simplement. J'ai créé une page blanche et je n'ai pas encore pensé à un bon moyen. Invitez tout le monde à laisser un message

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

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 déterminer l'utilisateur. Par conséquent, les utilisateurs ne peuvent pas être empêchés de voter

.

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!