源码搜藏网

1. <view wx:if="{{canIUse}}">
2.     <view class='header'>
3.         <image src='/images/wx_login.png'></image>
4.     </view>
5.  
6.     <view class='content'>
7.         <view>申请获取以下权限</view>
8.         <text>获得你的公开信息(昵称，头像等)</text>
9.     </view>
10.  
11.     <button class='bottom' type='primary' open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="bindGetUserInfo">
12.         授权登录
13.     </button>
14. </view>
15.  
16. <view wx:else>请升级微信版本</view>

1. .header {
2.     margin: 90rpx 0 90rpx 50rpx;
3.     border-bottom: 1px solid #ccc;
4.     text-align: center;
5.     width: 650rpx;
6.     height: 300rpx;
7.     line-height: 450rpx;
8. }
9.  
10. .header image {
11.     width: 200rpx;
12.     height: 200rpx;
13. }
14.  
15. .content {
16.     margin-left: 50rpx;
17.     margin-bottom: 90rpx;
18. }
19.  
20. .content text {
21.     display: block;
22.     color: #9d9d9d;
23.     margin-top: 40rpx;
24. }
25.  
26. .bottom {
27.     border-radius: 80rpx;
28.     margin: 70rpx 50rpx;
29.     font-size: 35rpx;
30. }

1. {
2.     "navigationBarTitleText": "授权登录"
3. }

1. Page({
2.     data: {
3.         //判断小程序的API，回调，参数，组件等是否在当前版本可用。
4.         canIUse: wx.canIUse('button.open-type.getUserInfo')
5.     },
6.     onLoad: function () {
7.         var that = this;
8.         // 查看是否授权
9.         wx.getSetting({
10.             success: function (res) {
11.                 if (res.authSetting['scope.userInfo']) {
12.                     wx.getUserInfo({
13.                         success: function (res) {
14.                             //从数据库获取用户信息
15.                             that.queryUsreInfo();
16.                             //用户已经授权过
17.                             wx.switchTab({
18.                                 url: ''
19.                             })
20.                         }
21.                     });
22.                 }
23.             }
24.         })
25.     },
26.     bindGetUserInfo: function (e) {
27.         if (e.detail.userInfo) {
28.             //用户按了允许授权按钮
29.             var that = this;
30.             //插入登录的用户的相关信息到数据库
31.             wx.request({
32.                 url: getApp().globalData.urlPath + 'hstc_interface/insert_user',
33.                 data: {
34.                     openid: getApp().globalData.openid,
35.                     nickName: e.detail.userInfo.nickName,
36.                     avatarUrl: e.detail.userInfo.avatarUrl,
37.                     province:e.detail.userInfo.province,
38.                     city: e.detail.userInfo.city
39.                 },
40.                 header: {
41.                     'content-type': 'application/json'
42.                 },
43.                 success: function (res) {
44.                     //从数据库获取用户信息
45.                     that.queryUsreInfo();
46.                     console.log("插入小程序登录用户信息成功！");
47.                 }
48.             });
49.             //授权成功后，跳转进入小程序首页
50.             wx.switchTab({
51.                 url: ''  
52.             })
53.         } else {
54.             //用户按了拒绝按钮
55.             wx.showModal({
56.                 title:'警告',
57.                 content:'您点击了拒绝授权，将无法进入小程序，请授权之后再进入!!!',
58.                 showCancel:false,
59.                 confirmText:'返回授权',
60.                 success:function(res){
61.                     if (res.confirm) {
62.                         console.log('用户点击了“返回授权”')
63.                     } 
64.                 }
65.             })
66.         }
67.     },
68.     //获取用户信息接口
69.     queryUsreInfo: function () {
70.         wx.request({
71.             url: getApp().globalData.urlPath + 'hstc_interface/queryByOpenid',
72.             data: {
73.                 openid: getApp().globalData.openid
74.             },
75.             header: {
76.                 'content-type': 'application/json'
77.             },
78.             success: function (res) {
79.                 console.log(res.data);
80.                 getApp().globalData.userInfo = res.data;
81.             }
82.         })；
83.     },
84.     
85. })