微信小程序与h5的相互跳转

2023-11-03 02:03| 来源: 网络整理| 查看: 265

微信小程序与h5的相互跳转场景整理一、微信小程序内嵌的h5 微信小程序跳转内嵌的h5：

在微信小程序内编写webview文件，通过webview去跳转h5，loadUrl为h5的地址

嵌套的h5跳回微信小程序内部 import wx from 'weixin-js-sdk'; wx.miniProgram.navigateTo({ url: "/pages/index/index", });

h5中引入微信jsSdk，通过wx.miniProgram.navigateTo返回至微信小程序内部

二、非嵌套，h5需要跳转打开某个微信小程序

可以通过wx-open-launch-weapp，URL Scheme和URL Link三种方式，每天生成 URL Scheme 和 URL Link 总数量上限为50万

开放标签：wx-open-launch-weapp 参考文档：wx-open-launch-weappURL Scheme 服务端API，该接口用于获取小程序 scheme 码，适用于短信、邮件、外部网页、微信内等拉起小程序的业务场景。目前仅针对国内非个人主体的小程序开放注意事项： 1.微信内的网页如需打开小程序请使用微信开放标签-小程序跳转按钮，无公众号也可以直接使用小程序身份开发网页并免鉴权跳转小程序，见云开发静态网站跳转小程序。符合开放范围的小程序可以下发支持打开小程序的短信 2.该功能基本覆盖当前用户正在使用的微信版本，开发者无需进行低版本兼容 3.只能生成已发布的小程序的 URL Scheme 4.通过 URL Scheme 跳转到微信时，可能会触发系统弹框询问，若用户选择不跳转，则无法打开小程序。请开发者妥善处理用户选择不跳转的场景部分浏览器会限制打开网页直接跳转，可参考示例网页设置跳转按钮

通过后端接口生成的 URL Scheme 如下所示：

weixin://dl/business/?t= *TICKET*

iOS系统支持识别 URL Scheme，可在短信等应用场景中直接通过Scheme跳转小程序。 Android系统不支持直接识别 URL Scheme，用户无法通过 Scheme 正常打开小程序，开发者需要使用 H5 页面中转，再跳转到 Scheme 实现打开小程序，跳转代码示例如下：

location.href = 'weixin://dl/business/?t= *TICKET*'

效果：在这里插入图片描述

该跳转方法可以在用户打开 H5 时立即调用，也可以在用户触发事件后调用。

URL Link 服务端API，获取小程序 URL Link，适用于短信、邮件、网页、微信内等拉起小程序的业务场景。目前仅针对国内非个人主体的小程序开放注意事项： 1.只能生成已发布的小程序的 URL Link。 2.在微信内或者安卓手机打开 URL Link 时，默认会先跳转官方 H5 中间页，如果需要定制 H5 内容，可以使用云开发静态网站。通过后端接口生成的 URL Scheme 如下所示： https://wxaurl.cn/TICKET 或 https://wxmpurl.cn/TICKET

效果：在这里插入图片描述

【本文地址】

公司简介

联系我们