最近项目做了一个简单的H5在线点酒，运行在微信环境，涉及到微信授权登录，jssdk的使用，微信支付等功能。前端用的vue-cli脚手架搭建，路由用的是history模式，因为hash模式的话，在做微信支付时会有很多坑。history模式的话前端只要设置下路由模式就好，然后后端配合设置下服务器即可（官网配置传送门），配置完后在浏览器能直接访问某个内页就算成功。现记录下一些流程，以便后续自己查阅。微信开发文档传送门
一、微信H5网页授权登录
授权登录流程微信开发文档已经写的很清楚了，如下：
1 第一步：用户同意授权，获取code
2 第二步：通过code换取网页授权access_token
3 第三步：刷新access_token（如果需要）
4 第四步：拉取用户信息(需scope为 snsapi_userinfo)
5 附：检验授权凭证（access_token）是否有效
我这边用的是vue来开发的，所以写下前端具体的流程。首先是在app.vue里面用watch做全局的路由监听（也可以用router.beforeEach来做拦截，为什么不在app.vue生命周期里面获取呢，因为授权成功后query参数里的code在这边获取不到），然后在监听里面判断本地是否有缓存用户信息，没有的话就直接跳转微信的授权链接；授权成功后，会重新跳回h5网页，这时就可以在watch的路由监听里面获取到query参数里面的code，然后通过code调用后端的登录接口获取用户的信息并缓存即可。
app.vue完整代码：
<template>
<div id="app">
<router-view />
</div>
</template>
<script>
import { authorize } from "@/assets/js/authorize";
import { userInfoKey } from "@/assets/js/config";
import wx from "weixin-js-sdk";
export default {
name: "App",
data() {
return {
firstRender: true
};
},
mounted() {
this.getJssdkConfig(); // 获取jssdk配置
},
watch: {
$route(to, from) {
if (this.firstRender) {
// 缓存桌号，在线点酒要用，没有桌号需要跳转扫一扫页面
this.firstRender = false;
let query = this.$route.query;
if (query && query.table) {
window.localStorage.setItem("table", query.table);
}
}
let userInfo = window.localStorage.getItem(userInfoKey);
if (!userInfo) {
// 没有用户信息的话跳转微信授权
let query = this.$route.query;
if (query && query.code) {
// 获取code调取后端登录接口获取用户信息
this.login(query.code);
return;
}
authorize();
}
}
},
methods: {
getJssdkConfig() {
// 调接口获取jssdk配置
this.request({
url: "/api/v1/user/get_jssdk",
data: {
url: window.location.href.split("#")[0]
},
successFn: res => {
let data = res.data;
wx.config({
//debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appid, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.noncestr, // 必填，生成签名的随机串
signature: data.signature, // 必填，签名，见附录1
jsApiList: ["scanQRCode", "openLocation", "chooseWXPay"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
/* wx.error(re => {
console.log(re, "jssdk配置失败");
}); */
}
});
},
login(code) {
// 调用登录接口
let that = this;
this.request({
url: "/api/v1/user/getUserInfoByCode",
data: {
code: code
},
successFn(res) {
window.localStorage.setItem(userInfoKey, JSON.stringify(res.data));
if (res.data.mobile === "") {
that.$router.push("/bind-phone");
}
}
});
}
}
};
</script>
<style></style>
授权代码：
export function authorize() {
// 微信授权登录
let redirect_uri = encodeURI(window.location.href),
appid = "微信公众号appid";
let wx_url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`;
window.location.href = wx_url;
}
二、jssdk的使用
项目使用npm包引入，所以先下载安装npm包，执行如下命令：
npm i -S weixin-js-sdk然后在app.vue生命周期里面调用后端接口获取配置信息进行配置后，就可以直接在页面上引入wx对象（import wx from "weixin-js-sdk"; ），然后调用微信的扫一扫，支付等相关接口了，具体代码查看上面app.vue代码。
效果：
