小白学习微信小程序的客户端与服务端交互

案例1：用户登录与注册

客户端代码：

// 小程序登录页面
// 获取用户信息
wx.getUserInfo({
  success: function(res) {
    var userInfo = res.userInfo;
    // 用户登录
    wx.login({
      success: function(res) {
        var code = res.code;
        // 发送登录请求到服务端
        wx.request({
          url: 'https://api.example.com/login',
          method: 'POST',
          data: {
            code: code,
            userInfo: userInfo
          },
          success: function(res) {
            // 登录成功
            var token = res.data.token;
            // 将token保存到本地存储
            wx.setStorageSync('token', token);
            // 跳转到主页
            wx.navigateTo({
              url: '/pages/home/home',
            })
          },
          fail: function(res) {
            // 登录失败
          }
        })
      }
    })
  }
})

// 小程序注册页面
// 获取用户信息
wx.getUserInfo({
  success: function(res) {
    var userInfo = res.userInfo;
    // 用户注册
    wx.login({
      success: function(res) {
        var code = res.code;
        // 发送注册请求到服务端
        wx.request({
          url: 'https://api.example.com/register',
          method: 'POST',
          data: {
            code: code,
            userInfo: userInfo
          },
          success: function(res) {
            // 注册成功
            var token = res.data.token;
            // 将token保存到本地存储
            wx.setStorageSync('token', token);
            // 跳转到主页
            wx.navigateTo({
              url: '/pages/home/home',
            })
          },
          fail: function(res) {
            // 注册失败
          }
        })
      }
    })
  }
})

服务端代码：

// 登录接口
app.post('/login', function(req, res) {
  var code = req.body.code;
  var userInfo = req.body.userInfo;
  // 发送code到微信服务器，获取openid和session_key
  wx.login({
    code: code,
    success: function(res) {
      var openid = res.data.openid;
      var session_key = res.data.session_key;
      // 生成token，保存到数据库
      var token = generateToken();
      // 将token返回给客户端
      res.json({
        token: token
      });
    },
    fail: function(res) {
      // 登录失败
      res.status(400).json({
        message: '登录失败'
      });
    }
  })
});

// 注册接口
app.post('/register', function(req, res) {
  var code = req.body.code;
  var userInfo = req.body.userInfo;
  // 发送code到微信服务器，获取openid和session_key
  wx.login({
    code: code,
    success: function(res) {
      var openid = res.data.openid;
      var session_key = res.data.session_key;
      // 生成token，保存到数据库
      var token = generateToken();
      // 将token返回给客户端
      res.json({
        token: token
      });
    },
    fail: function(res) {
      // 注册失败
      res.status(400).json({
        message: '注册失败'
      });
    }
  })
});

案例2：获取用户信息

客户端代码：

// 小程序首页
// 获取用户信息
wx.getSetting({
  success: function(res) {
    // 判断用户是否授权
    if (res.authSetting['scope.userInfo']) {
      // 已授权，直接获取用户信息
      wx.getUserInfo({
        success: function(res) {
          var userInfo = res.userInfo;
          // 将用户信息保存到本地存储
          wx.setStorageSync('userInfo', userInfo);
        }
      })
    } else {
      // 未授权，跳转到授权页面
      wx.navigateTo({
        url: '/pages/authorize/authorize',
      })
    }
  }
})

// 小程序授权页面
// 用户点击授权按钮
getUserInfo: function(e) {
  if (e.detail.userInfo) {
    var userInfo = e.detail.userInfo;
    // 将用户信息保存到本地存储
    wx.setStorageSync('userInfo', userInfo);
    // 返回上一页
    wx.navigateBack();
  }
}

服务端代码：

// 获取用户信息接口
app.get('/user', function(req, res) {
  var token = req.headers.authorization;
  // 验证token
  if (validateToken(token)) {
    // 获取用户信息
    var userInfo = getUserInfo();
    // 返回用户信息给客户端
    res.json(userInfo);
  } else {
    // token验证失败
    res.status(401).json({
      message: 'token验证失败'
    });
  }
});

案例3：上传图片

客户端代码：

// 小程序首页
// 用户选择图片
chooseImage: function() {
  wx.chooseImage({
    success: function(res) {
      var tempFilePaths = res.tempFilePaths;
      // 上传图片到服务端
      wx.uploadFile({
        url: 'https://api.example.com/upload',
        filePath: tempFilePaths[0],
        name: 'image',
        success: function(res) {
          // 上传成功，返回图片地址
          var imageUrl = res.data.imageUrl;
          // 将图片地址保存到本地存储
          wx.setStorageSync('imageUrl', imageUrl);
        },
        fail: function(res) {
          // 上传失败
        }
      })
    }
  })
}

服务端代码：

// 上传图片接口
app.post('/upload', function(req, res) {
  var token = req.headers.authorization;
  // 验证token
  if (validateToken(token)) {
    // 获取临时文件路径
    var tempFilePath = req.files.image.path;
    // 上传图片到云存储
    var imageUrl = uploadImage(tempFilePath);
    // 返回图片地址给客户端
    res.json({
      imageUrl: imageUrl
    });
  } else {
    // token验证失败
    res.status(401).json({
      message: 'token验证失败'
    });
  }
});

以上是关于小程序客户端与服务端交互的三个案例，分别涉及用户登录与注册、获取用户信息和上传图片三个常见的功能。其中，客户端通过wx.request方法向服务端发送请求，服务端根据请求的参数处理相应的逻辑，并返回相应的结果给客户端。客户端在收到服务端返回的结果后，可以根据需要进行相应的处理。

要注意的是，在实际开发中，服务端需要对请求进行身份验证，一般会采用token验证的方式，确保请求来自合法的用户。此外，服务端还需要对上传的文件进行处理，例如将图片上传到云存储，并返回图片的地址给客户端。

以上代码仅作为示例，实际开发中可能会有更多的逻辑和错误处理。