Апплет WeChat -- пакет wx.request и его использование

Апплет WeChat

1. Введение

  • Основы мини-программы WeChat
  • знакомыйwebДрузья развития могут быть правыaxiosМягкое место.
  • wx.requestвторичная упаковка
  • apiцентрализованное управление и использование

2. КонфигурацияbaseUrl

  1. Как правило, в проектеbaseUrlпрефикс доменного имени, логинcode,用户信息и т. д. настраиваются вapp.jsсередина
//app.js
App({
  onLaunch: function () {
    wx.login({
      success: res => {
        if (res.code) {
          this.globalData.loginCode = res.code   // 获取的code码，以进一步换取用户信息
          // res: {
          //   code: "061Zltjh1sXj6s0z96hh1Z1njh1Zltj5"
          //   errMsg: "login:ok"
          // }
        } else {
          console.log('登录失败！' + res.errMsg)
        }
      }
    })
  },
  globalData: {
    userInfo: null,
    loginCode: null,
    baseUrl: 'https://...'
  }
})

3. Пакетwx.request

  1. Создано в каталоге апплетаutilsпапку и создайте ее в папкеrequest.jsдокумент
// request.js
const request = options => {
  return new Promise((resolve, reject) => {
    const { data, method } = options
    if(data && method !== 'get') {
      options.data = JSON.stringify(data)
    }
    wx.request({
      header: { 'Content-Type': 'application/json' },
      ...options,
      success: function(res) {
        if(res.data.code === 2000) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: function(res) {
        reject(res.data)
      }
    })
  })
}
export default request

4.apiцентрализованное управление и использование

  1. Создано в каталоге апплетаapiпапку и создайте ее в папкеuser.jsФайл (имя файла рекомендуется называть в честь модуля)
  2. использовалaxiosдрузья должны чувствовать себя знакомыми
// user.js
import request from '../utils/request.js'
// baseUrl也可拼接在request.js中，当有多个鉴权模块，放在这里更灵活
const baseUrl = getApp().globalData.baseUrl

export function apiLogin(data) {
  return request({
    url: `${baseUrl}/user/login`,
    method: 'post',
    data
  })
}

export function apiGetUserInfo() {
  return request({
    url: `${baseUrl}/user/userInfo`,
    method: 'get'
  })
}

export function apiModifyUserPassword(data) {
  return request({
    url: `${baseUrl}/user/modifyPassword`,
    method: 'put',
    data
  })
}

export function apiLogout() {
  return request({
    url: `${baseUrl}/user/logout`,
    method: 'delete'
  })
}
  1. использовать на странице
// pages/login/login.js
import { apiLogin } from '../../api/user.js'
Page({
  onLoad: function (options) {
    this.login()
  },
  login() {
    apiLogin({
      // api params
    }).then(res => {
      // handle success
    }).catch(error => {
      // handle error
    })
  }
})

5. Эпилог

  1. из-за вовлеченияES6синтаксис, который необходимо включить в локальных настройкахES6ПеременаES5
  2. Следует уделить внимание развитию малых программthisНаправленная проблема.
  3. Спасибо за просмотр.Если есть какие-либо недостатки, пожалуйста, поправьте меня.Добро пожаловать, чтобы оставить сообщение для обсуждения.
Категории