0 说明

业务提出需求，要实现H5跳转微信小程序的需求，在浏览器、微信环境下，都能通过H5跳转进入小程序。
另外，本文也将微信小程序跳转到H5，以及微信小程序跳转到微信小程序的方法进行汇总。
对于，微信公众号跳转微信小程序、微信小程序跳转微信公众号，本文不会涉及。

1 H5跳转到微信小程序

1.1 官方文档

获取 URL Scheme
小程序链接生成与使用规则调整公告
获取 URL Link
静态网站
跳转小程序：wx-open-launch-weapp

1.2 实现思路

微信提供了多种实现到跳转到微信小程序的方法，有些需要云开发、静态网站等等，这里我推荐使用URL Scheme的方式来实现。
URL Scheme，究其本质，是微信提供的一个链接，可以被浏览器识别，并自动跳转打开微信、打开小程序。
生成方式可以参考官方文档：urlscheme.generate

1.3 代码实现

1.3.1 获得URL Scheme

通过请求一个微信提供的api地址，即可获得URL Scheme，注意，在实际项目中该过程应有服务端实现，本文只是为了实现一个demo故在前端调用。

请求地址

POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN

请求参数
access_token，jump_wxa，expire_time，具体请见1.2中的官方文档，注意，access_token应拼接在链接中，expire_time可以传空值。
关于access_token的获得方式本文不再赘述，可以参考官方文档auth.getAccessToken，或者参考我的另一篇文章【微信小程序】获取用户手机号的实现，里面有具体的代码示范。

返回值
errcode，errmsg，openlink
其中，openlink就是我们所需要的URL Scheme

代码实现

// 请求参数
const params = {jump_wxa:{path: "/pages/login/login", //修改此条，即可跳转到指定页面query: ""},expire_type:'',
}
/*** 获取URL Scheme*/
const getData = function(){// 此处API是封装了的axiosAPI({// vue3，vite.config.js做了跨域配置，所以此处为/api开头，实际会转成上文地址url:'/api/wxa/generatescheme?access_token=*********************',method:'post',data: params}).then((res)=>{console.log(res)});
}

1.3.2 跳转微信小程序

官方文档中有说明——

“适用于从短信、邮件、微信外网页等场景打开小程序。”
“iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过 Scheme 跳转小程序。Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序。”
“可以在用户打开 H5 时立即调用，也可以在用户触发事件后调用。”

获得URL Scheme之后，可以让用户通过点击按钮的方式跳转

//跳转小程序
const gotoMini = function(){window.location.href = 'weixin://dl/business/?t=foyhCmtXlPr'
}

也可以直接在打开页面之后，自动跳转

function setup() {onMounted(() => {window.location.href = 'weixin://dl/business/?t=foyhCmtXlPr'})
}setup()

总之，打开方式十分灵活

1.4 其他说明

获得access_token，URL Scheme的请求，在实际项目中都应该由服务端发起
通过微信聊天中发送h5地址再点击的方式，即可测试微信内浏览器环境，经测试，外部浏览器、微信内部浏览器，均可实现h5跳转小程序。
单个小程序，每天生成URL Scheme上限为50万条，每条有效期为30天，一条URL Scheme被某个用户使用之后，就为该用户独有，其他用户不能使用。
建议使用方法请参考小程序链接生成与使用规则调整公告，微信推荐的请求时机是在某用户打开H5时进行请求，并且将获得的URL Scheme保存在服务器，下次该用户再访问时将不再重复请求微信api，直到该条URL Scheme过期，也可以在浏览器缓存中进行保存，从而优化减少请求数量。
只能跳转到已经发布的小程序。

2 微信小程序跳转到H5

使用<web-view><web-view/>即可
具体实现与优化可以参考我的另一篇文章：
【微信小程序】微信小程序跳转H5页面的实现思路与方案

3 微信小程序跳转到微信小程序

3.1 实现方法

使用微信小程序的navigator标签，navigator

3.2 代码实现

<navigator target="miniProgram" app-id="wxc*********" path="" version="release"><button> 小程序跳转</button>
</navigator>

3.3 其他说明

似乎无法实现一进入页面就跳转
因为wx.navigateTo方法，似乎并不支持跳转跳转到小程序以外的内容，官方文档中对它的url的描述是——

需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’

故似乎无法实现，还是需要通过上文中的navigator来实现。

【微信小程序】关于H5跳转微信小程序、微信小程序跳转H5、微信小程序跳转微信小程序的实现方法相关推荐

微信公众号开发详解02【自动回复、发布文章、自定义菜单、3种链接跳转】
[微信公众号--零基础全面系统教学] [P01-P07]微信公众号开发详解01[目的.起名.准备工作.注册流程.后台功能] [P08-P12]微信公众号开发详解02[自动回复.发布文章.自定义菜单 ...
黑马程序员Java零基础视频教程(2022最新Java）B站视频学习笔记-Day15-阶段项目（拼图小游戏）（上篇）
1.主界面分析 1.练习:创建主界面1 到IDEA中创建一个宽603像素,高680像素的游戏主界面到IDEA中创建一个宽488像素,高430像素的登录界面到IDEA中创建一个宽488像素,高500 ...
1.3. 一只大象口渴了，要喝20升水才能解渴，但现在只有一个深h厘米，底面半径为r厘米的小圆桶(h和r都是整数)。问大象至少要喝多少桶水才会解渴。编写程序输入半径和高度，输出需要的桶数（一定是整数）
1.3. 一只大象口渴了,要喝20升水才能解渴,但现在只有一个深h厘米,底面半径为r厘米的小圆桶(h和r都是整数).问大象至少要喝多少桶水才会解渴.编写程序输入半径和高度,输出需要的桶数(一定是 ...
python小明爬楼梯_LintCode Python 简单级题目 111.爬楼梯 (斐波纳契数列青蛙跳)
**设f(n)为n阶台阶的情况下,所有不同的跳法方法的总和!** 1.如果起始跳一阶的话,剩余的n-1阶就有 f(n-1) 种跳法: 2.如果起始跳二阶的话,剩余的n-2阶就有 f(n-2) 种跳法: ...
c++ 跳转到上级目录_Windows漏洞利用开发第4部分：使用跳转定位Shellcode 模块
概观在第2和第3部分中,我们构建并改进了ASX To MP3转换器的一个漏洞利用.尽管它存在缺陷,但就漏洞而言,它非常简单直接-- 直接利用指向我们shellcode的寄存器从而直接跳转到EIP覆盖 ...
c语言中fact函数怎么调用,C语言程序题: 1、编写一个求n!的函数fact(n)，要求fact函数分别用递归和非递归两种方法实现...
点击查看C语言程序题: 1.编写一个求n!的函数fact(n),要求fact函数分别用递归和非递归两种方法实现具体信息答:int fac(int n) //非递归{int f=1; for(;n;) ...
wkwebview加载h5图片不显示_埋点 13 ：App 与 H5 打通
1.原理概述 iOS 混合开发越来越流行,App 与 H5 的打通需求,也越来越迫切! 那什么是 App 与 H5 打通呢? 所谓打通,是指 H5 集成 JavaScript 数据采集 SDK 后,H ...
烟雨黑帽SEO程序演示：AI智能模板在线制作制作神器-单域名版+多域名版-一键批量制作黑帽程序所使用的单页模板
烟雨黑帽SEO程序演示:AI智能模板在线制作制作神器-单域名版+多域名版-一键批量制作黑帽程序所使用的单页模板烟雨黑帽SEO程序演示:AI智能模板制作神器,用于一键制作黑帽程序模板.零基础小白神器, ...
某网友发表如此言论：程序员基本都是diao丝，是农村进城务工人员！有资源有关系的都不干程序员！...
都知道程序员工资高,但同时也要承受996的高强度工作.那么程序员里什么群体比较多呢? 一个程序员发帖说,程序员基本都是diao丝,大多是农村进城务工人员,有资源有关系的人都不干程序员这行. 许多程序员 ...
编写程序，生成一种贯穿10*10字符数组（初始时全为字符'.'）的“随机步法”。程序必须随机地从一个元素“走到”另一个元素，每次都向上、向下、向左或向右移动一个元素位置
编写程序,生成一种贯穿10*10字符数组(初始时全为字符'.')的"随机步法".程序必须随机地从一个元素"走到"另一个元素,每次都向上.向下.向左或向右移动一个 ...

【微信小程序】关于H5跳转微信小程序、微信小程序跳转H5、微信小程序跳转微信小程序的实现方法