微信小程序uniapp编写(一)

发布于:2023-01-12 ⋅ 阅读:(571) ⋅ 点赞:(0)

全局相关代码的编写

项目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干掉

 

 


网站公告

今日签到

点亮在社区的每一天
去签到