需求:软件系统开发时，遇到建设网站需要点击扫码登录，显示二维码，用户扫码登录后，标记用户已经登录。

使用插件: https://www.npmjs.com/package/vue-wxlogin

vue文件中script使用

// 安装
npm install vue-wxlogin --save-dev
// 组件中引入
import wxlogin from 'vue-wxlogin'
...
components: { wxlogin }
...

vue文件中template使用

          <div class="qrcode-area">
            <wxlogin
              :appid="weixin.appid"
              :scope="'snsapi_login'"
              :theme="'black'"
              :state="'1'"
              :redirect_uri="encodeURIComponent(weixin.redirect_uri)"
              rel="external nofollow"
            />
          </div>

参数说明

appid: 应用唯一标识（前面认证网页应用中获得）
scope: 应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi\_login即可
theme: 提供"black"、"white"可选，默认为黑色文字描述。
href: 自定义样式链接，只能使用https链接或者base64编码的地址

href自定义样式

1、使用https链接地址。

这个很简单，只需要把自定义的css文件上传到服务器，然后使用服务器上的css文件即可（缺点：如果网络比较慢，首先加载默认样式，然后才回使用自定义样式，有一个闪烁的过程）

2、使用base64

3、href必须使用 text/css模式,生成的base64添加到'data:text/css;base64,'后面就可以了

4、需要注意的地方

redirect_uri: 回调地址，必须使用encodeURLComponent()编码

额外知识:

vue 使用urlEncode及urlDecode

// 解码用 
decodeURIComponent(str)
// 编码用 
encodeURIComponent(str)

了念博客

vue使用微信扫码登录网站(自定义样式)

vue 使用urlEncode及urlDecode