微信小程序之巧妙的封装

巧妙的封装

暴露一个访问地址xapp.config.js

module.exports = {
    api_host: `https://a.squmo.com/yizu`
}

继续引入，加暴露api.config.js

const xapp = require('./xapp.config.js');
// 注册接口
module.exports = { 
    GetAddr: `${xapp.api_host}/GetAddr/index`
    ...
}

继续暴露，加request处理 method.js

const api = require('./api.config.js');
const request = require('../common/request.js');
module.exports = {    
    GetAddr: (data) => request(api.GetAddr, data, 'POST')
    ...
}

使用方法

const Api = require("../../config/method.js");
const app = getApp();

Page({
  data: {
    addrs: [],
  },

  onLoad: function () {
    var self = this;
    var longitude = app.globalData.userlon;
    var latitude = app.globalData.userlat;

    // 获取店铺信息
    Api.GetAddr({
        lon: longitude,
        lat: latitude
    }).then(res => {
        let addrs = res.getAddr;
        console.log(JSON.stringify(addrs));
        let mindistance = addrs.reduce((prev, current) => (prev.distance < current.distance) ? prev : current)
        self.setData({
            addrs: mindistance
        });
    })
  }
  ...
})

这里是一个巧妙的层层封装过程！

小程序，最重要的就是接口的使用！

通过这样的封装，使用起来非常方便！

有统一的入口地址！

可以指定接口的提交方式，POST，GET等等。

传递参数，获取参数都非常的方便！

大刀阔斧，快刀斩乱麻！--谭康！