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


    前言:为了开发阶段的效率更高,方便项目接口管理,在开发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的示例

     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

  • 相关阅读:
    Modernizr.js:为HTML5和CSS3而生!
    liunx 安装 phpstudy
    php 实现无限极分类
    网站邮箱端口
    android studio svn 创建分支
    卡在 构建 gradle 项目信息
    android 地图
    IllegalArgumentException: Unmatched braces in the pattern.
    软件设置开机启动
    输入网络凭据
  • 原文地址:https://www.cnblogs.com/webonline/p/7253317.html
Copyright © 2020-2023  润新知