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


大概流程:   先安装 微信 的登录, 然后 局部引入,局部注册,方法调用,存 token,跳转路由

npm 安装

npm install vue-wxlogin --save-dev  

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

要扫码登录的页面
import wxlogin from 'vue-wxlogin'; // 先引入,后注册   components:{     wxlogin   },

template 部分

    注意:  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 || "/" }); // 重定向跳转路由 })       }    }