vue-wxlogin微信扫码登录插件【使用笔记】
文章目录1.安装2.直接界面引入3.使用4.使用例子官方文档:https://www.npmjs.com/package/vue-wxlogin一个简单的微信登陆组件,方便组件化模块化工程化引入组件中没有访问dom,并且没有使用hook,所以支持ssr使用参数与微信官方文档一致 url:https://developers.weixin.qq.com/doc/oplatform/Website_A
·
一个简单的微信登陆组件,方便组件化模块化工程化引入 组件中没有访问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 | <p">true:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri, false:手机点击确认登录后可以在 top window 跳转到 redirect_uri。 |
login_type | String | jssdk | sdk的扩展字符串,但是在这里就默认了jssdk,暂时不建议修改。 |
更多推荐
已为社区贡献7条内容
所有评论(0)