<!--pages/login/index.wxml-->
<view>
  <view class="container">
    <view class="wechatapp">
      <!-- <image class="header" src="/images/wechatapp.png"></image> -->
      <view class="header">
        <open-data class="" type="userAvatarUrl"></open-data>
      </view>
    </view>
    <view class="auth-title">申请获取以下权限</view>
    <view class="auth-subtitle">获得你的公开信息(昵称、头像等)</view>

    <button wx:if="{{canIUseGetUserProfile}}" class="login-btn" lang="zh_CN" catchtap="GetUserInfo">授权登录</button>
    <button wx:else class="login-btn" openType="getUserInfo" lang="zh_CN"
      bindgetuserinfo="bindGetUserInfo">授权登录</button>
    <button class="login-btn" bindtap="backUrl">取消授权</button>

  </view>
</view>

/* pages/login/index.wxss */
.page {
  background: #fff;
  font-size: 32rpx;
}

.container {
  padding: 0 60rpx;
}

.wechatapp {
  padding: 80rpx 0 48rpx;
  border-bottom: 1rpx solid #e3e3e3;
  margin-bottom: 72rpx;
  text-align: center;
}

.wechatapp .header {
  width: 190rpx;
  height: 190rpx;
  border: 2px solid #fff;
  margin: 0rpx auto 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 1px 0px 5px rgba(50, 50, 50, 0.3);
}

.auth-title {
  color: #585858;
  font-size: 40rpx;
  margin-bottom: 40rpx;
}

.auth-subtitle {
  color: #888;
  margin-bottom: 88rpx;
}

.login-btn {
  border: none;
  /* height: 88rpx;
  line-height: 88rpx; */
  background: #04be01;
  color: #fff;
  font-size: 11pt;
  border-radius: 999rpx;
  width: 45%;
  margin: 20rpx 0;
}

.login-btn::after {
  display: none;
}

.login-btn.button-hover {
  box-shadow: inset 0 5rpx 30rpx rgba(0, 0, 0, 0.15);
}

// pages/login/index.js
const app = getApp()
import {
  request
} from '../../request/index.js'
Page({

  /**
   * 页面的初始数据
   */
  data: {
    canIUseGetUserProfile: false,
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    // console.log(options)
    if (wx.getUserProfile) {
      console.log(11)
      this.setData({
        canIUseGetUserProfile: true
      })
    }
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  /**
   * 授权
   */
  bindGetUserInfo(e) {
    console.log(e.detail.userInfo)
    app.globalData.userInfo = e.detail.userInfo
    if (e.detail.userInfo) {
      // 获取openid  
      app.globalData.hasLogin = true;
      app.globalData.userInfo = e.detail.userInfo
      let userinfo = e.detail.userInfo
      wx.login({
        success(res) {
          if (res.code) {
            console.log(res)
            let code = res.code;
            //发起网络请求
            request({
              url: app.globalData.base_url + '?m=Index&a=is_login',
              data: {
                code: code
              }
            }).then((res) => {
              var res = JSON.parse(res.data);
              console.log(res);
              userinfo.openid = res.openid
              wx.setStorageSync("userinfo", userinfo);
              // 存储用户信息到服务器
              request({
                url: app.globalData.base_url + '?m=Index&a=userinfo_save',
                data: {
                  nickname: userinfo.nickName,
                  avatarurl: userinfo.avatarUrl,
                  country: userinfo.country,
                  province: userinfo.province,
                  city: userinfo.city,
                  gender: userinfo.gender,
                  openid: userinfo.openid,
                  code: code,
                  inviteid: app.globalData.inviteId
                }
              }).then((res) => {
                // console.log(res);
                app.globalData.userInfo.member_id = res.data.member_id;

                userinfo.member_id = res.data.member_id

                wx.setStorageSync("userinfo", userinfo);

                // 授权成功跳转首页
                wx.navigateTo({
                  url: '/pages/index/index',
                })

              })
            });
          } else {
            console.log('登录失败!' + res.errMsg)
          }
        }
      })

    } else {
      wx.showModal({
        title: '授权提示',
        content: '小程序需要您的微信授权才能使用哦~ '
      })
    }
  },
  // 授权
  GetUserInfo(e) {
    wx.getUserProfile({
      desc: '正在获取', //不写不弹提示框
      success: function (res) {
        console.log('获取成功: ', res)
        // 获取openid  
        app.globalData.hasLogin = true;
        app.globalData.userInfo = res.userInfo
        let userinfo = res.userInfo
        wx.login({
          success(res) {
            if (res.code) {
              console.log(res)
              let code = res.code;
              //发起网络请求
              request({
                url: app.globalData.base_url + '?m=Index&a=is_login',
                data: {
                  code: code
                }
              }).then((res) => {
                var res = JSON.parse(res.data);
                // console.log(res);
                userinfo.openid = res.openid
                wx.setStorageSync("userinfo", userinfo);
                app.globalData.userinfo = userinfo;
                // 存储用户信息到服务器
                request({
                  url: app.globalData.base_url + '?m=Index&a=userinfo_save',
                  data: {
                    nickname: userinfo.nickName,
                    avatarurl: userinfo.avatarUrl,
                    country: userinfo.country,
                    province: userinfo.province,
                    city: userinfo.city,
                    gender: userinfo.gender,
                    openid: userinfo.openid,
                    code: code,
                    inviteid: app.globalData.inviteId
                  }
                }).then((res) => {

                  app.globalData.userInfo.member_id = res.data.member_id;

                  userinfo.member_id = res.data.member_id

                  wx.setStorageSync("userinfo", userinfo);
                  // 授权成功跳转首页
                  wx.navigateTo({
                    url: '/pages/index/index',
                  })
                })
              });
            } else {
              console.log('登录失败!' + res.errMsg)
            }
          }
        })

      },
      fail: function (err) {
        // console.log("获取失败: ",err)
        wx.showModal({
          title: '授权提示',
          content: '小程序需要您的微信授权才能使用哦~'
        })
      }
    })
  },
  backUrl() {
    wx.navigateTo({
      url: '/pages/index/index',
    })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

免责申明:

1. 本站所有教程、文章或资源分享目的仅供大家学习和交流!
2. 如有无法查看或链接失效,麻烦请报告联系管理员处理!
3. 本站无法保证资源或其时效性,恕不接受任何提问。
4. 在本站下载的源码严禁杜绝任何形式的正式商业用途,请去程序官方购买。 所有资料均来自于网络,版权归原创者所有!本站不提供任何保证,并不承担任何法律责任,如果对您的版权或者利益造成损害,请提供相应的资质证明,我们将于3个工作日内予以删除。

学习交流联系

立即查看 了解详情