使用插件
https://www.npmjs.com/package/vue-wxlogin
//安装
npm安装vue-wxlogin——save-dev//组件中引入
从“vue-wxlogin”进口wxlogin
…
组件:{wxlogin}
…
之前
html中使用
& lt; wxlogin
:appid=" $ store.getters.wechat_app_id "
:范围=" snsapi_login”
:主题=昂谏?
:redirect_uri=" encodeURIComponent ($ store.getters。base_url +新房/#/新房/结构)”
:href="的数据:文本/css; base64, LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ==薄皉el=巴獠縩ofollow”
比;
& lt;/wxlogin>
之前
参数说明
<李> appid:应用唯一标识(前面认证网页应用中获得)
<李>范围:应用授权作用域,拥有多个作用域用逗号(,)分隔,网页应用目前仅填写snsapi \ _login即可李
<李>主题:提供“黑”、“白”可选,默认为黑色文字描述。
<李> href:自定义样式链接,只能使用https链接或者base64编码的地址李
1,使用https链接地址。
这个很简单,只需要把自定义的css文件上传到服务器,然后使用服务器上的css文件即可(缺点:如果网络比较慢,首先加载默认样式,然后才回使用自定义样式,有一个闪烁的过程)
2,使用base64
https://www.jb51.net/tools/base64.htm(转换base64编码工具)
//自定义二维码样式
.impowerBox .title {
显示:没有;
}
.impowerBox .status。status_browser {
显示:没有;
}
.impowerBox .qrcode {
边界:没有;
宽度:200 px;
身高:200 px;
}
.impowerBox .status {
显示:没有
}
之前
3, href必须使用文本/css模式,生成的base64添加到数据:文本/css; base64的后面就可以了
href="数据:文本/css; base64,
LmltcG93ZXJCb3ggLnRpdGxlIHsNCiAgZGlzcGxheTogbm9uZTsNCn0NCi5pbXBvd2VyQm94IC5zdGF0dXMuc3RhdHVzX2Jyb3dzZXIgew0KICBkaXNwbGF5OiBub25lOw0KfQ0KLmltcG93ZXJCb3ggLnFyY29kZSB7DQogIGJvcmRlcjogbm9uZTsNCiAgd2lkdGg6IDIwMHB4Ow0KICBoZWlnaHQ6IDIwMHB4Ow0KfQ0KLmltcG93ZXJCb3ggLnN0YXR1c3sNCiAgZGlzcGxheTogbm9uZQ0KfQ=="
之前
4,需要注意的地方
redirect_uri:回调地址,必须使用encodeURLComponent()编码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
