随缘

Appearance

H5 页面跳转小程序的 3 种实现方式 ​

前言 ​

实际开发中，小程序和 H5 往往有很多业务场景需要来回跳转，这里主要介绍 3 种跳转方式供大家参考。

web-view 页面跳转小程序 ​

第一种是 web-view 页面跳转小程序，因为页面就是处在小程序中，所以可以通过 wx.miniProgram 对象的跳转方法，具体跳转的参数跟小程序的方法一致，参考代码如下：

vue
<template>
  <div></div>
</template>

<script>
import wx from "wx";
export default {
  data() {
    return {};
  },
  mounted() {
    wx.miniProgram.redirectTo({
      url: `/pages/login/login`,
    });
  },
};
</script>

wx-open-launch-weapp ​

第二种是页面处在微信网页内， 这种的话需要一个标签：wx-open-launch-weapp, 但是使用这个标签是有要求的

  • 已认证的服务号，服务号绑定“JS 接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序
  • 已认证的非个人主体的小程序，使用小程序云开发的静态网站托管绑定的域名下的网页，可以使用此标签跳转任意合法合规的小程序

详细的说明

相关步骤：

  • 接入 wx-sdk
  • 使用 wx-open-launch-weapp 标签

接入 wx-sdk

具体的接入步骤如下

注意：需要在 wx.config 配置中 openTagList 写入 wx-open-launch-weapp, 否则不显示

使用 wx-open-launch-weapp 标签

相关代码如下：

vue
<script setup>
const getUrl = () => {
  alert(location.href.split('#')[0])
}
const injectPermission  = () => {
  // 通过请求获取到 appId、timestamp、nonceStr、signature
  wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: appId, // 必填，公众号的唯一标识
    timestamp: timestamp, // 必填，生成签名的时间戳
    nonceStr: nonceStr, // 必填，生成签名的随机串
    signature: signature,// 必填，签名
    jsApiList: [] // 必填，需要使用的JS接口列表,
    openTagList: ['wx-open-launch-weapp'] //必写，否则不显示
  })
  wx.ready(function(res){
  // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
  });
  wx.error(function(res){
    alert('config信息验证失败', res)
  // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
}

injectPermission()
</script>

<template>
  <div id="app">
    <wx-open-launch-weapp
      id="launch-btn"
      username="原始ID"
      path="赋值自己的path页面"
    >
      <template>
        <button class="btn">跳转小程序</button>
      </template>
    </wx-open-launch-weapp>
  </div>
</template>

URL Scheme ​

该接口用于获取小程序 scheme 码，适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。通过该接口，可以选择生成到期失效和永久有效的小程序码，有数量限制，目前仅针对国内非个人主体的小程序开放。

官方链接说明

相关步骤：

相关代码如下： 1、通过服务端获取到 openlink

js
{
  "msg": "操作成功",
  "code": 200,
  "data": {
    "url_link": "https://wxaurl.cn/BQZRrcFCPvg"
  }
}

2、跳转小程序 微信内打开跳转的是正式版，微信外可以跳转体验版和开发板，具体通过 env_version 参数设置小程序版本

js
window.location.href = "https://wxaurl.cn/BQZRrcFCPvg";

总结 ​

到此这篇关于 H5 页面跳转小程序的 3 种实现方式的文章就介绍到这了，H5 页面跳转小程序的实现方式， 不同的方法，用不同的方式

  • wx.miniProgram 对象方法跳转 (适用于小程序内嵌的 H5 )
  • wx-open-launch-weapp 标签跳转 (适用于微信网页内 H5)
  • URL Scheme (适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景)

⭐️⭐️⭐️ 好啦！！！本文章到这里就结束啦。⭐️⭐️⭐️

✿✿ ヽ(°▽°)ノ ✿

撒花 🌸🌸🌸🌸🌸🌸

上次更新于: