微信小程序与h5的相互跳转场景分析

微信小程序与h5的相互跳转场景整理

一、微信小程序内嵌的h5

• 微信小程序跳转内嵌的h5：

<web-view :src="loadUrl"></web-view>

在微信小程序内编写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-weapp

• URL 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

效果：

到此这篇关于微信小程序与h5的相互跳转场景分析的文章就介绍到这了,更多相关微信小程序与h5跳转内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！