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

In diesem Artikel werden hauptsächlich die relevanten Informationen zum Beispiel einer WeChat-HTML5-Seite zum Teilen von Anrufen vorgestellt. Der Inhalt ist jetzt recht gut und dient als Referenz.

Kürzlich hat das Unternehmen eine H5-Seite zum Abstimmen für Studenten erstellt. Sie wird hauptsächlich auf WeChat verwendet und muss die WeChat-Freigabefunktion hinzufügen.

In diesem Artikel werden hauptsächlich die Angelegenheiten aufgeführt, die erforderlich sind Beachten Sie beim Aufrufen der WeChat-Freigabeschnittstelle ;

1 Für das im Frontend verwendete Angular1-Framework müssen Sie zunächst die WeChat-Schnittstellendatei auf der Indexseite vorstellen >

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

2. Schreiben Sie in myApp.run die WeChat-Freigabefunktion in die Datei. Beachten Sie, dass diese Funktion die URL der aktuellen Seite abrufen und analysieren und dann an senden muss Geben Sie den Code direkt im Backend ein die App-ID, den Zeitstempel, die Zufallszeichenfolge und die Signatur und fügen Sie dann nach Bedarf die Schnittstellenliste (jsApiList) hinzu. Beachten Sie, dass sie hier nur in Form eines Arrays aufgerufen werden muss. Sie können „debug“ auf „true“ ändern, sodass bei jedem Aufruf der WeChat-Schnittstelle die Schnittstelleninformationen angezeigt werden, sodass Sie leicht überprüfen können, ob der Schnittstellenaufruf normal ist.

3 Passen Sie nach dieser Funktion an Beim Teilen von Inhalten lautet der Code 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 definiere ein allgemeines Objekt zum Teilen von Inhalten und dann Rufen Sie es direkt auf. Sie können auch verschiedene Inhalte zum Teilen von Freunden, Momenten, Weibo usw. definieren. Weitere Informationen finden Sie im WeChat-Schnittstellendokument Sicherer Domänenname, der von Ihrem offiziellen Konto festgelegt wurde. Andernfalls ist die Freigabe nicht erfolgreich
5. Mein 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 zu Ihrem Artikel. Verlinken Sie einfach ;

6. Für die Abstimmungskategorie habe ich hier eine Sonderbehandlung vorgenommen, nämlich die Umleitung des Links. Jeder weiß, dass es für H5 zwei Möglichkeiten gibt, WeChat-Benutzerinformationen zu erhalten: Eine davon besteht darin, dem WeChat zu folgen Das andere besteht darin, dem offiziellen WeChat-Konto zu folgen. Das eine fordert den Benutzer auf, die öffentlichen Informationen des Benutzers abzurufen, und der Benutzer kann auf OK klicken. Beides muss jedoch gemäß den WeChat-Anforderungen in einen speziellen WeChat-Link integriert 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, das heißt, es wurde eine zusätzliche leere Seite hinzugefügt, mir ist noch keine gute Möglichkeit eingefallen, jeder kann gerne eine Nachricht hinterlassen

9. Wenn Wenn Sie diesen Schritt nicht hinzufügen, wird der freigegebene Link normal angezeigt, aber der Code kann nicht abgerufen werden und das Backend kann den Benutzer nicht bestimmen, was dazu führt, dass Benutzer nicht an der Abstimmung teilnehmen können.

Das oben Gesagte ist Ich hoffe, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

Wie man HTML5 verwendet, um die Funktion des Teilens für WeChat-Freunde, QQ-Freunde, QQ-Space-Weibo-QR-Code zu realisieren

HTML5, der Implementierungscode zum Hinzufügen eines Symbols auf der rechten Seite des Dropdown-Felds „Auswählen“ (zur Verbesserung der Benutzererfahrung)

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!