簡單封裝微信小程序

一、不同環境配置封裝

新建config文件夾，根據自己有不同環境設置不同的js文件

 

具體js文件內容：

exports.config = {
    requestHost: 'https://******.com.cn',
    APPID:'*******',
    Business: {
        'jiaxiao': '1'
    }
}

 

新建api.js文件(放哪里根據自己喜好)，用json形式來儲存接口地址：

exports.api = {
  'do' : {
    'login': '/merchant/do/login',
  },
  'payment' : {
    'pay': '/V2/TokenPay/pay',
  }
}

 配置完成后在app.js中就可以調用了，

//app.js

App({
  onLaunch: function (options) {
    let env = options.query.env ? options.query.env : "product";
    var config = require("config/config." + env + ".js");
    this.globalData = config.config;
    //獲取接口信息
    var api = require('api.js');
  },

})

在頁面中調用接口時只要引入先引入

const app = getApp();

就可以通過變量來獲取接口地址了。

 

封裝微信小程序get post方法：

const app = getApp();

const setToken = token => {
  return wx.setStorageSync('token', token);  
}

const getToken = () =>{
  return wx.getStorageSync('token');
}

const judge = () =>{
  var host = app.globalData.requestHost;
  // console.log(host + app.api.do.token)
  wx.request({
    url: host + app.api.do.token,
    data: {
      token: getToken() ? getToken(): ''
    },
    header: {
      'content-type': 'application/json' // 默認值
    },
    success: function (res) {
      if (res.data.ret_code != 200) {
        wx.navigateTo({
          url: "/pages/login/index"
        })
      }
    },
    fail: function (error) {
      wx.navigateTo({
        url: "/pages/login/index"
      })
    }
  })
  //設置title
  wx.setNavigationBarTitle({
    title: wx.getStorageSync('merchantName') ? wx.getStorageSync('merchantName') : ''
  })
}

const get = (url, data, callback) => {
  //判斷是否登錄、token是否過期
  var host = app.globalData.requestHost;
  judge();

  if(data == false){
    var data = { 
        token: wx.getStorageSync('token'),
        business: app.globalData.Business.jiaxiao
    }
  }else{
        data.token = wx.getStorageSync('token');
        data.business = app.globalData.Business.jiaxiao;
  } 
  wx.request({
    url: host+url,
    data: data,
    header: {
      'content-type': 'application/json'
    },
    success: res => {
      callback(res);
    },
  })
}

const post = (url, data, callback) => {
  //判斷是否登錄、token是否過期
  var host = app.globalData.requestHost;
  judge();
  //設置title

  // console.log(wx.getStorageSync('token'))
  wx.setNavigationBarTitle({
    title: wx.getStorageSync('merchantName') ? wx.getStorageSync('merchantName') : ''
  })

  if (data == false) {
    var data = {
        token: wx.getStorageSync('token'),
        business: app.globalData.Business.jiaxiao
    }
  } else {
    data.token = wx.getStorageSync('token');
  }
  // console.log(method)
  wx.request({
    url: host + url,
    method: 'POST',
    data: data,
    header: {
      'content-type': 'application/x-www-form-urlencoded'
    },
    success: res => {
      callback(res);
    },
  })
}


module.exports = {
  setToken: setToken,
  getToken: getToken,
  judge: judge,
  get: get,
  post: post
}

因為小程序接口都是對外的開放接口，所以會存在安全性問題，為了接口安全每次都要傳一個‘token’來校驗請求的安全性，上邊封裝的意義也在此處，不用每次都傳遞token了，調用也很簡單：

//頁面引入
var request = require('../../utils/request.js');

    request.get(
      app.api.pay.pay,
      false, function (res) {
          console.log(res)
      });
//request.get(接口地址，是否有參數，結果回調)