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

原創未經允許不得轉載！！！轉載請注明出處~謝謝合作；