微信公众号网页开发，登录授权和微信支付

大家好，又见面了，我是你们的朋友全栈君。

微信公众号的网页开发基本和H5移动端开发一致，主要是涉及到网页授权获取用户信息和使用js-sdk获取微信原生能力支持。

开发前准备

申请一个测试号：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=sandbox/login

用自己微信扫码登录，然后扫码关注当前测试号，这里注意js接口安全域名和网页授权回调域名，需要配置为当前项目地址。使用测试号时用ip即可，但是线上必须是域名。

网页授权

类似把系统自己的登录体系移除，通过微信授权方式获取微信用户信息。在测试号里配置域名时，不需要带协议头和后缀。

注意：

1、在微信公众号请求用户网页授权之前，开发者需要先到公众平台官网中的“开发 – 接口权限 – 网页服务 – 网页帐号 – 网页授权获取用户基本信息”的配置选项中，修改授权回调域名。请注意，这里填写的是域名（是一个字符串），而不是URL，因此请勿加 http:// 等协议头；

2、授权回调域名配置规范为全域名，比如需要网页授权的域名为：www.qq.com，配置以后此域名下面的页面http://www.qq.com/music.html 、 http://www.qq.com/login.html 都可以进行OAuth2.0鉴权。但http://pay.qq.com 、 http://music.qq.com 、 http://qq.com 无法进行OAuth2.0鉴权

拓展阅读：什么是OAuth2.0鉴权 OAuth 2.0 的四种方式

伪代码

const code = getUrlCode('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
if (code === null || code === '') { 
   
    const url = window.location.href
    window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + APPID + '&redirect_uri=' + encodeURIComponent(url) + '&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect'
} else { 
   
    // 具体业务逻辑
    // ...
}

这个逻辑就是从当前url上截取code字段的值，如果能截取到说明是回调后的url，然后用code去后端请求换取其他信息。如果没有说明是首次登录，那就按照微信开发文档，把对应参数拼接好，直接跳转到拼接的地址，这个地址会把我们需要的code加在回调url上一起跳转回来。这个时候又会走上面逻辑就可以拿到code。

注意授权中的scope参数有2种，分为静默授权和用户手动授权，要和后端对接好用哪种。

JS-SDK使用

微信的js-sdk就是通过引入sdk文件，调用微信提供的api可以直接使用微信的原生个性化功能，比如自定义分享、扫一扫、拍照和支付等。

使用步骤具体参照官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#1

这里主要强调下微信支付，首先商户要开通jsAPI支付功能，然后商户后台配置好支付回调地址，注意微信支付需要在线上环境进行测试。

逻辑是前端设置好sdk相关配置，然后请求后端接口获取支付相关配置，后端收到请求时会生成一个订单并调用支付接口获取对应支付配置，然后挂起，此时前端获取到响应数据后再调用chooseWXPay即可调起微信支付功能，支付完成后微信会通知后端支付状态。

支付功能的前提是先把sdk配置好，config里加上支付接口，如下：

wx.config({ 
   
  debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
  appId: '', // 必填，公众号的唯一标识
  timestamp: , // 必填，生成签名的时间戳
  nonceStr: '', // 必填，生成签名的随机串
  signature: '',// 必填，签名
  jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表
});

chooseWXPay就是支付接口，里面的配置项全部由后端返回。在开发者工具中调试时，可能显示的名称不叫chooseWXPay，这是因为chooseWXPay封装了另一个名称的方法，这里可以正常使用，调试时需要在线上真机测试。然后调用后端接口获取支付配置：

wx.chooseWXPay({ 
   
  timestamp: 0, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
  nonceStr: '', // 支付签名随机串，不长于 32 位
  package: '', // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
  signType: '', // 微信支付V3的传入RSA,微信支付V2的传入格式与V2统一下单的签名格式保持一致
  paySign: '', // 支付签名
  success: function (res) { 
   
    // 支付成功后的回调函数，比如支付成功后提示，或返回某个页面
  }
});

很多时候都是后端的签名错误，可以通过官方的验证工具检测：https://pay.weixin.qq.com/wiki/doc/api/jsapi.php?chapter=20_1

注意：如果使用vue开发，建议直接使用history路由模式，否则支付接口回调对接很麻烦