PC网页微信授权登录
一：网页外链跳转的方式
01.请求后台的接口，会返回一个微信扫码的界面地址，使用js跳转过去即可
wxlogin () {
User.wxlogins().then(res => {
console.log(res)
window.location.href = res.result.url
})
},
02.用户在扫完码点击确定授权后，后台会拿到微信授权用户的信息后，会帮我们跳转到事先给后台重定向的地址页面（这里我是新建了一个空白页用来接收后台返回的数据），在地址后面后台会拼接一个token，我们拿到这个token，去获取用户信息，跳转到首页，即可完成登录
let token = this.$route.query.token
if (token) {
this.getUserInfo().then(ures => {
this.$router.push({
name: 'home'
})
})
}
二：网页内嵌二维码方式
01.配置好下面相关参数，即可生成微信授权登录/绑定二维码，（注意：setWxerwma （）此方法需在mounted中调用）
setWxerwma () {
const s = document.createElement('script')
s.type = 'text/javascript'
s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'
const wxElement = document.body.appendChild(s)
wxElement.onload = function () {
var obj = new WxLogin({
id: '', // 需要显示的容器id
appid: '', // 公众号appid wx*******
scope: 'snsapi_login', // 网页默认即可
redirect_uri: encodeURIComponent(''), // 授权成功后回调的url
state: Math.ceil(Math.random() * 1000), // 可设置为简单的随机数加session用来校验
style: 'black', // 提供"black"、"white"可选。二维码的样式
href: '' // 外部css文件url，需要https
})
}
},
02.后面的逻辑根据后台返回的数据来处理即可，同方法一步骤二类似
微信公众号网页授权登录
01.创建一个按钮，点击触发事件,跳转到微信授权页面
wxlogin () {
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${this.appid}&redirect_uri=${this.url}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
}
//this.appid 公众号APPID this.url 用户点击授权后，会跳转到后台帮我们重定向的页面（这里我是新建了一个空白页，专门接收code）
02.在重定向的页面拿到微信那边给我们返回的code，会拼接在URL后面，我们拿到这个code再请求后台的接口换取token，完成微信登录
微信支付的各种
1、微信支付
yi调取后端接口返回来的数据+wx.pay
function requestPayment(typeId, contentId, contentShardId, anonymous, subTypeId, callback) { app.apiGet(app.apiLink.pay,{ typeId: typeId, contentId: contentId, subTypeId: subTypeId, contentShardId: contentShardId, openId: wx.getStorageSync('openId'), anonymous: anonymous, app: getApp().globalData.app }).then(function (res) { if (res.result.error) { wx.showModal({ title: '提示', content: res.result.error, confirmText: '我知道了', confirmColor: '#ff8022', showCancel: false }) } else { wx.showLoading({ title: '支付中...', mask: true }) wx.requestPayment({ 'timeStamp': res.result.timeStamp, 'nonceStr': res.result.nonceStr, 'package': res.result.package, 'signType': res.result.signType, 'paySign': res.result.paySign, 'success': function (res) { console.log(res) wx.hideLoading(); callback() }, 'fail': function (res) { wx.hideLoading(); wx.showToast({ title: '支付失败', icon: 'none', mask: true, duration: 2000 }) } }) } }, function (msg) { console.log(msg) })}
二、支付产品介绍
1、JSAPI支付
商家贴收款码物料，用户打开扫一扫，扫码后输入金额，完成付款
pay.weixin.qq.com/wiki/doc/ap…
2、Native支付
商家在系统中按微信支付协议生成支付二维码，用户扫码拉起微信收银台，确认并完成付款
pay.weixin.qq.com/wiki/doc/ap…
三、网站如何接入微信支付功能
1、创建订单接口
当用户点击立即购买时会进入一个待支付页面，这个点击立即购买就会调用创建订单这个接口，所以数据库中必须有一张订单表，该表中包含了一些用户信息和商品信息，当然最核心的是要包含订单号（order_no）字段和是否支付（is_pay）字段
2、待支付页面数据回显接口
待支付页面包含了用户信息和商品信息，所以如果要做到这样的待支付页面，就需要根据订单号去数据库查询相关的订单数据，订单号？看下方示例代码
<!-- 立即购买html代码 -->
<section>
<a href="javascript:void" title="立即购买" @click="createOrder()">立即购买</a>
</section>
<!--立即购买js代码-->
createOrder() {
if (cookie.get('user_token') == null) {
// 如果还没用登录就跳转到登录页面
window.location.href = 'http://localhost:85555/login'
}
// 登录就调取订单接口
order.createOrder(this.usereId)
.then(response => {
if (response.data.success) {
console.log("===============" + response.data.data.orderNo)
this.$router.push({
// 拿到订单号
path: '/order/' + response.data.data.orderNo
})
}
})
},
如上图中的前端代码为例，当点击立即购买时，就会跳转到待支付页面；从跳转的路径来看，路径包含订单号，这个订单号就是调用创建订单接口后端返回来的
所以这个待支付页面就可以通过订单号将相关的信息查询出来
3、生成微信支付二维码接口
想来也都明白，肯定时扫码支付
假设当前只能使用微信支付，当点击提交订单时，就会出现一个支付二维码；所以这个点击提交按钮就会调用后端生成二维码接口
pay.weixin.qq.com/wiki/doc/ap…
其中需要一些核心的参数，当然你得认证通过之后（这些参数的意思不再过多阐述，官网可以了解)
1.appid 唯一标识2.mch_id 商户号3.notify_url 回调地址4.partnerkey 商户密钥
