问题
微信官方的代码文档
var obj = new WxLogin({
self_redirect:true,
id:"login_container",
appid: "",
scope: "",
redirect_uri: "",
state: "",
style: "",
href: ""
});
其中的href: 自定义样式链接,第三方可根据实际需求覆盖默认样式。详见文档底部FAQ,这是官方给出的介绍,可以引入自定义的css文件,但是必须是安全性高的,比如https,本地的相对路径是行不通的。当然如果不用https还有另一种方法
解决
利用js的new Blob()和new FileReader()
代码:
//css内容
var content =
".impowerBox .qrcode {width: 200px;}.impowerBox .title {display: none;}.impowerBox .info {width: 200px;}";
//记住一定要注明文件类型是css
var blob = new Blob([content],{type: "text/css;charset=utf-8"});
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onload = function(e) {
var wxqrcode = new WxLogin({
self_redirect: false, //true将页面跳转放在ifream里面 false直接跳转到要跳转的页面
id: "wxqrcode",
appid: "wx70e30a8cb8f91472",
scope: "snsapi_login",
redirect_uri:'你的回调地址',
href: this.result//data:text/css;charset=utf-8;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30uaW1wb3dlckJveCAudGl0bGUge2Rpc3BsYXk6IG5vbmU7fS5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHg7fQ==
});
};
这样就ok了
原文链接:https://blog.csdn.net/weixin_43947294/article/details/88057285