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

╰半夏微凉° 2022-02-01 05:07 301阅读 0赞

### 说在前面 ###

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

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

### 小程序的界面 ###

*  **整体页面**

![小程序整体页面][20190513154730167.gif]

*  **首页详情**  
    ![在这里插入图片描述][2019051315530581.gif]
 *  **关于**

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

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

那先来解决第一个问题，如何获取用户授权。下面的代码是授权弹出窗的代码。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Zlbmdwb2ppYW4_size_16_color_FFFFFF_t_70]

<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，再调用微信平台的相关接口获取用户详细信息，由此来判断当前系统中是否已经存在此用户。

[20190513154730167.gif]: /images/20220201/709f707484cf4e819cd3c79456fed80b.png
[2019051315530581.gif]: /images/20220201/9984caf0cee34817b96e97d630d0ff7a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2Zlbmdwb2ppYW4_size_16_color_FFFFFF_t_70]: /images/20220201/311b0f8e895742dea6e84dcd1b0f6284.png