轻松掌握短视频去水印微信小程序开发：入门指南（1）

2023-11-25 09:29:51

在短视频平台盛行的今天，去水印的需求日益旺盛。作为一名开发人员，我们有责任满足用户的需求，开发出一款能够轻松去水印的微信小程序。本教程将带领您一步步学习如何实现这一目标。

一、封装网络请求

首先，我们先简单封装一个统一的http请求方法，以便在后续开发中复用。我们使用Bearer Token作为身份认证方式，并遵循Restful风格API的规范，状态码与http请求状态码保持一致。

// 封装网络请求方法
const request = (url, method, data) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url,
      method,
      data,
      header: {
        'Authorization': 'Bearer ' + wx.getStorageSync('token')
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(res.errMsg)
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

二、登陆逻辑实现

接下来，我们实现登陆功能。由于微信小程序要求开发者必须提供一个opentype为getUserInfo的button来获取用户的授权，因此我们需要在小程序中添加此button并绑定事件。

<!-- index.wxml -->
<button type="getUserInfo" bindgetuserinfo="handleGetUserInfo">授权登陆</button>

// index.js
Page({
  handleGetUserInfo(e) {
    if (e.detail.userInfo) {
      // 用户授权成功，获取用户信息
      const userInfo = e.detail.userInfo
      // 调用登陆接口，获取token
      request('/api/login', 'POST', { userInfo })
        .then(res => {
          // 存储token到本地存储
          wx.setStorageSync('token', res.token)
          // 跳转到下一个页面
          wx.navigateTo({
            url: '/pages/main/main'
          })
        })
        .catch(err => {
          // 登陆失败，提示错误信息
          wx.showToast({
            title: '登陆失败',
            icon: 'none'
          })
        })
    } else {
      // 用户拒绝授权，提示错误信息
      wx.showToast({
        title: '请先授权',
        icon: 'none'
      })
    }
  }
})