小程序调用后端接口服务 配置文件详解

前言：为了开发阶段的效率更高，方便项目接口管理，在开发web项目时，我们需要把后端提供的接口地址进行配置，这样我们自己在调用时，要方便得多，利己利人。在配置小程序接口地址时，和web的配置大同小异，下面总结几点配置小程序接口地址的思路：

1、所有接口地址，要丢在一个对象里【为了方便下面解释，这里设置一个对象名：config】，为什么了，因为要对外暴露，方便外部访问，这样【key:value】方式是最合理的，那就是对象了。

2、真实接口地址，也就是对象键值对的value，要用英文模式下Tab键的上一颗按键"`"包起来。两个为一对，包一个接口地址，多一个少一个都要报错。其他符号【""、''】是不行的，写了就报错无效的url。而我们以往配置web接口文件时，只需英文模式【""、‘’】引号，单或者双引号就阔以了。

小注："`" 英文名叫accent，表示重音符，一个简单的符号而已。

3、接口地址都写好，丢进对象里了，你想试试能不能调，这时，是不行。因为还缺少一个接口所在对象【config】对外的返回【module.exports = config】，不好理解的话，可以理解为一个方法的返回值。

     为了理解这个返回【module.exports = config】的方式，这里解释下：

    a、首先require 在小程序中用来加载外部js文件，而 exports 和 module.exports 则用来导出代码。

       示例：【const home_config= require('../../config').home_config;  】  

    b、module.exports的初始值是一个空对象{}，而exports是指向 module.exports 的一个引用。

      示例：【module.exports = config】

   c、require()返回的是module.exports。

    示例：【const home_config= require('../../config').home_config;  】《==》【const home_config= config.home_config;】

     

    这样，是不是理解了为什么在接口地址都丢进对象里后，还要加一个对外的返回。这样在其他js文件就可以调用所配置接口地址。为了更好的理解接口配置，下面写了一个小程序接口配置文件config.js的示例

// config.js
/**
 * 小程序后端接口配置文件
 */
var host = "https://www.baidu.com"  //域名要在小程序的管理平台配置好，如果出现调用时报错，无效的域名，可在微信开发工具左边点项目-》配置信息-》看一下配置的域名【request合法域名】有没有刷新下来，没有的话就点下面的刷新

var config = {

  // 下面的地址配合 Server 工作
  host,

  //配置
  home_config: `${host}/test/wx/home_config`,


  //素材
  materials: `${host}/test/wx/materials`,


  //token
  qntoken: `${host}/test/wx/gainqntoken`,

  // 详情
  updateuser: `${host}/test/wx/updateuser`,

};
  //对外把对象config返回
module.exports = config

 

在其他js是这样调用接口地址的：

// test.js

const home_config = require('../../config').home_config; 

Page({

  /**
   * 页面的初始数据
   */
  data: {
    
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    var that = this;
    that.getHomeConfigMethod();
  },
  getHomeConfigMethod:function(){
    var that = this;
   wx.request({
     url: home_config+"?token=toekn", //小程序目前发起request请求，必须是https协议
     success:function(res){
      console.log(res);
     },
     fail:function(res){
        console.log(res)
     }
   })

  }
})

 

小程序接口配置文件就是这么搞，有不清楚的，可留言沟通。

 

交流群 : 192713488