简单封装微信小程序

一、不同环境配置封装

新建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(接口地址，是否有参数，结果回调)