Comment accéder à l'applet WeChat dans la vue h5

Avec le développement rapide de l'Internet mobile, de plus en plus d'entreprises et de particuliers commencent à s'intéresser au développement et à l'utilisation du H5 et des petits programmes. H5 est une méthode de développement d'applications mobiles basée sur la technologie HTML5 et CSS3, qui permet aux pages Web de mieux s'afficher dans les navigateurs des téléphones mobiles ou des tablettes. Le mini-programme WeChat est un formulaire de candidature dans WeChat. Les utilisateurs peuvent utiliser des mini-programmes directement dans WeChat sans téléchargement ni installation.

En développement réel, nous rencontrerons ce problème : Comment transférer des pages H5 vers des mini programmes WeChat ? Aujourd'hui, nous allons discuter de la manière dont Vue H5 passe à l'applet WeChat.

Le framework Vue est un framework frontal populaire qui offre flexibilité et réutilisabilité. Pour implémenter le saut de page H5 vers l'applet WeChat dans Vue, WeChat JS-SDK et la bibliothèque Vue-Router sont requis.

WeChat JS-SDK offre de nombreuses fonctionnalités, telles que le partage, le paiement, le traitement d'images et les applets WeChat. Il peut appeler l'API sous-jacente de WeChat dans les pages Web WeChat et utiliser pleinement l'écosystème WeChat. La bibliothèque Vue-Router fait partie du framework Vue lui-même, qui vous permet de gérer facilement le routage et de rendre votre application Vue plus fluide.

Ensuite, nous mettrons en œuvre les étapes suivantes pour passer de la page H5 à l'applet WeChat :

1. Configurer WeChat JS-SDK

Tout d'abord, nous devons demander l'autorisation JS-SDK depuis la plateforme publique WeChat et obtenez-le appId et appSecret. Introduisez le fichier JS de WeChat JS-SDK dans le projet Vue, comme indiqué ci-dessous :

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

Ensuite, nous devons configurer WeChat JS-SDK. Dans la méthode de cycle de vie créée() créée par Vue, appelez la méthode config() de WeChat JS-SDK et transmettez les paramètres de configuration.

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. Implémenter le saut de route

Afin de pouvoir basculer entre la page H5 et l'applet WeChat, nous devons implémenter le saut de route dans le projet Vue. La bibliothèque Vue-Router fournit des fonctions de contrôle de routage très puissantes, nous permettant d'implémenter facilement des sauts de route. Par exemple, nous pouvons utiliser la méthode push() et la méthode replace() de Vue-Router pour implémenter des sauts de routage.

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

3. L'étape clé pour réaliser le passage de la page H5 à l'applet WeChat

La page H5 à l'applet WeChat est d'appeler la méthode launchMiniProgram() dans le JS-SDK de WeChat. Dans l'assembly Vue, nous pouvons utiliser la méthode $nextTick() de Vue pour garantir que le DOM a été entièrement rendu et réaliser la fonction de passage direct de la page H5 à l'applet WeChat.

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

...

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

4. Pour réaliser le saut de l'applet WeChat à la page H5

L'applet WeChat pour passer à la page H5 doit également effectuer d'abord un saut de routage, puis réaliser le saut via la méthode clé de la méthode openUrlByExtBrowser() de WeChat JS-SDK .

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

De cette façon, cliquez sur le lien de saut dans l'applet WeChat pour accéder à la page Vue H5.

Résumé

Le passage de Vue H5 à l'applet WeChat est une fonction courante. En utilisant des bibliothèques telles que WeChat JS-SDK et Vue-Router, nous pouvons facilement réaliser le saut entre la page H5 et l'applet WeChat. Dans le développement réel, nous devons prêter attention à la configuration du WeChat JS-SDK et à l'utilisation de Vue-Router. En même temps, nous devons considérer la logique de passer à la page H5 dans l'applet WeChat pour obtenir un résultat complet. fonction de saut.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!