Einführung in die Methode zur Einbettung von H5 in kleine Programme

Hinweis:

Das Applet unterstützt keine Cookies. Das eingebettete h5 unterstützt Cookies, aber sie existieren neben WeChat-Webcookies und beeinflussen sich gegenseitig.

Das Miniprogramm unterstützt nur https

Der im Miniprogramm eingebettete Domänenname von H5 muss im WeChat-Backend als vertrauenswürdiger Domänenname festgelegt werden

Verwenden Sie die WeChat SDK-Version 1.4, einige Funktionen von 1.0 sind nicht verfügbar. Unterstützung: https://res.wx.qq.com/open/js/jweixin-1.4.0.js

1. Bestimmen Sie die Miniprogrammumgebung

Die alte Version von WeChat hängt davon ab, ob das Miniprogramm sie unterstützt. Wenn es H5 unterstützt, muss es

wx.miniProgram.getEnv(function(res) {
     if (res.miniprogram) {
         //这里才是小程序环境
         //但是这个方法是异步的请注意
     }

sein oder den Miniprogramm-Entwickler die H5-Seite öffnen lassen und übergeben Sie ein Feld über die URL an H5, um festzustellen, ob es sich bei dem Feld um die Miniprogrammumgebung handelt.

2. Miniprogramm-Freigabe

Miniprogramm-Dokumentation:

Benutzer können beim Teilen die URL der aktuellen Webansicht abrufen, d. h. den Parameter webViewUrl im zurückgeben onShareAppMessage-Rückruf.

In der realen Maschinenpraxis kann die URL jedoch laut Feedback der Miniprogrammentwicklung in einigen Szenarien nicht abgerufen werden, sodass wir die Freigabeinformationen schließlich über die postMessage-Methode weitergeben. Das Beispiel lautet wie folgt:

wx.miniProgram.postMessage({ data:{
      active_shareTit:分享语言,
      active_shareimg:分享图
      active_shareurl: 分享链接
}})

3. Cookies synchronisieren.

Das Miniprogramm übermittelt die erforderlichen Parameter über die URL und setzt sie im Cookie, nachdem es von H5 abgefangen wurde.

4. H5-Sprung-Applet

Href kann nicht zum Springen verwendet werden! Die URL hat die Form „/page/..“ und darf kein http-Protokoll enthalten. Sie müssen die folgenden drei Methoden verwenden:

NavigierenUm zur Miniprogrammseite zu springen und die aktuelle Seite beizubehalten

redirectTo schließt die aktuelle Seite und springt zur Miniprogrammseite (Sie können beim Zurückkehren nicht zur aktuellen Seite zurückkehren)

switchTab springt zur Miniprogramm-Tabbar-Seite (die Seite des Miniprogramms mit untere Navigation, wenn diese Seite „navigationTo“ oder „redirectTo“ verwendet, schlägt fehl)

Demo:

wx.miniProgram.navigateTo({
    url: '/pages/prod/prod?参数1=大大说&参数2=qweqw'
})

5. Sie können Parameter an H5 in src übergeben

 <web-view src="https://mp.weixin.qq.com/qq.html"></web-view>

Empfohlen: "

Mini-Tutorial zur Programmentwicklung

》

Das obige ist der detaillierte Inhalt vonEinführung in die Methode zur Einbettung von H5 in kleine Programme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!