So rufen Sie die Freigabeschnittstelle auf der WeChat-HTML5-Seite auf

Vor kurzem hat das Unternehmen eine H5-Seite zum Abstimmen für Studenten erstellt, die hauptsächlich die WeChat-Freigabefunktion hinzufügen muss. In diesem Artikel werden hauptsächlich die relevanten Informationen zum Beispiel für die WeChat-HTML5-Seitenfreigabe vorgestellt Ich hoffe, es kann allen helfen.

1. Für das im Frontend verwendete Angular1-Framework müssen Sie zunächst die WeChat-Schnittstellendatei auf der Indexseite vorstellen >2. Schreiben Sie in die Datei myApp.run eine WeChat-Freigabefunktion. Beachten Sie, dass diese Funktion die URL der aktuellen Seite abrufen und analysieren muss, sie dann an das Backend senden, um die entsprechende Signatur zu generieren, und den Code direkt hochladen muss 🎜>

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

Nachdem Sie die aktuelle URL analysiert haben, senden Sie sie an die Back-End-Schnittstelle. Das Back-End muss die App-ID, den Zeitstempel, die Zufallszeichenfolge und die Signatur zurückgeben Fügen Sie dann die Schnittstellenliste (jsApiList) nach Bedarf manuell hinzu. Ich benötige sie nur hier. Beim Debuggen können Sie „debug“ auf „true“ ändern , sodass bei jedem Aufruf der WeChat-Schnittstelle die Schnittstelleninformationen angezeigt werden, sodass leicht überprüft werden kann, ob der Schnittstellenaufruf normal ist.

3. Passen Sie den Freigabeinhalt an wie folgt;

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

wx.ready wird automatisch nach wx.config ausgeführt. Ich habe ein allgemeines Objekt zum Teilen von Inhalten definiert und es dann direkt aufgerufen Definieren Sie je nach Bedarf auch unterschiedliche Inhalte zum Teilen von Freunden, Freundeskreisen, Weibo usw. Bitte überprüfen Sie das WeChat-Schnittstellendokument.

Betonen Sie hauptsächlich den Freigabelink. Der Link muss unter dem von JS festgelegten sicheren Domänennamen liegen Ihr offizielles Konto, sonst kann die Freigabe nicht erfolgreich sein.

Die Leistung des Freigabe-Links besteht darin, dass das Freigabe-Link-Bild nicht geladen werden kann und der Freigabetitel falsch ist.

5 Das Projekt dient der Abstimmung, daher muss ich bei jedem Klick den Benutzercode abrufen. Wenn Sie nur einen Artikel teilen und keine Benutzerinformationen benötigen, ändern Sie einfach den Link in Ihren Artikellink. 6. Für die Abstimmungskategorie habe ich hier eine Sonderbehandlung vorgenommen, nämlich die Weiterleitung des Links. Jeder weiß, dass es für H5 zwei Möglichkeiten gibt, WeChat-Benutzerinformationen zu erhalten, die andere darin, dem offiziellen WeChat-Konto zu folgen Benutzer Wenn Sie die öffentlichen Informationen des Benutzers benötigen, kann der Benutzer auf „OK“ klicken. Beides muss jedoch gemäß den Anforderungen von WeChat in einen speziellen WeChat-Link eingebunden werden. Daher ist der Domainname nicht der JS-sichere Domainname unseres eigenen offiziellen Kontos Wenn Sie für den freigegebenen Link weiterhin den Benutzercode benötigen, müssen Sie dazu andere Methoden verwenden. Ich habe eine leere Seite hinzugefügt und nach dem Laden der Seite zu WeChat gesprungen der Code-Link, http://dev.spbcn.org/wechat-vote-phone/redirect.html Dieser Link ist eine leere Seite und der Seitencode lautet wie folgt:

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

8. Diese Methode hat Nachteile, fügen Sie einfach mehr hinzu. Ich habe eine leere Seite erstellt und mir ist noch keine gute Möglichkeit eingefallen, eine Nachricht zu hinterlassen.

9. Wenn Sie diesen Schritt nicht hinzufügen, wird der freigegebene Link normal angezeigt, der Code kann jedoch nicht abgerufen werden und das Backend kann den Benutzer nicht von der Abstimmung abhalten

Das obige ist der detaillierte Inhalt vonSo rufen Sie die Freigabeschnittstelle auf der WeChat-HTML5-Seite auf. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!