uniapp 的支付宝生活号H5调试设置

198 阅读2分钟

1. 前言

最近在使用 uniapp 开发一个跨端项目,项目不是很复杂,但是需要调试支付的时候会比较麻烦,这边 【H5 支付】涉及到微信公众号,支付宝生活号,其他浏览器的支付。在微信公众号需要获取 openId,在支付宝生活号需要获取 union_id,在其他浏览器的时候不需要获取这些参数。那么在微信公众号和支付宝生活号调试的时候就会存在问题,这里就记录一下支付宝生活号的调试配置。

2. 参考文章

支付宝生活号H5如何调试?

3. 第一步下载支付宝开发者工具

  1. 支付宝小程序开发者工具
  2. 下载开发者工具 下载开发者工具

4. 打开一个支付宝小程序的项目

由于需要借助 web-view 标签,因此需要先存在一个支付宝小程序的项目,如果没有,可以直接使用工具创建一个支付宝小程序的项目。找到首页,创建一个 web-view 标签,嵌入对应的 H5 地址。

输入图片说明

5. 注意此时可能存在访问受限的问题

解决访问受限的问题,直接设置【忽略 web-view 域名合法性检查】!

输入图片说明

6. 打开调试

输入图片说明

7. 查看H5的打印结果

输入图片说明

8. 总结

  1. 方法其实很简单,可能也还有专门的调试工具,但是这种方法解决了我的问题,所以记录一下,方便以后使用的时候调试;
  2. 因为区分了浏览器的环境,在其他浏览没有报错,在生活号时,点击没有反应,也不知道错的原因,因此此方法可以快速定位错误的地方;
  3. 本次调试生活号的错误定位,单纯只是记录,佛主保佑,永远没错:

输入图片说明 输入图片说明

错误原因就是后端返回的获取 union_id 地址错误了,其实后端是改了配置文件的,只是由于没有重新启动配置文件的服务,导致返回的依然是原来乱写的地址。但是如果不这样直观的看到报错的问题,就不好直接解决问题。因此这个调试模式还是解决了此问题。