在根目录下创建两个文件目录,一个为dev里面放我们的多环境变量,另一个为service里面放api 、request 、http
1.1 在env的index.js中配置多环境变量
module.exports={
"dev":{//开发环境
"baseUrl":"https://api-hmugo-web.itheima.net/api/public/v1"
},
"pro":{//生产环境
"baseUrl":"https://www.baidoapi.com/api/public/v1"
},
"test":{//测试环境
"baseUrl":"https://www.test.com/api/public/v1"
}
}
1.2 在service的api.js中放路径的后半部分
// 只放url
module.exports={
'lunbo':'/home/swiperdata',//轮播接口
"login":"/login",//登录接口
'cate':"/category"//分类接口
}
1.3 在service的request.js中配置请求方法
module.exports=function axios(url,method,data){// 地址 请求方式 参数
return new Promise((resolve,reject)=>{//成功,失败
wx.request({
url: url,
method:method,
data:Object.assign({},data),
success(res){
resolve(res);
},
fail(err){
reject(err)
}
})
})
}
1.4 在service的http.js封装我们的方法
// 定义各种各样的请求方法
const env=require('../env/index')//多环境变量
const api=require('./api')//url
const axios=require('./request')//请求拦截
// 根据当前环境手动选择baseUrl
const baseURL=env.dev.baseUrl;
// 定义轮播接口请求方法
function lunbo(url,method,data){
return axios(baseURL+url,method,data)
}
// 定义登录接口请求方法 不传参
function login1(){
return axios(baseURL+api.login,'post',{})
}
module.exports={
lunbo,//导出轮播
login1//导出登录
}
1.5 在app.js中,即App头部导入http封装方法,并在下面全局定义
// app.js
const axios = require('./service/http')//导入 http封装方法
App({
onLaunch() {
console.log('onLaunch监听小程的初始化,全局只触发一次')
},
onShow(){
console.log('onShow监听小程序的显示')
},
onHide(){
console.log('onHide监听小程序隐藏')
},
onError(){
console.log('onError监听小程序脚本错误')
},
onPageNotFound(){
console.log('onPageNotFound监听页面不存在')
},
globalData: {//全局变量
userInfo: null,
axios//this.globalData.axios访问
},
axios//this.axios访问
})
1.6 在home.js中Home头部导入app实例,并使用
// pages/home/home.js
const app=getApp();//1. 获取app实例
Page({
data: {//页面的初始数据
onLoad: function (options) {//生命周期函数--监听页面加载
let that=this;//2. 使用this
app.axios.lunbo().then(res=>{//方法1
this.setData({swiperList:res.data.message })
})
//方法2 传参
app.axios.lunbo('/home/swiperdata','get',{}).then(res=>{
this.setData({
swiperList:res.data.message
})
})
},
})
好了,废话不多少,上图