免费微信登陆界面html模板,微信小程序:使用微信授权登录以及页面模板
1.login.html
申请获取以下权限:
获得你的公开信息(昵称、头像、地区及性别等)
授权登录
请升级微信版本
2.login.css
.container{
display: flex;
justify-content: center;
}
.header {
margin: 90rpx 0 50rpx;
border-bottom: 1px solid #ccc;
text-align: center;
width: 650rpx;
height: 300rpx;
line-height: 450rpx;
}
.header image {
width: 200rpx;
height: 200rpx;
}
.content {
margin-bottom: 90rpx;
}
.content text {
display: block;
color: #9d9d9d;
margin-top: 40rpx;
}
.bottom {
border-radius: 80rpx;
margin: 70rpx 50rpx;
font-size: 30rpx;
font-weight: 200;
}
3.login.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
//判断小程序的API,回调,参数,组件等是否在当前版本可用。
canIUse: wx.canIUse('button.open-type.getUserInfo')
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
bindGetUserInfo: function(e) {
if (e.detail.errMsg!='getUserInfo:fail auth deny') {
app.isLogin();
wx.reLaunch({
url: '/pages/index/index'
})
} else {
wx.showModal({
title: '警告',
content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!!!',
showCancel: false,
confirmText: '返回授权',
success: function(res) {
// 用户没有授权成功,点击了返回授权
if (res.confirm) {}
}
});
}
},
})
4.app.js
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || [];
logs.unshift(Date.now());
wx.setStorageSync('logs', logs);
this.isLogin();
},
globalData: {
userInfo: null
},
// 微信登陆
isLogin: function(){
var that = this;
// 查看是否授权
wx.getSetting({
success: function(res) {
if (res.authSetting['scope.userInfo']) {
wx.getUserInfo({
success: function(res) {
that.globalData.userInfo = res.userInfo;
// 根据自己的需求有其他操作再补充
// 我这里实现的是在用户授权成功后,调用微信的 wx.login 接口,从而获取code
wx.login({
success: res => {
// 获取到用户的 code 之后:res.code
// console.log("用户的code:" + res.code);
// 可以传给后台,再经过解析获取用户的 openid
// 或者可以直接使用微信的提供的接口直接获取 openid ,方法如下:
// wx.request({
// // 自行补上自己的 APPID 和 SECRET
// url: 'https://api.weixin.qq.com/sns/jscode2session?appid=自己的APPID&secret=自己的SECRET&js_code=' + res.code + '&grant_type=authorization_code',
// success: res => {
// // 获取到用户的 openid
// console.log("用户的openid:" + res.data.openid);
// }
// });
}
});
}
});
} else {
// 用户没有授权
wx.navigateTo({
url: '/pages/login/login'
})
}
}
})
},
免费微信登陆界面html模板,微信小程序:使用微信授权登录以及页面模板相关推荐
- 微信小程序云开发用户身份登录_微信小程序开发用户授权登录(下)
如果开发者拥有多个移动应用.网站应用.和公众帐号(包括小程序),可通过 UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用.网站应用和公众帐号(包括小程序),用户的 Un ...
- 微信网页开发:微信内h5使用wx-open-launch-weapp打开小程序,微信内h5使用wx-open-launch-app打开App的方案
需求场景: 当我们需要使用在微信客户端打开的h5页面,在页面上打开微信小程序或者唤起App时,我们需要使用微信js-sdk提供的开放标签能力.这其中:使用wx-open-launch-weapp标签打 ...
- 微信公众账号后台怎么解除小程序_微信小程序怎么注销账号_微信小程序注销方法_快吧小程序...
微信小程序一直存在一个问题:开发者不能注销自己的小程序.之前当开发者需要彻底清除小程序信息时,只能够通过暂停服务或关闭"允许被搜索"的方式曲线救国.现在,这个问题终于解决了. 在微 ...
- 微信公众账号后台怎么解除小程序_微信小程序解除绑定 微信小程序怎么授权...
该如何注销小程序? 微信小程序目前无法取消,也是微信小程序最脆弱.最无助的地方.如果你确定你不想要这个小程序,你可以转移和改变主题和其中的所有信息,这样你的小程序就会变成别人的小程序,与你无关.相当于 ...
- 微信小程序获取手机号授权登录
小程序中有很多地方都会用到注册用户信息的地方,用户需要填写手机号等,有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 1.getPhoneNumber这个组件通过button来实现(别的标签无 ...
- 2023年微信小程序获取手机号授权登录注册详细教程,包含服务端教程
前言 小程序中有很多地方都会用到用户的手机号,比如登陆注册,填写收货地址等等.有了这个组件可以快速获取微信绑定手机号码,无须用户填写. 网上大多数教程还是往年的,而微信官方的api已做了修改.本篇文章 ...
- 微信公众账号后台怎么解除小程序_微信小程序 后台登录(非微信账号)实例详解...
微信小程序 后台登录 实现效果图: 最近写了一个工具类的小程序,按需求要求不要微信提供的微信账号登录,需要调取后台登录接口来登录.由于小程序大部分都是调取微信信息登录,很少有调用自己后台来登录的,所以 ...
- 微信小程序:用户授权登录
点击"微信一键登录"按钮,触发login_weixi事件 先查看是否勾选了底部按钮,勾选了就获取用户信息,每次请求成功都会弹出授权窗口,把用户信息缓存到storage里面,方便下次 ...
- 微信小程序入门之授权登录
微信小程序 一.实现微信小程序授权登录 微信小程序每次获得用户的信息时需要授权登录,下面的代码可以实现以下功能 Page({data: {nickName:''},dianji(){console.l ...
- 微信小程序判断是否授权登录(未登录出现弹窗跳转登录页面)
目录 API 代码实现 API 获取用户当前设置 wx.getSetting:微信官方文档 获取用户信息 wx.getUserInfo:微信官方文档 微信小程序弹窗 wx.showToast:微信官方 ...
最新文章
- js 时间戳与日期处理集合
- 设计师必备网址 百度MUX
- 【机器视觉】 dev_set_preferences算子
- 深度学习:又一次推动AI梦想(Marr理论、语义鸿沟、视觉神经网络、神经形态学)
- 字体--Ubuntu手记之系统配置
- 大数据学习笔记52:Flume Interceptors(Flume拦截器)
- Python re模块将字符串分割为列表
- ARM汇编学习-工具篇
- 计算一棵树的深度和宽度[Treeview的深度和宽度](多题头的表格问题解决的基础)...
- [BZOJ1602BZOJ1787BZOJ2144]树上LCA的算法巩固练习
- photon 服务器操作系统,photon 云服务器
- 检测和语义分割_分割和对象检测-第4部分
- C语言练习——百钱百鸡
- java 斑马 打印 图片_Zebra打印机不会打印ZPL格式
- 树莓派做BT下载器:transmission
- 机器视觉应该先看什么书?
- web前端emoji表情
- 中文计算机期刊影响因子排名,最新计算机类中文核心期刊影响因子排名
- Oracle中Blob转换成Clob
- 传奇开区发布广告和选择广告投放网站的那些事
热门文章
- 基于 MATLAB 的图像中汉字识别
- excel求回归直线方程的公式_如何用excel做线性回归分析-用excel做线性回归分析求回归方程...
- 无人机倾斜摄影测量土方计算
- 程序员转岗产品经理有哪些优势和劣势?
- struct template 函数 特化
- linux mtd手动烧写固件,路由器固件的几种烧写方式
- 电脑出现GRUB4DOS 0.4.5c、、、怎么办
- Python安装shapely包出现WindowsError: [Error 126]解决方案
- Zabbix3.4监控Linux主机CPU温度
- html回调函数,JS 回调函数