您现在的位置: 首页 > 微信技巧 > 公众号链接H5实现微信支付

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

发布时间:2019-06-17  
这一篇文章主要介绍了Uni-app(使用Vue.js开发跨平台应用的前端框架)中H5端实现微信支付功能,帮助前端新手在开发中解决微信支付的问题话不多说,看下文●引入微信JSSDK文件(下载地址:http://res2.wx...

  这一篇文章主要介绍了Uni-app(使用Vue.js 开发跨平台应用的前端框架)中H5端实现微信支付功能,帮助前端新手在开发中解决微信支付的问题

  话不多说,看下文

  ●引入微信JSSDK文件(下载地址:http://res2.wx.qq.com/open/js/jweixin-1.4.0.js)

  ● 进行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打印一下,是否成功引入。

  本期内容到此结束,