小程序跳转：云开发H5跳转小程序的坑，微信可跳，H5无法跳

目录

• 问题描述
• 原因分析
• 解决方案
• 更多前端知识

问题描述

本文适合小白交流，首次利用小程序云开发，将遇到的坑记录一下。我也是在论坛搜到很些人遇到类似问题，但是并没有正解，连官方的人都不知道开发者错在哪一步，其实是小白开发者进入了误区，后续会说明这个误区。可以到官方论坛看类似问题

注意： 所遇到问题的案例是来自官方提供的案例

官方说明： 网页会判断所在的环境来觉得采用哪种跳转方式，如检测到微信客户端内，则免鉴权使用开放标签跳转，如检测到在外部浏览器或 App，则使用 URL Scheme 跳转小程序。

按照官方说明，也就是说只要是在微信浏览器打开，就利用的是标签来直接打开小程序的。那么使用非微信浏览器，就是用的URL Scheme 跳转小程序，即是通过云服务拿到跳转小程序的地址，然后就能直接跳转。

我的流程： 将官方提供的代码下载下来->将配置信息替换成我们小程序的->然后直接将h5-open-miniprogram整个文件夹上传到云开发中的静态网站->配置好访问地址->然后在云函数中自己建了一个名为public的云函数。这时候我打开网址确实能访问到部署的html，但是马上就跳出了404页面：

排查问题： 出现这种问题，肯定是跳转链接的问题。然后注释代码中的调整部分，打印下返回的值：

预想的是返回的值不对，结果发发现果然没有openLink这个值，所以就会跳到上面那个错误页面，如图：

直到这里，问题所在是找到了~

分析原因

首先直接抛出结果：上面我的流程是错误的

后面单独了解了下云开发，经过实验证明才发现是云函数部署错误，所以导致访问不到相应的数据，微信浏览器能跳转，非微信浏览器跳转失败。

我的误区： 由于官方提供的代码h5代码和云函数代码放在一起的，一开始以为一起放到静态网站就完事了，看来还是我太天真，小白就是小白，打脸了~啪啪响的那种。

好的，那么问题是定位到了。我看到很多问这种没有返回openLink的问题，我想可能也是云函数没部署正确。

解决方案

前面铺垫了那么多，正解在这里：

• 首先html单独上传到静态网站上面；
• 云函数需要借助微信开发工具来部署，建一个小程序云开发项目，将public复制到cloudfunctions目录下；
• 在public目录下安装wx-server-sdk依赖；
• 然后右键部署，部署完就OK了；
• 更多详细步骤请参考我的另一篇博客：小程序跳转：云开发之h5跳小程序

最终返回值的效果：

到这里，问题基本上都能解决了。有句话送给所有小白开发者，世上无难事，只怕有心人。

更多前端知识

如果有任何疑问可以留言，更多相关技术也可以加QQ群交流：568984539

更多前端、uniapp、nodejs等相关知识可关注我个人博客：https://blog.csdn.net/qq_42961150?spm=1011.2124.3001.5343