谈谈H5页面跳转到小程序的几种实现方案(有常用坑)

如何从H5页面跳转到小程序？下面文章介绍了H5页面跳转到小程序的几种实现方案，分享踩坑记录和注意事项。希望对你有帮助！

负责的最新需求涉及H5页面跳转小程序的场景。具体应用场景是:

来看看H5跳转小程序目前的实现方案吧~

H5跳转小程序有多种实现方案，可以根据自己的实际场景进行选择。上面提到的第二种情况更合适。我们先一个一个来看看。【相关学习推荐:小程序开发教程】

第一种:如果通过URL Scheme小程序的URL方案是云端开发的，是免认证的，直接调用就可以获得。这里就不赘述了。感兴趣的童鞋可以自己查证件~

那你怎么得到小程序的URL方案呢？打开小程序任意页面的URL方案都可以通过服务器界面或者工具-在小程序管理后台生成URL方案的入口获取。

示例下图是一个通过【小程序管理后台-工具-生成URL方案】的页面。

填写具体路径和参数，点击【生成】按钮，保存生成的URL方案，直接放入按钮的click事件中，比如:

openWeapp(){ location . href = # 39；weixin://dl/business/？t = xxxxxx # 39}其他详情请参考微信官方文档。

第二个:直接用微信的短链接打开链接后，会出现微信默认的H5中转页面(如果你愿意，也可以自定义H5中转页面)。目前的版本已经支持默认的自动跳转小程序，不需要用户确认，非常好。

具体如何获取URL链接，请参考微信官方文档。

在踩坑记录调微信生成URL链接的界面中，参数路径只识别官方版本。虽然有环境变量env_version，但是没有用(也就是说设置的路径必须在正式版本中已经存在，否则会报错:weapp pagepath无效)。

生成的网址链接，也就是https://wxaurl.cn/pFawq35qbfd这样的短链，在微信环境下打开才能跳转到【官方版】。即使你的env_version设置为【体验版】或者【开发版】，也需要在外部浏览器中打开才能跳转到指定版本。看吧。

在一些OPPO自带的浏览器中打开(如下图)，提示“请打开手机上的网页链接”。兼容性仍需努力...

第三:在自定义H5页面中嵌入微信标签需要js-sdk-1.6.0或以上版本支持(https://res.wx.qq.com/open/js/jweixin-1.6.0.js)在wx.config中添加openTagList(开放标签列表)wx.config({ debug: true，//打开调试模式，所有api调用的返回值都会在客户端告警上出来。如果想查看进来的参数，可以在pc端打开，参数信息会通过log录入。AppID只会打印在pc端: # 39；'，//必选，微信官方账号的唯一标识符，时间戳:，//必选，时间戳non centr: # 39；'，//必需，生成随机字符串签名: # 39；'，//必选，有符号jsApiList: []，//必选，要使用的JS接口列表openTagList: [] //可选，要使用的打开标记列表，例如[ # 39；wx-open -launch -app # 39；]});OpenTagList目前支持以下配置:

Wx-open-launch-weapp -指H5跳小程序wx-open-launch-app -指H5跳appwx-open-subscribe -服务号订阅通知按钮wx-open-audio -音频播放HTML标签示例

注意:该功能必须是非个人主体认证的小程序。只能跳转已发布的【正式版】小程序，不能跳转【体验版】或【开发版】。Path属性，公文一般是pages/home/index？用户= 123 action = ABC这个例子，但是实际使用可能会报告页面不存在，需要添加一个。声明的页面路径后的html后缀，如pages/home/index.html，有毒。最后，这就是H5跳转小程序的场景。希望能帮到你。如果遇到其他的坑，可以留言和我们交流~

有关编程的更多信息，请访问:编程视频！！以上就是说说H5页面跳转到小程序的几种实现方案(有常见坑)的细节。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 如何从小程序跳转到H5页面？（样本分析）
• 谈谈h5页面跳转到小程序的几种实现方案（有常见坑）（如何从H5页面跳转到小程序）
• 如何从小程序跳到H5页面？(实例分析)(如何通过小程序跳转到h5)

本文由主机参考刊发，转载请注明：谈谈H5页面跳转到小程序的几种实现方案(有常用坑) https://zhujicankao.com/74527.html