夜光序言:
赋予清风明月与你
相约少年游,鲜衣怒马。
秀发如烟,风中清扬,
寄予流轩,月下未殇。
清风疏旷,霭霭浮光,
流光皎皎,月色溶溶。
似逢诗意少年,笔下风月无端,
自矜风采若清流。
远山隐隐远水粼粼,天涯远。
岁月静好,于你亦然。
正文:
以道御术 / 以术识道
这里我们来优化接口代码
提取公共的接口路径
export const request=(params)=>{
//这里,我们定义一个公共的url
//https://api-hmugo-web.itheima.net/api/public/v1/categories
const baseUrl = 'https://api-hmugo-web.itheima.net/api/public/v1';
//夜光:写一个回调函数嗯
return new Promise((resolve,reject)=>{
wx.request({
...params,
url: baseUrl+params.url,
//成功之后需要做什么呢
success:(result)=>{
resolve(result);
},
//那么失败之后呢~
fail:(err)=>{
reject();
}
});
})
}
//0 引入 用来发送请求的 方法 一定要把路径补全
import { request } from"../../request/index.js";
Page({
/**
* 页面的初始数据
*/
data: {
//轮播图数组
swiperList:[],
//夜光:同理,我们再添加一个变量
//导航数组
cateList:[],
//下面来一个最关键的
//楼层数组
floorList: []
},
/**
* 生命周期函数--监听页面加载
*/
//这个表示页面开始加载,就会触发的一个事件
onLoad: function (options) {
//1. 发送异步请求,来获取轮播图数据
// wx.request({
// url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
// success: (res)=>{
// console.log(res);
// //我们通过下面这个方法进行赋值
// this.setData({
// swiperList:res.data.message
// })
// }
// });
this.getSwiperList(); //夜光:方法已经封装好了
this.getCateList(); //夜光:方法已经封装好了
this.getFloorList(); //夜光:方法已经封装好了
},
//下面我们再做个~~
//夜光:获取轮播图数据的方法
getSwiperList(){
request({
url: '/home/swiperdata'
})
.then(res => {
//我们通过下面这个方法进行赋值
this.setData({
swiperList: res.data.message
})
//是不是感觉上面这个方法很酷炫
})
},
//夜光:获取导航的方法
getCateList() {
request({
url: '/home/catitems'
})
.then(res => {
//我们通过下面这个方法进行赋值
this.setData({
cateList: res.data.message
})
//是不是感觉上面这个方法很酷炫
})
},
//夜光:获取导航的方法
getFloorList() {
request({
url: '/home/floordata'
})
.then(res => {
//我们通过下面这个方法进行赋值
this.setData({
floorList: res.data.message
})
//是不是感觉上面这个方法很酷炫
})
}
})
我们以前写web的时候,一个关键的东西,叫做url传参
我们添加一个编译模式
用来实现每次第一个页面都是商品列表页面
刚刚失误了,忘记添加一个参数,启动的参数