vue h5 で WeChat アプレットにジャンプする方法

モバイル インターネットの急速な発展に伴い、ますます多くの企業や個人が H5 および小規模プログラムの開発と使用に注目し始めています。 H5 は、HTML5 および CSS3 テクノロジに基づいたモバイル アプリケーション開発手法であり、携帯電話やタブレットのブラウザで Web ページをより適切に表示できるようにします。 WeChat ミニ プログラムは WeChat 内のアプリケーション フォームであり、ユーザーはダウンロードやインストールを行うことなく、WeChat 内で直接ミニ プログラムを使用できます。

実際の開発では、次の問題に遭遇します: H5 ページを WeChat ミニ プログラムに転送するにはどうすればよいですか?今日は、Vue H5 がどのように WeChat アプレットにジャンプするかについて説明します。

Vue フレームワークは、柔軟性と再利用性に優れた人気のあるフロントエンド フレームワークです。 Vue で WeChat アプレットへの H5 ページ ジャンプを実装するには、WeChat JS-SDK と Vue-Router ライブラリが必要です。

WeChat JS-SDK は、共有、支払い、画像処理、WeChat アプレットなどの多くの機能を提供します。 WeChat Web ページで WeChat の基盤となる API を呼び出し、WeChat エコシステムを最大限に活用できます。 Vue-Router ライブラリは Vue フレームワーク自体の一部であり、ルーティングを簡単に管理し、Vue アプリケーションをよりスムーズにすることができます。

次に、次の手順を使用して、H5 ページから WeChat アプレットにジャンプします。

1. WeChat JS-SDK を構成します

まず、 WeChat パブリック プラットフォームから JS-SDK 権限を申請し、appId と appSecret を取得する必要があります。以下に示すように、WeChat JS-SDK の JS ファイルを Vue プロジェクトに導入します。

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

次に、WeChat JS-SDK を構成する必要があります。 Vue によって作成された created() ライフサイクル メソッドで、WeChat JS-SDK の config() メソッドを呼び出し、構成パラメーターを渡します。

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. ルート ジャンプの実装

H5 ページと WeChat アプレット間を切り替えるには、Vue プロジェクトにルート ジャンプを実装する必要があります。 Vue-Router ライブラリは非常に強力なルーティング制御機能を提供し、ルート ジャンプを簡単に実装できます。たとえば、Vue-Router の Push() メソッドと replace() メソッドを使用して、ルーティング ジャンプを実装できます。

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

3. H5 ページから WeChat アプレットへのジャンプを実現する

H5 ページから WeChat アプレットにジャンプする重要な手順は、WeChat の JS-SDK で launchMiniProgram を呼び出すことです ()方法。 Vue アセンブリでは、Vue の $nextTick() メソッドを使用して、DOM が完全にレンダリングされたことを確認し、H5 ページから WeChat アプレットに直接ジャンプする機能を実現できます。

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

...

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

4. WeChat アプレットから H5 ページへのジャンプの実現

WeChat アプレットから H5 ページへのジャンプにも、最初にルーティング ジャンプが必要で、次に WeChat JS を経由する必要があります - 重要なメソッドSDK の openUrlByExtBrowser() メソッドがジャンプを実装します。

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

このようにして、WeChat アプレットのジャンプ リンクをクリックして、Vue H5 ページにジャンプします。

まとめ

WeChat アプレットにジャンプするのは Vue H5 の共通機能ですが、WeChat JS-SDK や Vue-Router などのライブラリを利用することで、H5 ページと WeChat Jump を簡単に実装できます。アプレット間。実際の開発では、WeChat JS-SDK の構成と Vue-Router の利用に注意する必要がありますが、同時に WeChat アプレット内の H5 ページにジャンプするロジックを考慮して完全な開発を実現する必要があります。ジャンプ機能。

以上がvue h5 で WeChat アプレットにジャンプする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。