So springen Sie zum WeChat-Applet in vue h5

Mit der rasanten Entwicklung des mobilen Internets beginnen immer mehr Unternehmen und Einzelpersonen, der Entwicklung und Nutzung von H5 und kleinen Programmen Aufmerksamkeit zu schenken. H5 ist eine Methode zur Entwicklung mobiler Anwendungen, die auf HTML5- und CSS3-Technologie basiert und eine bessere Anzeige von Webseiten in Browsern auf Mobiltelefonen oder Tablets ermöglicht. Das WeChat-Miniprogramm ist ein Anwendungsformular innerhalb von WeChat. Benutzer können Miniprogramme direkt in WeChat verwenden, ohne sie herunterzuladen und zu installieren.

In der tatsächlichen Entwicklung werden wir auf dieses Problem stoßen: Wie übertrage ich H5-Seiten in WeChat-Miniprogramme? Heute besprechen wir, wie Vue H5 zum WeChat-Applet wechselt.

Vue-Framework ist ein beliebtes Front-End-Framework, das Flexibilität und Wiederverwendbarkeit bietet. Um den H5-Seitensprung zum WeChat-Applet in Vue zu implementieren, sind WeChat JS-SDK und die Vue-Router-Bibliothek erforderlich.

WeChat JS-SDK bietet viele Funktionen wie Teilen, Bezahlen, Bildverarbeitung und WeChat-Applets. Es kann die zugrunde liegende API von WeChat in WeChat-Webseiten aufrufen und das WeChat-Ökosystem vollständig nutzen. Die Vue-Router-Bibliothek ist Teil des Vue-Frameworks selbst, mit dem Sie das Routing einfach verwalten und Ihre Vue-Anwendung reibungsloser gestalten können.

Als nächstes werden wir die folgenden Schritte implementieren, um von der H5-Seite zum WeChat-Applet zu springen:

1. WeChat JS-SDK konfigurieren

Zuerst müssen wir die JS-SDK-Berechtigung von der öffentlichen WeChat-Plattform beantragen Holen Sie sich die AppId und das AppSecret. Fügen Sie die JS-Datei von WeChat JS-SDK in das Vue-Projekt ein, wie unten gezeigt:

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>

Dann müssen wir WeChat JS-SDK konfigurieren. Rufen Sie in der von Vue erstellten Lebenszyklusmethode „created()“ die Methode „config()“ des WeChat JS-SDK auf und übergeben Sie die Konfigurationsparameter.

created() {
  wx.config({
    debug: false,
    appId: 'yourAppId',
    timestamp: parseInt(new Date().getTime() / 1000),
    nonceStr: Math.random().toString(36).substr(2),
    signature: '', //根据实际情况填写
    jsApiList: [
      'chooseImage',
      'previewImage',
      'uploadImage',
      'downloadImage',
      'getLocalImgData',
      'getLocation',
      'openLocation',
      'scanQRCode',
      'chooseWXPay',
      'onMenuShareAppMessage',
      'onMenuShareTimeline',
      'updateAppMessageShareData',
      'updateTimelineShareData'
    ],
    success: function (res) {
      //JS-SDK验证成功
    },
    fail: function (res) {
      //JS-SDK验证失败
    }
  })
}

2. Routensprung implementieren

Um zwischen H5-Seiten und WeChat-Applet wechseln zu können, müssen wir Routensprung im Vue-Projekt implementieren. Die Vue-Router-Bibliothek bietet sehr leistungsstarke Routing-Steuerungsfunktionen, mit denen wir Routensprünge einfach implementieren können. Beispielsweise können wir die push()-Methode und die replace()-Methode von Vue-Router verwenden, um Routing-Sprünge zu implementieren.

this.$router.push('/wechat')
this.$router.replace('/wechat')

3. Der wichtigste Schritt, um den Sprung von der H5-Seite zum WeChat-Applet zu realisieren

H5-Seite zum WeChat-Applet ist der Aufruf der Methode launchMiniProgram() im JS-SDK von WeChat. In der Vue-Assembly können wir die Methode $nextTick() von Vue verwenden, um sicherzustellen, dass das DOM vollständig gerendert wurde, und die Funktion realisieren, direkt von der H5-Seite zum WeChat-Applet zu springen.

goToMiniProgram() {
  const that = this
  const path = '/pages/index/index' //小程序的路径
  wx.miniProgram.navigateTo({
    url: path
  })
}

...

this.$nextTick(() => {
  this.goToMiniProgram()
})

4. Um den Sprung vom WeChat-Applet zur H5-Seite zu realisieren

Das WeChat-Applet zum Springen zur H5-Seite muss zunächst auch einen Routing-Sprung durchführen und dann den Sprung über die Schlüsselmethode der openUrlByExtBrowser()-Methode des WeChat JS-SDK realisieren .

goToH5() {
  location.href = 'https://www.yourUrl.com'，//H5页面的地址
}

...

wx.miniProgram.getEnv(function(res) {
  if (res.miniprogram) {
      wx.miniProgram.postMessage({ data: 'h5' })
  } else {
      that.goToH5()
  }
})

...

created() {
  wx.miniProgram.getEnv(function(res) {
    if (res.miniprogram) {
      wx.miniProgram.onMessage(function (res) {
        if (res.data === 'h5') {
          window.history.go(-1)
        }
      })
    }
  })
}

Klicken Sie auf diese Weise auf den Sprunglink im WeChat-Applet, um zur Vue H5-Seite zu springen.

Zusammenfassung

Es ist eine übliche Funktion von Vue H5, zum WeChat-Applet zu springen. Durch die Verwendung von Bibliotheken wie WeChat JS-SDK und Vue-Router können wir den Sprung zwischen H5-Seiten und dem WeChat-Applet problemlos realisieren. Bei der tatsächlichen Entwicklung müssen wir auf die Konfiguration von WeChat JS-SDK und die Verwendung von Vue-Router achten. Gleichzeitig müssen wir die Logik des Springens zur H5-Seite im WeChat-Applet berücksichtigen, um eine vollständige Implementierung zu erreichen Sprungfunktion.

Das obige ist der detaillierte Inhalt vonSo springen Sie zum WeChat-Applet in vue h5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!