vue 微信二维码扫码登录，附加 自定义样式

大概流程：

 

先安装 微信 的登录， 然后 局部引入，局部注册，方法调用，存 token，跳转路由

npm 安装

npm install vue-wxlogin --save-dev  

微信安装 微信登录，后面需要用到

要扫码登录的页面

import wxlogin from 'vue-wxlogin'; // 先引入，后注册

 

components:{

    wxlogin

  },

template 部分

<wxlogin   appid=" 微信首页内找 appid "   :scope="'snsapi_login'"   :theme="'black'"   :redirect_uri='encodeURIComponent( " 登录后跳转的地址，前端自己生成路由，用于跳转 " )'  rel="external nofollow"> </wxlogin>

 

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

 

自定义样式需要去转码：http://tool.chinaz.com/Tools/Base64.aspx （ 找到底层代码，手写样式，选择加密, ）

 

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

 

href必须使用 text/css模式,生成的base64添加到'data:text/css;base64, 后面这一节就是你加密的内容 '后面就可以了

例如：

:href="'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ==' "

 

// 注释： 地址是前端自己生成，需要加上域名，本地需要在 host 文件配置 域名. 例如： 127.0.0.1  接项目的域名

 

扫码跳转登录之后，在 新的页面 内 去获取 路由地址

 

data:{

　　

redirect: undefined //用来获取地址，用于重新向跳转

}

created(){

this.code = this.$route.query.code;

},

watch:{

$route: {

      handler: function(route) {

        this.redirect = route.query && route.query.redirect;

      }

    }

 

}

 

methods:{

 

 引入后端方法名字（）{

 

　　后端方法（ 传参 ）。then(res=>{

 

　　扫码成功，存 token。根据项目决定 存 cookie 或者其他地方

　　

this.$router.push({ path: this.redirect || "/" }); // 重定向跳转路由

})　　

 

　　}

　　

}