1、config.js全局配置文件
创建config.js全局配置文件,文件可以用来存放小程序版本、开发生产环境、公用路径等配置信息。
var wxconfig = new Array()
wxconfig['apiurl'] = "接口路径"
wxconfig['imgurl'] = "图片路径"
wxconfig['appid'] = "appid"
wxconfig['secret'] = "secret"
export default wxconfig
2、接口封装文件http.js
封装接口请求可以根据请求方式不同封装几个基础类型接口,如get、post、put等,这里先拿提交数据方式不同封装一个json类型提交的接口举例。
import config from '../config'
let baseurl = config['apiurl']
function apijson (thisurl,thistype,thisdata,thisheader) {
//如有头部信息保留信息,没有时定义空对象
if(!thisheader){
thisheader = {}
}
//json类型请求
let jsonheader = {'Content-Type': 'application/json;charset=UTF-8'}
//拼接头部信息
var allheader = Object.assign(thisheader,jsonheader)
//wx.request为异步请求,直接使用return获取返回值的话会返回undefined,所以这里使用Promise进行同步处理
return new Promise((resolve) => {
wx.request({
url: baseurl + thisurl,
header: allheader,
method: thistype,
data: thisdata,
success: e => {
resolve(e)
}
})
})
}
module.exports = {
getjson: apijson
}
3、不同模块的接口封装
不同模块的接口封装主要便利于接口的反复调用和变更处理,也便于代码管理。例如登录模块,创建登录模块login.js文件。
const http = require('../utils/http')
function login (data) {
//调用登录接口,访问类型为put,请求数据赋予变量
return http.getjson('/user/login','PUT',data)
}
module.exports = {
login: login
}
4、封装函数使用
在对应js页面的相应事件中使用。
//调用登录接口封装文件
const login = require('../../server/login')
//
//相应事件中
let apidata = {
username: 'username',
password: 'password'
}
login.login(apidata).then(res => {
console.log(res);
})