对接微信登陆，css中变量的使用，以及js动态更改css变量数据

这阵子做了一个微信公众号知识答题的项目。

整个项目采用saas模式，即分为系统管理后台+站点管理后台+站点前台。

系统管理后台可创建站点及站点管理员，站点管理后台可管理题库，题目，试卷，模拟考试，正式考试，积分管理等信息，发布之后前台用户可见。

前台用户采用微信登陆的方式，进入站点前台系统，填写完个人信息，可参与模拟考试，正式考试，积分排行等。

---

项目的前端技术使用的是vue框架。

下面说说本次项目开发过程中几个值得分享的点（作为前端开发人员，当然说的是前端方面的~）：

一，微信登陆接口对接

两种模式，一种微信内进入页面，一种非微信内进入页面。

判断微信浏览器的方法很多，包括兼容性的问题，这里就不一一赘述了，只说微信浏览器与非微信浏览器对接微信登陆的不同。

首先，微信登陆，一定需要一个公众号，在公众号的开发-接口权限中获得网页授权的权限（注意，一定是认证过的服务号才能获取此权限）

公众号接口权限界面

设置网页授权域名，此域名为回调地址

第一种，在微信浏览器中打开页面，因为可以直接调用微信授权登录，前端页面上便重定向到微信网页授权的页面。

appid为公众号的appid，redirect_url为微信授权成功之后回调的页面（即当前页面）

授权成功之后，会根据回调页面（参数为当前页面）跳回来，并在路由中携带code参数，将此code传给后端登陆接口即可。

因为成功后会给当前地址携带参数，所以判断当前页面的状态是登陆成功的还是未登录的，需要在页面初始化的时候，就判断截取路由中的参数。

截取code参数

第二种，非微信浏览器打开页面，不能直接调用微信授权登陆，需要给用户提供一个微信二维码用来扫描登陆，与微信浏览器登陆不同之处在于授权成功的回调地址不再是前端的页面地址，而是后端的接口地址，由后端去接收登陆成功的code，并且返回给前端用户的登陆信息，因为后端不能主动向前端发送数据，所以我们需要轮询请求接口，以获取当前用户是否登陆成功。

将redirect_url地址改为后端接口地址

在页面中定义微信登陆地址，然后将地址生成二维码，此处记录本次业务中使用的工具是QRCode。

生成的二维码中，除了定义的微信登陆地址，还有一个随机的八位数uuid（用于判断每一个二维码扫描对应的用户，在轮询请求的过程中，带上uuid）

生成二维码

二维码生成之后，开始循环调用后端登录接口。

每一秒调一次，直到接口返回成功，就说明用户扫码登陆成功了

至此，用户就用微信扫码成功登陆。

二，站点用户系统，定制化主题色。

因为是saas平台，所以不同的站点会拥有自己的前台，数据独立不互通，那么前台页面也支持站点独立设置风格。

logo，背景图，标题的设置自不必说，此处说一下主题色在前台代码中的配置。

因为这些style config是通过后端接口获取的，那么也就意味着我们需要在获取到数据之后，动态的去更改css里面所有用到主题色的值，这个时候，css的变量就起到作用了。

在全局的css里面声明变量，给个默认值

调用的时候，var（--变量名即可）

获取到style config之后，使用setProperty方法更改变量的值

这样，就能全局修改主题色的值，css的变量不只可以用在这个功能上，很多需要通过js动态一次性修改多处css值的功能，都可以使用。

当然，这种功能也可以使用scss中的函数配合js动态添加class来实现，不过相比之下，这个方法显然更加简洁。

三，关于试卷预览，调换题目排序。

在这里记录一个非常好用的拖拽排序的工具vue-draggable。

适用于所有的需要拖拽排序的列表，可以说非常好用了~