1. 当前位置:首页>百科>H5页面跳转到微信小程序的几种实现方法

H5页面跳转到微信小程序的几种实现方法

第一种:通过 URL Scheme

可以通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme


使用示例

服务端配置好接口,客户端调用接口传入目标小程序的path路径


location.href=‘接口返回的openlink’

location.href=‘接口返回的openlink’

第二种:在自定义H5页面嵌入微信标签

这种适用于运行在微信环境的自定义H5页面,将跳转按钮融合在自研H5应用,点击按钮后跳转指定小程序页面并且需要 js-sdk-1.6.0 以上才支持


安装 js-sdk(最好是指定1.6.0版本)

npm install weixin-js-sdk@1.6.0

1.安装 js-sdk(最好是指定1.6.0版本)

2.npm install weixin-js-sdk@1.6.0

在wx.config中增加openTagList(开放标签列表),通常会在App文件中配置好

wx.config({

  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印

  appId: '', // 必填,公众号的唯一标识

  timestamp: , // 必填,生成签名的时间戳

  nonceStr: '', // 必填,生成签名的随机串

  signature: '',// 必填,签名

  jsApiList: [], // 必填,需要使用的JS接口列表

  openTagList: ["wx-open-launch-weapp"] // 可选,需要使用的开放标签列表,例如['wx-open-launch-app']

});


openTagList(开放标签列表)目前支持配置


wx-open-launch-weapp - 指H5跳转小程序

wx-open-launch-app - 指H5跳转app

wx-open-subscribe - 服务号订阅通知按钮

wx-open-audio - 音频播放

使用示例,详细可参考微信官方文档。

<div class="module-wrap">

    <wx-open-launch-weapp

      username="gh_xxxxxxxx"

      path="pages/home/index?user=123&action=abc"

    >

      <script type="text/wxtag-template">

        <style>.btn { padding: 12px }</style>

        <button class="btn">打开小程序</button>

      </script>

    </wx-open-launch-weapp>

</div>


username:必须是跳转目标小程序的原始id,gh_开头;

path:跳转小程序的页面路径;


注意要点

使用该功能必须是非个人主体认证的小程序。

只能跳已发布的【正式版】小程序,不能跳【体验版】或【开发版】。

path 属性,官方文档一般是 pages/home/index?user=123&action=abc 这种示例,但实际使用可能会报页面不存在,需要在所声明的页面路径后添加 .html 后缀,如 pages/home/index.html。


第三种:直接用微信的短链(URL Link)

这种一般适用于不需要额外开发H5页面,直接生成链接,用户通过打开链接即可跳转指定的小程序页面。


开链接后,会有微信默认的H5中转页(想要自定义H5中转页也是可以的),目前的版本已经支持默认自动跳转小程序,不需要用户确认,这点很不错。


获取 URL Link 的方式

通过服务端接口可以获取打开小程序任意页面的 URL Link


注意

调微信生成 URL Link 的接口中,参数 path 只认正式版,虽然有 env_version 这个环境变量,然而并没有用(也就是说设定的 path 必须是正式版已经存在的,否则会报:invalid weapp pagepath )。

生成的 URL Link,也就是https://wxaurl.cn/pFawq35qbfd

这种短链在微信环境中打开只会跳【正式版】,即使你的 env_version 设定了【体验版】或【开发版】,需要在外部浏览器打开才能跳转指定的版本。


本文采摘于网络,不代表本站立场,转载联系作者并注明出处:https://www.5amiao.com/baike/2037.html

联系我们

在线咨询:点击这里给我发消息

QQ号:1045784018

工作日:10:00-17:00,节假日休息