公众号链接H5实现微信支付

[复制链接]
查看64 | 回复0 | 2019-6-18 10:21:49 | 显示全部楼层 |阅读模式
 这一篇文章主要介绍了Uni-app(使用Vue.js 开发跨平台应用的前端框架)中H5端实现微信支付功能,帮助前端新手在开发中解决微信支付的问题
  话不多说,看下文
  ●引入微信JSSDK文件
  ● 进行config配置
  ● 在ready里调用微信接口
  第一步:
  在JS里引入我们的下载的微信JSSDK,此处我是用的HBuilder开发工具下开发的uniapp,引入格式为(import 自定义名称 from JSSDK文件路径)

  第二步:
  先进行一次数据请求,从后端拿到微信返回的接口数据进行config配置,这里我定义名字为wx所以为wx.config,配置如下图:

  当我们在调试的时候,把debug的值改为true,这样就可以返回我们的配置是否成功,也可以返回错误信息
  其jsApiList由于是数组,所以当我们需要使用到多个接口的时候,直接按格式填在数组里就可以
  在调试时发现,苹果返回的信息会比较仔细全面,安卓则只显示配置成功失败,所以踩到坑的时候不妨在苹果端运行,查看返回的参数
  第三步:
  调用JS接口的时候,一定要让JS接口处于ready里,这样可以确保在config配置执行之后,才执行我们的JS接口

  其参数都是必填,数据是第一步请求数据,从后端拿到的。对于微信支付chooseWPay方法,官方文档也有仔细的说明

  最后我们只需要在success里制定支付成功后的事情就完成我们的微信支付了。
  这里说一下在调试中踩坑的小细节,确保自己能请求到后端的数据,能拿到后端的数据,再一个就是确保自己JSSDK文件引入正常,路径正确等问题,可以在引入文件之后进行console.log打印一下,是否成功引入。

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1

主题

1

帖子

5

积分

新手上路

Rank: 1

积分
5