浅析H5页面跳转小程序的3种实现方案 |
您所在的位置：网站首页 › a标签跳转传参 › 浅析H5页面跳转小程序的3种实现方案 |
浅析H5页面跳转小程序的3种实现方案
|
经常会有这样的场景：用户在网页中一键唤起小程序，能够给用户提供更好的体验。实现H5跳转小程序的方案目前有多种，可以根据自己的实际场景选择。 第一种：通过 URL Scheme适合在外部浏览器运行的H5页面，通过 URL Scheme 的方式来拉起微信打开指定小程序。 那如何获取小程序的 URL Scheme 呢？可以通过服务端接口（文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-scheme/generateScheme.html）或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme。 使用示例：下图是通过【小程序管理后台 - 工具 - 生成 URL Scheme 】的页面
填入具体的路径以及参数，点击【生成】按钮，将生成的 URL Scheme 存起来，直接放在按钮的点击事件中，如： openWeapp() { location.href = 'weixin://dl/business/?t=xxxxxx' }整体思路：前端调用后端接口，后端调用微信接口生成Url Scheme返回给前端，前端得到Url Scheme后，打开该链接即可实现跳转生成的 URL Scheme。 其他细节见官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-scheme.html 第二种：直接用微信的短链（URL Link）这种一般适用于不需要额外开发H5页面，直接生成链接，用户通过打开链接即可跳转指定的小程序页面。 获取 URL Link 的方式：通过服务端接口可以获取打开小程序任意页面的 URL Link 详见接口文档：https://developers.weixin.qq.com/miniprogram/dev/OpenApiDoc/qrcode-link/url-link/generateUrlLink.html 具体细节可参考微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-link.html 第三种：在自定义H5页面嵌入微信标签这种适用于运行在微信环境的自定义H5页面，将跳转按钮融合在自研H5应用，点击按钮后跳转指定小程序页面。 如何使用？ 1、需要 js-sdk-1.6.0 以上才支持 2、在wx.config中增加openTagList（开放标签列表） wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印 appId: '', // 必填，公众号的唯一标识 timestamp: , // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机串 signature: '',// 必填，签名 jsApiList: [], // 必填，需要使用的JS接口列表 openTagList: [] // 可选，需要使用的开放标签列表，例如['wx-open-launch-app'] });openTagList（开放标签列表）目前支持配置： wx-open-launch-weapp - 指H5跳转小程序 wx-open-launch-app - 指H5跳转app wx-open-subscribe - 服务号订阅通知按钮 wx-open-audio - 音频播放 打开小程序详细可参考官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html 注意要点： 使用该功能必须是非个人主体认证的小程序 只能跳已发布的【正式版】小程序，不能跳【体验版】或【开发版】 path 属性，官方文档一般是 pages/home/index?user=123&action=abc 这种示例，但实际使用可能会报页面不存在，需要在所声明的页面路径后添加 .html 后缀，如 pages/home/index.html |
【本文地址】
今日新闻 |
推荐新闻 |