微信小程序与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的相互跳转_第1张图片

该跳转方法可以在用户打开 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的相互跳转_第2张图片

你可能感兴趣的:(微信小程序,小程序)