资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

从H5页面跳转到小程序的实现方案有哪些

本篇内容主要讲解“从H5页面跳转到小程序的实现方案有哪些”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“从H5页面跳转到小程序的实现方案有哪些”吧!

成都创新互联公司拥有十载成都网站建设工作经验,为各大企业提供成都网站设计、成都网站制作服务,对于网页设计、PC网站建设(电脑版网站建设)、成都app软件开发、wap网站建设(手机版网站建设)、程序开发、网站优化(SEO优化)、微网站、主机域名等,凭借多年来在互联网的打拼,我们在互联网网站建设行业积累了很多网站制作、网站设计、网络营销经验,集策划、开发、设计、营销、管理等网站化运作于一体,具备承接各种规模类型的网站建设项目的能力。

实现方案

实现H5跳转小程序的方案目前有多种,可以根据自己的实际场景选择,上面提到的场景采用第二种更合适,我们先来一个个看。

第一种:通过 URL Scheme

适合在外部浏览器运行的H5页面,通过 URL Scheme的方式来拉起微信打开指定小程序。

小程序的 URL Scheme如果借助于云开发的话,是免鉴权,直接调用即可获取,这里不过多赘述,感兴趣的童鞋自己查文档吧~

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

使用示例

下图是通过:【小程序管理后台 - 工具 - 生成 URL Scheme 】的页面

从H5页面跳转到小程序的实现方案有哪些

填入具体的路径以及参数,点击【生成】按钮,将生成的 URL Scheme 存起来,直接放在按钮的点击事件中,如:

openWeapp() {
    location.href = 'weixin://dl/business/?t=xxxxxx'
}

其他细节可参考微信官方文档。

第二种:直接用微信的短链(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 设定了【体验版】或【开发版】,需要在外部浏览器打开才能跳转指定的版本,参考。

  • 在某些OPPO自带的浏览器中打开(如下图),提示“请在手机打开网页链接”,兼容性还需努力啊……

从H5页面跳转到小程序的实现方案有哪些

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

这种适用于运行在微信环境的自定义H5页面,将跳转按钮融合在自研H5应用,点击按钮后跳转指定小程序页面。

  • 需要 js-sdk-1.6.0 以上才支持 

  • 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 - 音频播放

HTML标签示例

    
        ...
    
                             打开小程序            

详细可参考微信官方文档。

注意要点

到此,相信大家对“从H5页面跳转到小程序的实现方案有哪些”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


当前名称:从H5页面跳转到小程序的实现方案有哪些
文章源于:http://www.cdkjz.cn/article/ggopej.html
返回首页 了解更多建站资讯
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220