html5实现微信支付宝接口,Vue使用微信JS-SDK实现微信支付

最近做公众号开发，需要做充值功能调起微信支付，项目是Vue框架写的h5页面，研究了很多微信的官方文档和一些文章。终于开发完成，在此总结一下jssdk-jsapi微信支付的开发流程。

前端开发(vue-cli)：

1、项目中下载jsapi文件包

(1)npm install weixin-jsapi

(2)在页面中引入文件 import wx from 'weixin-jsapi'

如果是html文件中可以

// 只需要引入weixin-1.4.0.js 调试不成功时引入jq

//

2、页面授权

页面授权可以根据项目需求选择静默授权和用户手动授权两种方式

(1)对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知；

(2)对于以snsapi_base为scope的网页授权，就静默授权的，用户无感知。

参数说明.png

3、拿到code传给后端接口，后端返回openid,token等用户信息，主要是为了获取openid

4、【立即充值】点击事件提交充值金额等页面信息，成功后执行以下代码

wx.config({

debug: true, // 这里一般在测试阶段先用ture，等打包给后台的时候就改回false,

appId: this.wx_config.