本篇文章给大家谈谈h5登录页面，以及h5登录页面源码对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

本文目录一览：

• 1、H5页面怎么做？
• 2、H5制作网页登录界面
• 3、H5 授权微信第三方登录
• 4、h5pc版怎么返回登录页面
• 5、h5页面获取微信授权登录
• 6、uniapp的H5页面使用微信登录

H5页面怎么做？

在网络上搜索H5制作工具，下面会出现很多的H5页面制作工具，选一个简单好用的。

点击进入到制作工具的官网，点击注册登录。

登录上官网以后，在页面中移动鼠标到“H5管理”，出现两个选项，点击“新建H5”。

新建H5后，系统会提示选择竖屏或者横屏，一般都是在手机端浏览，所以选择竖屏。

选择完后，会出现一个空白模板，需要把之前准备好的图片、文字还有音乐放进去。

把图片、文字和音乐放进去即可以个人的审美观来进行动画、特效等等的设置，点击下方的按钮，刷新预览效果。

H5制作网页登录界面

效果图：

我使用的开发工具是JetBrains Webstorm，自行百度下，IDE很多，只是我很喜欢这个界面：

建立我们的项目：

1.新建一个空项目

2.建立html文件和 images文件夹以及css文件夹

3.提醒下 建立css文件的方法：

在index.html文件中 这样写：

H5 授权微信第三方登录

第一步：拉授权页面进行微信登录

let pages = '?

appid='+自己的appid+'redirect_uri='+授权登录后返回的页面+'response_type=codescope=snsapi_userinfostate=STATE#wechat_redirect'

//我是用的非静默授权，snsapi_userinfo 需要用户手动同意

window.location.href = pages;

第二步：获取页面返回的code

//这个是解析url参数的方法

var getRequest = function() {

var url = window.location.search;

var theRequest = new Object();

if (url.indexOf("?") != -1) {

var str = url.substr(1); //获取url中"?"符后的字串 

var strs = str.split("");

for (var i = 0; i strs.length; i++) {

theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);

}

}

return theRequest;

}

//判断url中是否有code

if(getRequest.code){

// H5获取微信accesstoken

this.getWxAccessToken(getRequest.code);

}

第三步：  通过code换取网页授权access_token(这些步骤后端会处理 前端只需要调用后端的一个接口)

会返回 openid，通过openid登录就好了

h5pc版怎么返回登录页面

h5pc版返回登录页面点击注销或切换用户即可。快捷的方法，按住键盘上的“菜单键”然后再按“L”就能马上锁定电脑，回到选择用户登录的界面。

h5页面获取微信授权登录

window.location.href = '链接地址'

1 第一步：用户同意授权，获取code

2 第二步：通过code换取网页授权access_token

3 第三步：刷新access_token（如果需要）

4 第四步：拉取用户信息(需scope为 snsapi_userinfo)

5 附：检验授权凭证（access_token）是否有效

如果有什么不对或者不懂的地方欢迎私聊哦

uniapp的H5页面使用微信登录

此篇仅为个人的学习记录。参考地址：

我在uniapp的H5页面使用微信登录需要前后端配合，项目目录结构为：

后端接口（springboot项目）：

这是我的测试号

h5登录页面的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于h5登录页面源码、h5登录页面的信息别忘了在本站进行查找喔。