小程序調用後端接口服務 配置文件詳解

前言：爲了開發階段的效率更高，方便項目接口管理，在開發web項目時，咱們須要把後端提供的接口地址進行配置，這樣咱們本身在調用時，要方便得多，利己利人。在配置小程序接口地址時，和web的配置大同小異，下面總結幾點配置小程序接口地址的思路：

一、全部接口地址，要丟在一個對象裏【爲了方便下面解釋，這裏設置一個對象名：config】，爲何了，由於要對外暴露，方便外部訪問，這樣【key:value】方式是最合理的，那就是對象了。

二、真實接口地址，也就是對象鍵值對的value，要用英文模式下Tab鍵的上一顆按鍵"`"包起來。兩個爲一對，包一個接口地址，多一個少一個都要報錯。其餘符號【""、''】是不行的，寫了就報錯無效的url。而咱們以往配置web接口文件時，只需英文模式【""、‘’】引號，單或者雙引號就闊以了。

小注："`" 英文名叫accent，表示重音符，一個簡單的符號而已。

三、接口地址都寫好，丟進對象裏了，你想試試能不能調，這時，是不行。由於還缺乏一個接口所在對象【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的示例

 1 // config.js
 2 /**
 3  * 小程序後端接口配置文件
 4  */
 5 var host = "https://www.baidu.com"  //域名要在小程序的管理平臺配置好，若是出現調用時報錯，無效的域名，可在微信開發工具左邊點項目-》配置信息-》看一下配置的域名【request合法域名】有沒有刷新下來，沒有的話就點下面的刷新
 6 
 7 var config = {
 8 
 9   // 下面的地址配合 Server 工做
10   host,
11 
12   //配置
13   home_config: `${host}/test/wx/home_config`,
14 
15 
16   //素材
17   materials: `${host}/test/wx/materials`,
18 
19 
20   //token
21   qntoken: `${host}/test/wx/gainqntoken`,
22 
23   // 詳情
24   updateuser: `${host}/test/wx/updateuser`,
25 
26 };
27   //對外把對象config返回
28 module.exports = config

 

在其餘js是這樣調用接口地址的：

 1 // test.js
 2 
 3 const home_config = require('../../config').home_config; 
 4 
 5 Page({
 6 
 7   /**
 8    * 頁面的初始數據
 9    */
10   data: {
11     
12   },
13 
14   /**
15    * 生命週期函數--監聽頁面加載
16    */
17   onLoad: function (options) {
18     var that = this;
19     that.getHomeConfigMethod();
20   },
21   getHomeConfigMethod:function(){
22     var that = this;
23    wx.request({
24      url: home_config+"?token=toekn", //小程序目前發起request請求，必須是https協議
25      success:function(res){
26       console.log(res);
27      },
28      fail:function(res){
29         console.log(res)
30      }
31    })
32 
33   }
34 })

 

小程序接口配置文件就是這麼搞，有不清楚的，可留言溝通。

 

交流羣 : 192713488