Bagaimana untuk melompat ke applet WeChat dalam vue h5

Dengan perkembangan pesat Internet mudah alih, semakin banyak syarikat dan individu telah mula memberi perhatian kepada pembangunan dan penggunaan H5 dan program kecil. H5 ialah kaedah pembangunan aplikasi mudah alih berdasarkan teknologi HTML5 dan CSS3, yang membolehkan halaman web dipaparkan dengan lebih baik dalam penyemak imbas pada telefon mudah alih atau tablet. Program mini WeChat ialah borang permohonan dalam WeChat Pengguna boleh menggunakan program mini terus dalam WeChat tanpa memuat turun dan memasang.

Dalam pembangunan sebenar, kita akan menghadapi masalah ini: Bagaimana untuk memindahkan halaman H5 ke program mini WeChat? Hari ini kita akan membincangkan cara Vue H5 melompat ke applet WeChat.

Rangka kerja Vue ialah rangka kerja bahagian hadapan yang popular yang menawarkan fleksibiliti dan kebolehgunaan semula. Untuk melaksanakan lompatan halaman H5 ke applet WeChat dalam Vue, perpustakaan WeChat JS-SDK dan Vue-Router diperlukan.

WeChat JS-SDK menyediakan banyak keupayaan, seperti perkongsian, pembayaran, pemprosesan imej dan applet WeChat. Ia boleh memanggil API asas WeChat dalam halaman web WeChat dan menggunakan sepenuhnya ekosistem WeChat. Pustaka Vue-Router ialah sebahagian daripada rangka kerja Vue itu sendiri, yang membolehkan anda mengurus penghalaan dengan mudah dan menjadikan aplikasi Vue anda lebih lancar.

Seterusnya, kami akan melaksanakan halaman H5 untuk melompat ke applet WeChat melalui langkah berikut:

1. Konfigurasikan WeChat JS-SDK

Pertama, Kami perlu memohon kebenaran JS-SDK daripada platform awam WeChat dan mendapatkan appId dan appSecret. Perkenalkan fail JS WeChat JS-SDK ke dalam projek Vue, seperti yang ditunjukkan di bawah:

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

Kemudian, kita perlu mengkonfigurasi WeChat JS-SDK. Dalam kaedah kitaran hayat yang dicipta() yang dicipta oleh Vue, panggil kaedah config() WeChat JS-SDK dan masukkan parameter konfigurasi.

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. Laksanakan lompatan penghalaan

Untuk dapat bertukar antara halaman H5 dan applet WeChat, kami perlu melaksanakan lompatan penghalaan dalam projek Vue . Pustaka Vue-Router menyediakan fungsi kawalan penghalaan yang sangat berkuasa, membolehkan kami melaksanakan lompatan laluan dengan mudah. Sebagai contoh, kita boleh menggunakan kaedah push() Vue-Router dan kaedah replace() untuk melaksanakan lompatan penghalaan.

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

3. Realisasikan lompatan dari halaman H5 ke applet WeChat

Langkah utama untuk melompat dari halaman H5 ke applet WeChat ialah memanggil WeChat’s JS-SDK launchMiniProgram( ) kaedah. Dalam pemasangan Vue, kami boleh menggunakan kaedah $nextTick() Vue untuk memastikan DOM telah diberikan sepenuhnya dan merealisasikan fungsi melompat terus dari halaman H5 ke applet WeChat.

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

...

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

4. Realisasikan lompatan dari applet WeChat ke halaman H5

Melompat dari applet WeChat ke halaman H5 juga memerlukan lompatan penghalaan dahulu, dan kemudian melalui kaedah utama WeChat JS-SDK, kaedah openUrlByExtBrowser(), melaksanakan lompatan.

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

Dengan cara ini, klik pautan lompat dalam applet WeChat untuk melompat ke halaman Vue H5.

Ringkasan

Ia adalah fungsi biasa untuk Vue H5 untuk melompat ke applet WeChat Dengan menggunakan perpustakaan seperti WeChat JS-SDK dan Vue-Router, kami boleh melaksanakan halaman H5 dan WeChat Jump dengan mudah. antara applet. Dalam pembangunan sebenar, kita perlu memberi perhatian kepada konfigurasi WeChat JS-SDK dan penggunaan Vue-Router Pada masa yang sama, kita perlu mempertimbangkan logik untuk melompat ke halaman H5 dalam applet WeChat untuk mencapai yang lengkap. fungsi lompat.

Atas ialah kandungan terperinci Bagaimana untuk melompat ke applet WeChat dalam vue h5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!