uniapp封装,封装狂魔，2024年上半年最接地气的前端面经

complete() {

uni.hideLoading()

}

})

})

};

// 2 封装成功提示 使用:toast({}) 或 toast({title:“请求失败”，icon:“error”})

export const toast = ({

title = ‘请求成功’,

icon = ‘succes’,

duration = 1500,

}) => {

uni.showToast({

title,

duration,

icon,

})

};

//3 封装跳转 函数形式 这种可以直接挂载到vue原型上使用的时候不需要引入

// export function router ({url=‘’,type=‘navigateTo’,}) {

// uni[type]({

// url

// })

// };

//3 封装跳转 形参形式 router({url=‘xx’,type=‘xx’})

export const router = ({

url = ‘’,

type = ‘navigateTo’

}) => {

uni[type]({

url

})

};

utils/api.js

---

import {

http

} from ‘./http.js’

// 获取轮播图

export const getSwiper = async () => http({

url: ‘/home/swiperdata’

})

// 获取分类导航

export const getType = async () => http({

url: ‘/home/catitems’

})

// 获取楼层

export const getItem = async () => http({

url: ‘/home/floordata’

})

// 获取分类数据

export const getCates = async () => http({

url: ‘/categories’

})

// 搜索数据

export const getSearchList = async (key) => http({

url: ‘/goods/search’,

data: {

…key

}

})

在页面使用

=====

<navigator class=“nav” :class=“‘nav’ + index” :url=“‘/pages’ + it.navigator_url” :key=“index”

v-for=“(it, index) in item.product_list”>