HTML微信登錄是一個方便快捷的登錄方式,可以使用HTML代碼輕松實現。
首先,需要在網頁中引入微信登錄的JS SDK以及jQuery框架:
<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
接著,在HTML中加入容器用于顯示微信二維碼以及登錄狀態:
<div id="login_container"> <div id="login_frame"></div> <div id="status"></div> </div>
其中,login_frame
用于顯示微信二維碼,status
用于顯示登錄狀態。
最后,利用JS代碼生成微信登錄二維碼并獲取用戶登錄狀態:
$(document).ready(function() { var obj = new WxLogin({ id: "login_frame", appid: "wx1234567890123456", scope: "snsapi_login", redirect_uri: "http://example.com", state: "", style: "", href: "" }); var loginCheck = setInterval(function() { $.ajax({ type: "GET", url: "http://example.com/login_status/", dataType: "json", success: function(data) { if (data.status == "success") { clearInterval(loginCheck); $("#status").text("登錄成功"); } }, error: function(XMLHttpRequest, textStatus, errorThrown) { $("#status").text("登錄失敗"); } }); }, 1000); });
代碼中的appid
為微信公眾號的AppID,redirect_uri
為登錄成功后的回調鏈接,login_status
為獲取登錄狀態的API接口。
通過以上代碼,就可以實現HTML微信登錄了。
上一篇html微信官網代碼
下一篇vue build 命令