So rufen Sie die Schnittstelle der Freigabeseite auf der WeChat h5-Seite auf

Dieses Mal zeige ich Ihnen, wie Sie die Schnittstelle für gemeinsam genutzte Seiten auf der WeChat-h5-Seite aufrufen , lass uns einen Blick darauf werfen. 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 >

2. Schreiben Sie die WeChat-Freigabefunktion in die Datei myApp.run. Beachten Sie diese Funktion. Sie müssen die URL der aktuellen Seite abrufen und analysieren und sie dann direkt an das Backend senden, um die entsprechende Signatur zu generieren Laden Sie den Code hoch.

<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 Backend-Schnittstelle. Das Backend muss die App-ID, den Zeitstempel, die zufällige

Zeichenfolge

und die Signatur hinzufügen. und dann wird die Schnittstellenliste (jsApiList) nach Bedarf manuell hinzugefügt. Ich muss hier nur die Freigabeschnittstelle aufrufen Bei jedem Aufruf der WeChat-Schnittstelle wird eine Schnittstelleninformationswarnung ausgegeben, sodass Sie überprüfen können, ob der Schnittstellenaufruf normal ist.

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

3 Passen Sie nach dieser Funktion den Freigabeinhalt an. Der Code lautet wie folgt.
wx.ready wird automatisch nach wx.config ausgeführt. Ich definiere ein gemeinsames Objekt zum Teilen von Inhalten und rufe es dann direkt auf, oder Sie können es nach Bedarf trennen, um verschiedene Inhalte für das Teilen zu definieren Weitere Informationen zu Freunden, Momenten, Weibo usw. finden Sie im WeChat-Schnittstellendokument.

Betonen Sie hauptsächlich den Freigabelink, der unter dem von Ihrem offiziellen Konto festgelegten JS-Sicherheitsdomänennamen liegen muss, da er sonst nicht geteilt werden kann.

Der Fehler beim Teilen besteht darin, dass das freigegebene Linkbild Ihr benutzerdefiniertes Bild nicht laden kann und der Freigabetitel falsch ist.

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

5 Bei meinem Projekt handelt es sich um ein Abstimmungsprojekt, daher muss es durchgeführt werden Holen Sie sich jedes Mal den Benutzercode, nachdem Sie hineingeklickt haben. Wenn Sie den Artikel nur teilen und keine Benutzerinformationen benötigen, ändern Sie einfach den Link zu Ihrem Artikellink

6. Auf die Abstimmungskategorie habe ich mich speziell eingelassen Hier ist es wichtig, sich auf diesen Link zu konzentrieren. Jeder weiß, dass es für H5 zwei Möglichkeiten gibt, WeChat-Benutzerinformationen zu erhalten. Die andere besteht darin, dem offiziellen WeChat-Konto zu folgen Der Benutzer kann 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. Der Code der Seite lautet wie folgt:

8. Diese Methode hat Nachteile, das heißt, ich habe noch nicht daran gedacht, eine Nachricht zu hinterlassen.

9 Wird normal angezeigt, aber der Code kann nicht abgerufen werden und das Backend kann den Benutzer nicht beurteilen, was dazu führt, dass die Benutzerabstimmung nicht eingeschränkt werden kann. Ich glaube, Sie haben die Methode beherrscht, nachdem Sie den Fall in diesem Artikel gelesen haben Spannende Informationen, bitte beachten Sie andere verwandte Artikel auf der chinesischen PHP-Website!

Empfohlene Lektüre:

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

h5 implementiert mehrere Bildvorschau-Uploads und anklickbare Drag-Steuerelemente

Front-End-Technologie implementiert Texttextur-Overlay

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