微信网页授权二维码样式修改

努力_小风尘
1,139 阅读2分钟

前言

这个文章是之前在另外一个博客网站去写的，当时只是简单的贴个代码说明怎么改的，现在把它拷过来，然后在详细的描述一下

官方代码

微信怎么授权的网页的过程就不做过多的描述了，应该没有比官方更详细的说明了 微信官方文档

  • 代码
var obj = new WxLogin({
     self_redirect:true,
     id:"login_container", 
     appid: "", 
     scope: "", 
     redirect_uri: "",
     state: "",
     style: "",
     href: ""   
});

其中的href： 自定义样式链接，第三方可根据实际需求覆盖默认样式。详见文档底部FAQ,这是官方给出的介绍，可以引入自定义的css文件，但是必须是安全性高的，比如https，本地的相对路径是行不通的。当然如果不用https还有另一种方法

前瞻知识

new FileReader()

参考：www.cnblogs.com/LO-gin/p/68…

FileReader()构造函数拥有了用js处理文件的能力，FileReader拥有4个方法，3个读取文件的方法，1个中断的方法

方法名 参数 描述
abort none 中断读取操作
readAsBinaryString file 将文件读取为二进制
readAsDataUrl file 将文件读取为DataUrl
readAsText file,[encoding] 将文件读取为文本

在web的开发过程中，我们可能用到的就是readAsDataUrl的方法了，这个就是可以实现上传图片的预览功能，可以把data:url这种格式的图片文件直接赋值给html的src属性，不用等到后台返回的图片链接

   //图片预览部分代码
    var file = document.getElementById("file").files[0]; 
    var reader = new FileReader(); 
    reader.readAsDataURL(file); 
    reader.onload=function(e){ 
        var result=document.getElementById("result"); 
        //显示图片文件 
        result.innerHTML='<img src="' + this.result +'" alt="" />'; 
    }

简单来说，这玩意可以读取文件，并读取为某种格式，保存在result中

new Blob()

Blob对象表示一个不可变、原始数据的类文件对象(类文件二进制数据)，如果从其他非blob对象和数据构造一个 Blob，就需要Blob()构造函数

Blob(blobParts[, options])

返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。

参数 类型 描述
blobParts Array 每一项连接起来构成Blob对象的数据[domString,string...]
options 可选,字典格式类型 包含tyle,endings属性(具体可以去我所写的参考链接) 
//MDN例子
var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});

还是简单来说，理解为可以将特定字符串生成类文件对象，so，可以用FileReader去读取它

实现

不多BB-.-

//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,
        id: "wxqrcode",
        appid: "",
        scope: "",
        redirect_uri:'你的回调地址',
        href: this.result//data:text/css;charset=utf-8;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30uaW1wb3dlckJveCAudGl0bGUge2Rpc3BsYXk6IG5vbmU7fS5pbXBvd2VyQm94IC5pbmZvIHt3aWR0aDogMjAwcHg7fQ==
      });
};
avatar
文章
阅读
粉丝