如何编写Vue+ABP框架下的微信扫码登录功能代码示例？

本文共计931个文字，预计阅读时间需要4分钟。

最近系统更新后，建议使用微信扫码登录。可参考微信官方文档和网络搜索相关资料实现。分享给需要的人，也作为自己的笔记。后端系统基于ABP框架，部分代码直接使用了ABP的接口。

最近系统中要使用微信扫码登录，根据微信官方文档和网络搜索相关文献实现了。分享给需要的人，也作为自己的一个笔记。后端系统是基于ABP的，所以部分代码直接使用了abp的接口，直接拷贝代码编译不通过。

注册微信开放平台账号#

在微信开放平台注册，注意是开放平台不是公众平台，这里需要300元，然后申请网站应用。审核通过后获取到AppID和AppSecret以及登记的网站url。只有此url下的地址微信扫码后才能回调。

具体申请条件见官方文档。

生成登录二维码#

在vue登录页面嵌入登录二维码，根据官方文档，在页面中放入一个div元素，二维码就放在此元素中，注意var obj = new WxLogin必须放在mounted方法中执行，此时vue才会把dom元素初始化挂载到dom树，可以参见vue官方文档生命周期介绍。