0


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

0 说明

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


1 H5跳转到微信小程序

写在前面:以下是跳转到自己的小程序的,如果要跳转到三方公司的小程序,建议由三方公司提供h5,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故在前端调用。

请求地址

POSThttps://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
 */constgetData=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之后,可以让用户通过点击按钮的方式跳转

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

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

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

总之,打开方式十分灵活

1.4 其他说明

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

2 微信小程序跳转到H5

使用

<web-view><web-view/>

即可
具体实现与优化可以参考我的另一篇文章:
【微信小程序】微信小程序跳转H5页面的实现思路与方案


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

3.1 实现方法

使用微信小程序的

navigator

标签,navigator

3.2 代码实现

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

3.3 其他说明

似乎无法实现一进入页面就跳转
因为

wx.navigateTo

方法,似乎并不支持跳转跳转到小程序以外的内容,官方文档中对它的

url

的描述是——

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

故似乎无法实现,还是需要通过上文中的

navigator

来实现。


本文转载自: https://blog.csdn.net/RogerQianpeng/article/details/128236186
版权归原作者 RogerQianpeng 所有, 如有侵权,请联系我们删除。

“【微信小程序】关于H5跳转微信小程序、微信小程序跳转H5、微信小程序跳转微信小程序的实现方法”的评论:

还没有评论