How to jump to WeChat applet in vue h5

With the rapid development of the mobile Internet, more and more companies and individuals have begun to pay attention to the development and use of H5 and small programs. H5 is a mobile application development method based on HTML5 and CSS3 technology, which allows web pages to display better in browsers on mobile phones or tablets. WeChat mini program is an application form within WeChat. Users can use mini programs directly in WeChat without downloading and installing.

In actual development, we will encounter this problem: How to transfer H5 pages to WeChat mini programs? Today we will discuss how Vue H5 jumps to WeChat applet.

The Vue framework is a popular front-end framework that is flexible and reusable. To implement H5 page jump to WeChat applet in Vue, WeChat JS-SDK and Vue-Router library are required.

WeChat JS-SDK provides many capabilities, such as sharing, payment, image processing, and WeChat applets. It can call WeChat's underlying API in WeChat web pages and make full use of the WeChat ecosystem. The Vue-Router library is part of the Vue framework itself, which allows you to easily manage routing and make your Vue application smoother.

Next, we will use the following steps to jump from the H5 page to the WeChat applet:

1. Configure WeChat JS-SDK

First, We need to apply for JS-SDK permissions from the WeChat public platform and obtain the appId and appSecret. Introduce the JS file of WeChat JS-SDK into the Vue project, as shown below:

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

Then, we need to configure WeChat JS-SDK. In the created() life cycle method created by Vue, call the config() method of WeChat JS-SDK and pass in the configuration parameters.

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. Implement route jump

In order to switch between the H5 page and the WeChat applet, we need to implement route jump in the Vue project. The Vue-Router library provides very powerful routing control functions, allowing us to easily implement route jumps. For example, we can use Vue-Router's push() method and replace() method to implement routing jumps.

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

3. Realize the jump from H5 page to WeChat applet

The key step to jump from H5 page to WeChat applet is to call launchMiniProgram in WeChat’s JS-SDK ()method. In the Vue assembly, we can use Vue's $nextTick() method to ensure that the DOM has been fully rendered, and realize the function of jumping directly from the H5 page to the WeChat applet.

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

...

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

4. Realizing the jump from WeChat applet to H5 page

Jumping from WeChat applet to H5 page also requires routing jump first, and then through WeChat JS -The key method of the SDK, the openUrlByExtBrowser() method, implements the jump.

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

In this way, click the jump link in the WeChat applet to jump to the Vue H5 page.

Summary

It is a common function for Vue H5 to jump to WeChat applet. By using libraries such as WeChat JS-SDK and Vue-Router, we can easily implement H5 pages and WeChat Jump between applets. In actual development, we need to pay attention to the configuration of WeChat JS-SDK and the use of Vue-Router. At the same time, we need to consider the logic of jumping to the H5 page in the WeChat applet to achieve a complete jump function.

The above is the detailed content of How to jump to WeChat applet in vue h5. For more information, please follow other related articles on the PHP Chinese website!