写给java后端同学的微信小程序快速入门指南——小程序登录并添加新用户到数据库（一）

说在前面

先说下这个系列的定位。我不打算从零开始讲解微信小程序，直接就是搭建一个可以使用的微信小程序框架。主要是想把自己作为一个java后端接触小程序开发之后遇到的一些坑和一些经验分享一下。好让对微信小程序开发感兴趣的后端同学快速上手，以及避免一些弯路。

我在刚刚开始开发小程序找资料的时候，发现资料都是比较分散的。比如想实现登录并和后端进行交互，那只能找到小程序登录并与后端交互。没有整个的一个系列，介绍后端的同学如何系统的开发一个完整的小程序。当然了，我也是刚刚入坑的萌新，这个系列主要是想记录一下自己在开发小程序时的一点心得体会，内容不可避免的会很业余。不过这个系列我的定位就是快速上手，就是讲如何快速的上手小程序整个流程。

小程序的界面

• 整体页面

• 首页详情
  
• 关于

微信小程序授权获取用户信息

这一步不夸张的说，耗费我整整一天的时间。除了微信小程序官方获取用户信息接口变更导致网上好多资料失效（并不是说以前的接口不能使用了。如果使用老接口会在控制台出现warning信息）。然后我们还有一个需求就是讲当前用户传给后台，由后台判断这个用户有没有存在数据库中，如果没有则保存此用户的信息。

那先来解决第一个问题，如何获取用户授权。下面的代码是授权弹出窗的代码。

<view wx:if="{{isHide}}">
  <view wx:if="{{canIUse}}">
    <view class='header'>
      <image src='/images/wx.png'></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>

这是在index页面写的，整个index页面由wx:if wx:else分成了四块，分别是获取授权时显示的模块，用户被禁用时显示的模块，授权成功后显示的页面以及用户禁止授权时的页面。

点击button按钮触发js的bindGetUserInfo方法

bindGetUserInfo: function(e) {
    var that = this;
    //用户允许授权
    if (e.detail.userInfo) {
      var that = this;
      app.globalData.userInfo = e.detail.userInfo
      // 授权成功之后，改变isHide的值，让主页面显示，隐藏授权页面
      that.setData({
        isHide: false
      })
      // 授权成功之后，调用wx.login,获取code传给后台
      wx.getUserInfo({
        success: function(res) {
          var userNick = res.userInfo.nickName;
          var avataUrl = res.userInfo.avatarUrl;
          var gender = res.userInfo.gender;
          wx.login({
            success: function(res) {
              var code = res.code

              wx.request({
                url: 'http://localhost:8080/user',
                method: "POST",
                data: {
                  code: code,
                  nick: userNick,
                  imgUrl: avataUrl,
                  gender: gender
                },
                success: function(res) {
                  // app.globalData.userId = res.data.data.id
                  // app.globalData.userRole = res.data.data.role
                  app.globalData.userInfo = res.data.data
                  app.globalData.canUserEnable = app.globalData.userInfo.status
                  that.setData({ canUserEnable: app.globalData.canUserEnable})
                }
              })
            }
          })
        }
      })
    } else { // 用户拒绝授权
      wx.showModal({
        title: '警告',
        content: '您点击了拒绝授权，将无法进入小程序，请授权之后再进入',
        showCancel: false,
        confirmText: '返回授权'
      })
    }
  }

后台拿到数据之后可以根据用户当前的code，再调用微信平台的相关接口获取用户详细信息，由此来判断当前系统中是否已经存在此用户。