Eine kurze Analyse, wie man vom Applet zur H5-Seite springt? (Beispielanalyse)

Wie springe ich vom Applet zur H5-Seite? Der folgende Artikel stellt Ihnen das WeChat-Applet vor, wie Sie zur H5-Seite springen können. Ich hoffe, er wird Ihnen hilfreich sein!

WeChat Mini-Programm: Obwohl die Entwicklungsmethode einer Webseite ähnelt, handelt es sich tatsächlich um eine spezielle Webseite, die nur in dem von WeChat selbst entwickelten Browser ausgeführt werden kann bereitgestellt von WeChat Browser:

H5-Seite: Dies ist eine echte Webanwendung, die in einem allgemeinen Browser ausgeführt wird. Obwohl verschiedene Browser geringfügige Unterschiede aufweisen, handelt es sich im Allgemeinen auch um einen Allzweckbrowser kann echte Webanwendungen unterstützen.

Deshalb ist es für uns möglich, zwischen dem WeChat-Applet und der H5-Seite zu springen, aber dieser Sprung wird streng vom WeChat-Browser kontrolliert, daher ist es notwendig, dass wir verstehen, was diese Kontrollen beinhalten.

Domänenname der H5-Seite: Angenommen, die URL der H5-Seite, die Sie übertragen müssen, lautet https://www.mysite.com/h5page, dann lautet der hier erwähnte Domänenname www.mysite.com, und Sie haben das richtig gelesen, diese URL muss https sein. Wenn Sie Ihrer Website kein SSL hinzugefügt haben, beantragen Sie zuerst ein Zertifikat (beachten Sie, dass dies der Fall sein muss). öffentlich sein Das angewendete Zertifikat kann nicht selbstsigniert werden, WeChat erkennt es nicht )

https://www.mysite.com/h5page，那么这里所说的域名就是www.mysite.com，另外你没有看错，这个URL必须是https，如果你还没有为你的网站加上SSL，那么就先去申请一个证书吧（注意必须是公开申请的证书，不能是自签名的，微信不认哦！）

好了，这些都准备好了，让我们开始开发一个小例子。

由于web-view组件是一个全屏组件，不能和其它小程序组件合用，因此需要独立占据一个页面，所以我们到例子就是在小程序的A页面加一个链接，跳转到B页面，然后在B页面使用web-view组件来加载H5页面。

A页面

<view class="answerer flex-wrp" bindtap=&#39;jumpToH5&#39;>
        <view class="avatar flex-item">
            <image src="/images/logo-small.jpg"></image>
        </view>
        <view class="answerer-info flex-item">
            <text class="answerer-name">文章标题</text>
            <text class="answerer-des">文章摘要</text>
        </view>
        <view class="follow flex-item">
            <text>十 关注</text>
        </view>
</view>

jumpToH5: function () {
    wx.navigateTo({
      url: '/pages/B'
    })
  },

B页面

<web-view src="{{link}}" bindmessage="getMessage"></web-view>

  data: {
    link: "https://www.mysite.com/h5page"
  },

这时候当你满怀希望的点击链接时，会出现第一个坎：未绑定网页开发者

这是什么鬼，原来使用web-view组件并不是啥人上来就允许使用的，这时候需要第一个授权，就是授权开发者使用该组件。这里比较扯淡的是虽然这个组件是小程序使用的，但并不能在小程序开发号里面设置，而必须在订阅号或者服务号中进行设置，网络上经常能够查到的下面这个截图只能登录订阅号或者服务号才能看到。

在这里设置绑定了开发者的微信号以后，我们终于可以使用web-view组件了，不过这时候又出了新问题： 不支持打开非业务域名

原来并不是什么网址拿来就可以设置跳转的，你的小程序中就不能直接跳转到百度上去，小程序能够跳转的域名必须在业务域名中进行注册，总算这次是在小程序开发号里面设置了，但注意在服务号的设置里也有业务域名这个设置，不要搞混了（话说微信起名也太没有想象力了，简直是一坨浆糊）。

设置好了这个业务域名，满心欢喜地打开小程序，点击链接，What！又来，这次的问题变成了：redirect_uri参数错误

这时候控制权已经从小程序转移到了H5页面，但微信页面跳转内部的机制比较复杂，涉及到了OAuth认证之类的，所以这个错误已经是H5页面报的了，这就需要到H5页面关联的服务号中去进行设置，这次设置的项目叫做网页授权域名Okay, das ist alles fertig, beginnen wir mit der Entwicklung eines kleinen Beispiels.

Da die web-view-Komponente eine Vollbildkomponente ist und nicht mit anderen Miniprogrammkomponenten verwendet werden kann, muss sie eine separate Seite belegen. In unserem Beispiel fügen wir also einen Link zur Seite hinzu A des Miniprogramms und springen Sie zu „Gehe zu Seite B“ und verwenden Sie dann die web-view-Komponente auf Seite B, um die H5-Seite zu laden.

Eine Seite

rrreeerrreee

B-Seite

rrreeerrreeeWenn Sie zu diesem Zeitpunkt voller Hoffnung auf den Link klicken, erscheint die erste Hürde: Ungebundener Webentwickler

Was zum Teufel ist das? Ich habe web verwendet Die Komponente -view darf nicht von jedem verwendet werden. Zu diesem Zeitpunkt ist die erste Autorisierung erforderlich, die darin besteht, den Entwickler zur Verwendung der Komponente zu autorisieren. Was hier noch lächerlicher ist, ist, dass diese Komponente zwar vom Miniprogramm verwendet wird, aber nicht im Miniprogramm-Entwicklungskonto festgelegt werden kann, sondern im Abonnementkonto oder Dienstkonto festgelegt werden muss code>, der Screenshot unten, der oft im Internet zu finden ist, kann nur angezeigt werden, wenn man sich bei <code>Abonnementkonto oder Dienstkonto anmeldet.

at Nachdem wir die WeChat-ID des Entwicklers hier gebunden haben, können wir endlich die web-view-Komponente verwenden, aber jetzt tritt ein neues Problem auf: Das Öffnen von Nicht-Geschäftsdomänennamen wird nicht unterstützt

Es stellt sich heraus, dass es sich nicht um eine URL handelt. Sie können einen Sprung einrichten. Der Domainname, zu dem das Miniprogramm springen kann, muss in Business Domain Name registriert sein Es wird im Entwicklungskonto festgelegt, aber bitte beachten Sie, dass es in den Einstellungen des Dienstkontos auch eine Einstellung für den Geschäftsdomänennamen gibt. Lassen Sie sich nicht verwirren (die Benennung von WeChat ist zu einfallslos, es ist nur ein Durcheinander). 🎜🎜Nachdem ich diesen Business-Domainnamen eingerichtet hatte, öffnete ich freudig das Miniprogramm, klickte auf den Link und was! Auch dieses Mal wurde das Problem wie folgt: „redirect_uri-Parameterfehler“ ="Eine kurze Analyse, wie man vom Applet zur H5-Seite springt? (Beispielanalyse)"/>🎜🎜Zu diesem Zeitpunkt wurde die Steuerung vom Applet auf die H5-Seite übertragen, aber der interne Mechanismus des WeChat-Seitensprungs ist komplizierter und umfasst OAuth-Authentifizierung und dergleichen, daher liegt dieser Fehler vor bereits H5 Die Seite wurde gemeldet, daher müssen Sie sie im Dienstkonto einrichten, das mit der H5-Seite verknüpft ist. Das diesmal festgelegte Element heißt Webpage Authorised Domain Name Dies ist eine Funktion, die im offiziellen Konto festgelegt wurde. Nachdem Sie den Domainnamen hinzugefügt haben, der in den Einstellungen umgeleitet werden muss 🎜🎜🎜🎜🎜, können Sie endlich sehen, dass die H5-Seite im Debugger angezeigt wird! 🎜🎜Lassen Sie uns abschließend die Unterschiede zwischen den drei Kontotypen auf der öffentlichen WeChat-Plattform bekannt machen. 🎜🎜🎜🎜Dienstkonto: Unterstützt die meisten Webentwicklungsschnittstellen und JS-Entwicklungsschnittstellen und ist das am häufigsten verwendete Anwendungsentwicklungskonto. 🎜🎜Abonnement Konto🎜: Wird zum Posten von Artikeln verwendet, es gibt relativ wenige Entwicklungsschnittstellen und viele Funktionen werden nicht unterstützt. Es ist das dümmste Konto für die Veröffentlichung von Artikeln. 🎜🎜Miniprogramm: Ein exklusives Entwicklungskonto für Miniprogrammanwendungen von Miniprogrammen gibt es viele Einstellungen, die in den ersten beiden Gehe zu Einstellungen im Kontotyp eingegeben werden müssen. 🎜🎜🎜【Verwandte Lernempfehlungen: 🎜Mini-Tutorial zur Programmentwicklung🎜】🎜

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie man vom Applet zur H5-Seite springt? (Beispielanalyse). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!