微信小程序与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

效果：