小程序api封装（方法二）

在根目录新建http文件夹 新建 request.js文件 apiConfig.js文件

// request.js文件
const request = {
  // 将接口参数和公共参数合并
  buildParams(params) {
    // const uToken = wx.getStorageSync('uToken');
    const baseParams = {
      // 用户token
      uToken: wx.getStorageSync('uToken')
    };
    return Object.assign({}, baseParams, params);
  },
  // post请求
  postData(url, params, isToken = false) {
    // isToken 登录接口是否需要uToken
    const data = isToken ? params : this.buildParams(params);
    return new Promise((resolve, reject) => {
      wx.request({
        url,
        method: 'POST',
        data,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        success(res) {
          // console.log('post', res);
          if(res.statusCode === 200) {
            resolve(res.data);
          } else {
            reject(res.errMsg);
          }
        },
        fail(error) {
          console.log('error',error)
          wx.showToast({
            title: '服务器内部错误',
            icon: 'none',
            duration: 1500
          })
          reject(error);
        },
        complete() {
          setTimeout(() => {
            wx.hideLoading();
          },1500)
        }
      })
    })
  },
  // get请求
  getData(url, params, isToken = false) {
    // isToken 登录接口不需要uToken
    const data = isToken ? params : this.buildParams(params);
    return new Promise((resolve, reject) => {
      wx.request({
        url,
        method: 'GET',
        data,
        header: {
          'content-type': 'application/json'
        },
        success(res) {
          // console.log('get', res);
          if(res.statusCode === 200) {
            resolve(res.data);
          } else {
            reject(res.errMsg);
          }
        },
        fail(error) {
          console.log('error',error)
          wx.showToast({
            title: '服务器内部错误',
            icon: 'none',
            duration: 1500
          })
          reject(error);
        },
        complete() {
          setTimeout(() => {
            wx.hideLoading();
          },1500)
        }
      })
    })
  }
};
module.exports = request
// export default request;

/**
 * 小程序配置文件 apiConfig.js
 */
// 此处主机域名是腾讯云解决方案分配的域名
const HOST_IP = "https://127.0.0.1:8080/xx" // IP地址
const HOST_TEST = "https://xx.xx.com/xx" //测试环境：
const HOST_PRO = "https://xx.xx.com/xx" //生产环境：
const HOST = HOST_TEST; // 替换host
let config = {
  //*小程序各个接口*
  userLogin: `${HOST}/member/login.htm`, //用户登录

  // 返回上一页
  goBackOne: function () { 
    let timer = setTimeout(function () {
      let pages = getCurrentPages(); //页面栈
      let currPage = pages[pages.length - 1]; //当前页面
      let prevPage = pages[pages.length - 2]; //上一个页面
      wx.navigateBack({
        delta: 1
      })
    }, 2000)
  },
  // 返回上一页并刷新上一页数据
  goBack: function () { 
    let timer = setTimeout(function () {
      let pages = getCurrentPages(); //页面栈
      let currPage = pages[pages.length - 1]; //当前页面
      let prevPage = pages[pages.length - 2]; //上一个页面
      prevPage.getData(); //直接调用上一个页面的方法刷新
      wx.navigateBack({
        delta: 1
      })
    }, 2000)
  },
  //不返回上一页 但是刷新上一页
  goPerPage: function () { 
    let pages = getCurrentPages(); //页面栈
    let currPage = pages[pages.length - 1]; //当前页面
    let prevPage = pages[pages.length - 2]; //上一个页面
    prevPage.getData(); //直接调用上一个页面的方法刷新
  }
};
module.exports = config

然后再在app.js扩展 通过扩展 Page 页面对象实现

 

//app.js
// import request from "./http/request"  export default request 方式需要 import  进来
const request = require('./http/request');
const apiConfig = require('./http/apiConfig');
App({
  onLaunch: function () {
    console.log('小程序启动完毕')
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 通过扩展 Page 页面对象实现常见需求
    const originalPage = Page;
    console.log('Page', request)
    Page = function (pageConfig) {
      pageConfig.$request = request;
      pageConfig.$config = apiConfig;
      return originalPage(pageConfig);
    };
    this.$request = request;
    this.$config = apiConfig;
    console.log('Page', this, Page)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })

    try {
      const res = wx.getSystemInfoSync()
      console.log(res, '设备信息对象')
      this.globalData.deviceInfo = res;
    } catch (e) {
      // Do something when catch error
    }
    // 获取用户信息
    wx.getSetting({
      success: res => {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称，不会弹框
          wx.getUserInfo({
            success: res => {
              // 可以将 res 发送给后台解码出 unionId
              this.globalData.userInfo = res.userInfo

              // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
              // 所以此处加入 callback 以防止这种情况
              if (this.userInfoReadyCallback) {
                this.userInfoReadyCallback(res)
              }
            }
          })
        }
      }
    })
  },
  globalData: {
    userInfo: null,
    deviceInfo: {}
  }
})

 

页面调用也分两种情况 一种是组件页面一种是正常的page页面

  // 正常页面调用接口
  login:function(event){
    let self = this;
    wx.showLoading({
      title: '正在登录',
      mask: true
    })
    let opt = { 
      name: 'self.data.userName',
      pwd: 'self.data.userPas',
    }
    // wx.redirectTo({
    //   //关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
    //   url: '/pages/index/index'
    // })
    wx.hideLoading();
    console.log(this,this.$request,'this.$request')
    this.$request.postData(this.$config.userLogin, opt, true).then(res => {
      console.log('res',res);
      if (res.returnResult === 200){
        // 缓存用户
        wx.setStorageSync('uToken', res.returnData);
        wx.showToast({
          title: '登录成功',
          icon: 'success',
          mask: true,
          duration: 1000
        })
        setTimeout(() => {
          wx.switchTab({
            url: '/pages/tabBar/myPage/myPage'
          })
        }, 500)
      } else {
        self.setData({
          userPas: ''
        })
        wx.showToast({
          title: (res.returnModelInfo || {}).message || res.returnDetail || '服务器内部错误',
          icon: 'none',
          duration: 2000
        })
      }
    })
  },

组件里面调用

注意这里得先在 Component 上面拿到app实例  const app = getApp() 

let opt = {}; // 接口入参
console.log('this.$request', app, this.$request)
app.$request.post(app.$config.xxx, opt).then(res => {
  console.log('res', res)
  if (res.success) {
    
  }
}).catch(error => {
  console.log('error', error)
})

注意小程序还可以使用用混入逻辑（公共js部分）

// 组件内调用
var myBehavior = require('../../../mixins/my-behavior')

使用 behaviors: [myBehavior], 类似vue 的 mixins

原创未经允许不得转载！！！转载请注明出处~谢谢合作；