Beispiel zum Einbetten von H5 in die Webansicht des WeChat-Applets

Vorwort

WeChat-Miniprogramme bieten neue offene Funktionen! Es ermöglicht endlich die Funktion zum Einbetten von HTML-Seiten in Miniprogramme! Ab der WeChat Mini Program Basic Library 1.6.4 können wir eine <web-view>-Komponente in das Miniprogramm einfügen, um unsere HTML-Seite zu verlinken. Vorher hatten wir keine Möglichkeit, unsere bestehenden HTML-Programme (wie z. B. HTML5-Artikelsystem, Einkaufszentrumsystem usw.) in das Miniprogramm zu integrieren. Wir konnten mithilfe des Miniprogramms nur ein neues Set entwickeln. Mit <web-view> können wir diese Websysteme nun ganz einfach integrieren, was unseren Arbeitsaufwand erheblich reduziert.

Tipps: Persönliche Miniprogramme unterstützen derzeit keine Web-View-Referenzen zu H5. Sie müssen den H5-Domänennamen außerdem im Hintergrund der Miniprogrammverwaltung als Geschäftsdomänennamen konfigurieren.

So geht’s

1. Geben Sie die Seitenadresse direkt ein.

<Web-Ansicht: src="url"></Web-Ansicht>

url ist die umzuleitende Adresse. Sie können encodeURIComponent verwenden, um die URL zu kodieren, und das Miniprogramm verwendet decodeURIComponent, um sie zu dekodieren. Sie können ? und & verwenden, um Parameter in der URL zu übertragen, und das Miniprogramm kann Parameter direkt in der Option in onLoad empfangen;

2. Stellen Sie den oberen Teil des Miniprogramms auf transparent ein.

Die in die Web-Ansicht eingebettete H5-Seite kann nicht auf Transparenz eingestellt werden, und Sie können nur die Farbe der oberen Seite ändern.

• a. Stellen Sie alle Seiten auf transparent ein (fügen Sie navigationStyle:custom zum Fenster in app.json hinzu, die obere Navigationsleiste verschwindet und nur die kapselförmige Schaltfläche in der oberen rechten Ecke bleibt übrig);
• b. Stellen Sie einzelne Seiten auf Transparenz ein (fügen Sie navigationStyle:custom zu jedem einzelnen JSON hinzu);

3. Das Applet springt zur Seite H5

Hinweis: Nachdem Sie „redirectTo“ zum Springen zur H5-Seite verwendet haben, haben alle eingebetteten H5-Seiten keine Zurück-Schaltfläche und es gibt nur eine Zurück-zur-Startseite-Schaltfläche auf der linken Seite.

4. H5 springt zur Miniprogrammseite

Sie müssen <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script> einführen, um Parameter zu verwenden

wx.miniProgram.switchTab({ url:url}); // Zur Tabbar-Seite des Miniprogramms springen, Parameter können nicht übergeben werden

wx.miniProgram.navigateTo({ url:url,query:{//Parameter eingeben}});//Zur Seite des Miniprogramms ohne Tableiste springen, Sie können Parameter übergeben

Weitere Sprünge finden Sie in der Abbildung unten.

5. H5 verwendet Bindmessage, um Parameter an das Miniprogramm zu übergeben

Tipps: Bei Verwendung von Bindmessage kann die Parameterübertragung nur ausgelöst werden, wenn der Benutzer auf die Zurück- oder Teilen-Schaltfläche des Miniprogramms klickt oder die im Miniprogramm eingebettete H5-Seite zerstört wird, andernfalls wird sie nicht ausgelöst.

6. H5 verwendet die Schnittstelle anderer Miniprogramme. Sie können auf die API verweisen. Da ich selbst nicht daran beteiligt bin, gebe ich Ihnen einen Link als Referenz

Referenzlink: developer.weixin.qq.com/miniprogram…

Zusammenfassen

Dies ist das Ende dieses Artikels zum Einbetten des WeChat-Applets webView in H5. Weitere relevante Inhalte zum Einbetten des WeChat-Applets webView in H5 finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!