vue-wxlogin微信扫码登录插件【使用笔记】

官方文档：https://www.npmjs.com/package/vue-wxlogin

一个简单的微信登陆组件，方便组件化模块化工程化引入 组件中没有访问dom，并且没有使用hook，所以支持ssr
使用参数与微信官方文档一致 url：https://developers.weixin.qq.com/doc/oplatform/Website_App/WeChat_Login/Wechat_Login.html

1.安装

npm install vue-wxlogin --save-dev

2.直接界面引入

import wxlogin from 'vue-wxlogin';
Vue.component('my-component', {
    components: {
        wxlogin
    }
});

3.使用

<wxlogin></wxlogin>

4.使用例子

<wxlogin
   appid="wx6229defcf1cfxxxx"   
   :scope="'snsapi_login'"   
   :theme="'black'"
   :redirect_uri='encodeURIComponent("https://www.xxx/index")'
   :href="'data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZxxx='"
   rel="external nofollow">
</wxlogin>

Event	Type	Default	Description
appid	String		应用唯一标识，在微信开放平台提交应用审核通过后获得
scope	String		应用授权作用域，拥有多个作用域用逗号（,）分隔，网页应用目前仅填写snsapi_login即可
redirect_uri	String		重定向地址，需要进行UrlEncode
state	String		用于保持请求和回调的状态，授权请求后原样带回给第三方。该参数可用于防止csrf攻击（跨站请求伪造攻击），建议第三方带上该参数，可设置为简单的随机数加session进行校验
theme	String	black	提供"black"、"white"可选，默认为黑色文字描述。
href	String		自定义样式链接，第三方可根据实际需求覆盖默认样式。
self_redirect	Boolean	false	true：手机点击确认登录后可以在 iframe 内跳转到 redirect_uri， false：手机点击确认登录后可以在 top window 跳转到 redirect_uri。
login_type	String	jssdk	sdk的扩展字符串，但是在这里就默认了jssdk，暂时不建议修改。