网页授权snsapi_base(静默)和snsapi_userinfo(手动)的区别
1、snsapi_base：用户无感知，用来获取用户openid，静默授权自动跳转到回调页面
2、snsapi_userinfo：需要用户手动同意，用来获取用户基本信息，同意后，无需关注公众号就可以获取到用户的基本信息
3、特殊场景下的静默授权
已关注公众号的用户，用户从公众号的会话或自定义菜单进入本公众号的网页授权，即使是snsapi_userinfo也为静默
网页授权access_token和普通access_tokende的区别
1、用户授权给公众号之后，公众号可以获取到一个网页授权特有的接口凭证（网页授权access_token），则可以进行授权后的接口调用，如用户基本信息
2、其他微信接口，需要通过基础支持中的“获取access_token”接口来获取到的普通access_token调用。
授权流程和参数开发文档都有，就不粘贴复制啦～这里直接粘贴我的前端代码
安装 weixin-js-sdk
npm install weixin-js-sdk
网页授权（需要授权的页面代码）
import { wxconfig,wxPay } from '@/assets/api/wxconfig' //这是我的微信配置文件
mounted(){
this.init()
},
methods:{
init() {
if(!localStorage.getItem('code')){//因为进来页面就进行授权，有一个值去判断是不是去跳转
axios.get('/openwxurl',{params: {id:1}}).then(res => {
if(res.code === 10000){
localStorage.setItem('code',true)
location.href = res.data.url
}
})
} else{
this.sendCode() //有就直接调用发送code换取access_token 的方法
}
},
sendCode(){
if(!localStorage.getItem('openId')){
//getUrlItem()是我写的一个获取url参数的方法
axios.get('/getAccessToken',{params: {code: getUrlItem('code')}}).then(res => {
if(res.code === 10000){
localStorage.setItem('openId',res.data.openId)
this.getwxconfig()
}
})
} else{
this.getwxconfig()
}
//**静默授权做到这一步流程结束，我们的项目是静默授权，所以授权就写到这里啦～～～～**
},
getwxconfig(){ //这里去调用微信config配置需要的信息
axios.get('/getWxconfig',{params: {url: location.href.split('#')[0]}}).then(res => {
if(res.code === 10000){
wxconfig(res.data) //调用微信的配置
}
})
},
submitPay(){//获取调用支付接口的参数
axios.post('/getPay',this.form).then(res => {
if(res.code === 10000) {
wxPay(res.data)//调用微信支付
}
})
}
JSSDK调用（我的配置文件wxconfig.js）
import wx from 'weixin-js-sdk'
export const wxconfig = ({ timestamp, nonceStr, signature, appId }) => {
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId, // 必填，公众号的唯一标识
timestamp, // 必填，生成签名的时间戳
nonceStr,// 必填，生成签名的随机串
signature,// 必填，签名
jsApiList: [
'chooseWXPay'
] // 必填，需要使用的JS接口列表
});
wx.ready(function(){
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});
wx.error(function(res){
console.log(res)
// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});
}
export const wxPay = ({ timestamp, nonceStr, packages,signType ,paySign}) => {
wx.chooseWXPay({
timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
nonceStr, // 支付签名随机串，不长于 32 位
package: packages, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
paySign, // 支付签名
success: function (res) {
console.log(res)
// 支付成功后的回调函数
}
});
}
以上，这两天的成果，由于数据都是后台获取的，主要的难度在后台，尤其是签名很难搞，熟读文档就可以啦～～
网友评论