1.login.html
<view?class="container">
??<view>
????<view?wx:if="{{canIUse}}"?>
??????<view?class='header'>
????????<image?src='../../images/timg.jpg'></image>
??????</view>
??????<view?class='content'>
????????<view>申請獲取以下權限:</view>
????????<text>獲得你的公開信息(昵稱、頭像、地區及性別等)</text>
??????</view>
??????<button?class='bottom'?type='primary'?open-type="getUserInfo"?lang="zh_CN"?bindgetuserinfo="bindGetUserInfo">
????????授權登錄
??????</button>
????</view>
????<view?wx:else>請升級微信版本</view>
??</view>
</view>
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'
????????????})
??????????}
????????}
????})
??},
