全局相关代码的编写
项目tabBar的配置
步骤:
1、创建配置tabBar所需的四个页面
2、在pages.json中去配置pages、window、tabBar
pages.json中完整代码如下(tabBar参考文档:https://uniapp.dcloud.io/collocation/pages.html#tabbar)
{
"pages": [
//pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/home/home",
"style": {
"navigationBarTitleText": "首页"
}
},
{
"path": "pages/category/category",
"style": {
"navigationBarTitleText": "分类"
}
},
{
"path": "pages/cart/cart",
"style": {
"navigationBarTitleText": "购物车"
}
},
{
"path": "pages/my/my",
"style": {
"navigationBarTitleText": "我的"
}
}
],
"tabBar": {
"color": "#040402",
"selectedColor": "#c00000",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"list": [
{
"pagePath": "pages/home/home",
"iconPath": "static/tab_icons/home.png",
"selectedIconPath": "static/tab_icons/home-active.png",
"text": "首页"
},
{
"pagePath": "pages/category/category",
"iconPath": "static/tab_icons/category.png",
"selectedIconPath": "static/tab_icons/category-active.png",
"text": "分类"
},
{
"pagePath": "pages/cart/cart",
"iconPath": "static/tab_icons/cart.png",
"selectedIconPath": "static/tab_icons/cart-active.png",
"text": "购物车"
},
{
"pagePath": "pages/my/my",
"iconPath": "static/tab_icons/my.png",
"selectedIconPath": "static/tab_icons/my-active.png",
"text": "我的"
}
]
},
"globalStyle": {
"navigationBarTextStyle": "white",
"navigationBarTitleText": "uni-app",
"navigationBarBackgroundColor": "#c00000",
"backgroundColor": "#F8F8F8"
}
}
网络请求的封装
1、在项目src目录下创建一个utils文件夹,里面写上request.js,我们的网络请求封装的代码就在里面写上,并且要想让他里面的代码执行,那么需要在main.js中导入
架子:
function request (obj) {
return new Promise((resolve, rejct) => {})
}
uni.$request = request
完整的代码:
const BASEURL = 'http://api-hmugo-web.itheima.net/api/public/v1/'
/**
* 函数对象参数解构,如果要赋默认值,记得使用 =
* @param {*} obj
* @returns
*/
function request ({ url, method = 'GET', data = {}, header = {} }) {
return new Promise((resolve, rejct) => {
uni.showLoading({
title: '拼命加载中...'
})
uni.request({
url: `${BASEURL}${url}`,
method,
data,
header,
success: res => {
resolve(res.data)
},
fail: err => {
reject(err)
},
complete: () => {
uni.hideLoading()
}
})
})
}
uni.$request = request
注意点:
sass & sass-loader
1、首先检查你自己的node版本
2、一定要根据自己的node版本来安装对应的sass 和 sass-loader
uni-ui官方解释:
node版本大于16: npm i sass@1.45.0 sass-loader@8.0.2 -D
node版本小于16: npm i sass sass-loader@10.1.1 -D
最终样式作用上了就可以了
注意:如果发现按照上面的步骤来,还不好使,建议把node_modules和package-lock.json删掉,然后把个人缓存目录npm_cache也删掉,再重试,接下来下面截图,说明要删除哪些东西之后再试(注意:重新安装的时候,保证网速哈,有时候啥都行了,网速不行也安装不上的)
项目中的node_modules和package-lock.json干掉
个人缓存目录中的npm_cache干掉