内嵌式js微信扫码登录及自定义样式

    xiaoxiao2022-07-02  102

     版权声明:转载请注明出处,谢谢。 https://blog.csdn.net/msllws/article/details/81223949 关于微信扫码登录网站的功能介绍,请阅读官方文档【网站应用微信登录开发指南】

    根据官方文档我们知道微信扫码登录有两种方式

    一种是跳转到一个大黑屏二维码界面进行扫码登录:

    (参见博客:PHP实现跳转式微信扫码登录网站 )

    另外一种是把二维码内嵌到页面中,这样可以自定义一些样式,例如二维码的大小、是否有标题等,默认效果如下:

    (官方文档说的挺好,JS微信登录主要用途:网站希望用户在网站内就能完成登录,无需跳转到微信域下登录后再返回,提升微信登录的流畅性与成功率)

    实现代码如下:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>内嵌式 - 微信扫码登录</title> <!-- 引入微信扫码登录js文件 --> <script type="text/javascript" src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> </head> <body>   <!-- 放置二维码的div -->   <div id="login_container"></div> </body> <script type="text/javascript"> var obj = new WxLogin({   self_redirect:true,   id:"login_container",    appid: "wxbdc5610cc59c1631",    scope: "snsapi_login",    redirect_uri: encodeURIComponent("http://"+window.location.host+"/..."),    state: Math.ceil(Math.random()*1000),    style: "black",   href: "" }); </script> </html>

    最新回复(0)