免费微信登陆界面html模板,微信小程序:使用微信授权登录以及页面模板

ab43bdaa5f25

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'

})

}

}

})

},