小程序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

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