微信H5网页授权登录
最近项目做了一个简单的H5在线点酒，用的vue-cli脚手架搭建，运行在微信环境，涉及到微信授权登录，jssdk的使用，微信支付等功能。现记录下一些流程，以便后续自己查阅。
一、微信H5网页授权登录
1. 获取JS-SDK签名
* 在微信公众平台中，申请到AppID和AppSecret。
* 在开发者工具中，使用wx.config()方法，传入appid、appsecret等参数，得到jsapi_ticket和noncestr。
* 使用wx.config()方法，传入jsapi_ticket、noncestr等参数，得到signature。
```javascript//获取JS-SDK签名wx.config({
debug: true, // 开启调试模式，调试时请置为true，仅在开发环境下生效 appId: 'your_appid', // 必填，公众号的唯一标识 timestamp: '', // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机数 signature: '',// 必填, 签名，见上得方法 jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadFile'
]
});
```
2. 授权登录
* 使用wx.authorize()方法，传入scope等参数，弹出授权窗口。
* 用户同意授权后，回调函数中获取用户信息。
```javascript//授权登录wx.authorize({
scope: 'snsapi_userinfo',
success: function () {
wx.getUserInfo({
success: function (res) {
console.log(res);
}
});
},
cancel: function () {
console.log('用户拒绝授权');
}
});
```
3. 获取用户信息
* 使用wx.getUserInfo()方法，传入scope等参数，获取用户信息。
```javascript//获取用户信息wx.getUserInfo({
success: function (res) {
console.log(res);
},
fail: function () {
console.log('获取用户信息失败');
}
});
```
二、微信JSSDK的使用
1. 配置JS-SDK
* 在微信公众平台中，申请到AppID和AppSecret。
* 在开发者工具中，使用wx.config()方法，传入appid、appsecret等参数，得到jsapi_ticket和noncestr。
```javascript//配置JS-SDKwx.config({
debug: true, // 开启调试模式，调试时请置为true，仅在开发环境下生效 appId: 'your_appid', // 必填，公众号的唯一标识 timestamp: '', // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机数 signature: '',// 必填, 签名，见上得方法 jsApiList: [
'checkJsApi',
'chooseImage',
'previewImage',
'uploadImage',
'downloadFile'
]
});
```
2. 使用JS-SDK
* 使用wx.checkJsApi()方法，传入scope等参数，检查JS-SDK是否授权。
* 使用wx.chooseImage()方法，传入count等参数，选择图片。
* 使用wx.previewImage()方法，传入current等参数，预览图片。
* 使用wx.uploadImage()方法，传入filePath等参数，上传图片。
* 使用wx.downloadFile()方法，传入url等参数，下载文件。
```javascript//使用JS-SDKwx.checkJsApi({
success: function () {
wx.chooseImage({
count:1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
console.log(res);
},
fail: function () {
console.log('选择图片失败');
}
});
},
fail: function () {
console.log('JS-SDK授权失败');
}
});
```
三、微信支付
1. 配置微信支付
* 在微信公众平台中，申请到AppID和AppSecret。
* 在开发者工具中，使用wx.config()方法，传入appid、appsecret等参数，得到jsapi_ticket和noncestr。
```javascript//配置微信支付wx.config({
debug: true, // 开启调试模式，调试时请置为true，仅在开发环境下生效 appId: 'your_appid', // 必填，公众号的唯一标识 timestamp: '', // 必填，生成签名的时间戳 nonceStr: '', // 必填，生成签名的随机数 signature: '',// 必填, 签名，见上得方法 jsApiList: [
'chooseWXPay',
'getWXACode'
]
});
```
2. 使用微信支付
* 使用wx.chooseWXPay()方法，传入transactionId等参数，选择支付方式。
* 使用wx.getWXACode()方法，传入scene等参数，获取二维码。
```javascript//使用微信支付wx.chooseWXPay({
timestamp: '',
nonceStr: '',
package: '',
signType: 'MD5',
paySign: '',
success: function () {
console.log('支付成功');
},
fail: function () {
console.log('支付失败');
}
});
```
以上就是微信H5网页授权登录，jssdk的使用和微信支付的流程。
