优购项目

先创建整体页面

"pages":[
    "pages/index/index",
    "pages/category/index",
    "pages/goods_list/index",
    "pages/goods_detail/index",
    "pages/cart/index",
    "pages/collect/index",
    "pages/order/index",
    "pages/search/index",
    "pages/user/index",
    "pages/feedback/index",
    "pages/login/index",
    "pages/auth/index",
    "pages/pay/index"
  ]

创建部分文件夹

components
icons
lib
request
styles

获取iconfont小图标

在阿里巴巴矢量图标库获得图标

从网页上把在线链接的css复制到微信小程序的styles里的wxss文件里

搭建tabbar

从阿里巴巴矢量图标库下载几个导航栏的图

在app.json里设置tabBar:

"tabBar": {
    "color":"#999",
    
    "selectedColor": "#d81e06",
    "backgroundColor": "#ffffff",
    "position":"bottom",
    "borderStyle": "black",
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "icons/homeb.png",
      "selectedIconPath": "icons/homer.png"
    },
    {
      "pagePath": "pages/category/index",
      "text": "分类",
      "iconPath": "icons/sortb.png",
      "selectedIconPath": "icons/sortr.png"
    },
    {
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "icons/shoppingb.png",
        "selectedIconPath": "icons/shoppingr.png"
    },
    {
      "pagePath": "pages/cart/index",
      "text": "我的",
      "iconPath": "icons/userb.png",
      "selectedIconPath": "icons/userr.png"
    }]
  }

主题颜色通过变量来实现

//app.wxss
page{
    /* 定义主题颜色 */
    --themeColor: #eb4450;
}

/* index.wxss */
view{
    /* 使用主题颜色 */
    color:var(--themeColor);
}

设置导航栏和全局外观

在app.json中设置导航栏和标题栏字体颜色，如下：

"window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ff2d4a",
    "navigationBarTitleText": "黑马优购",
    "navigationBarTextStyle": "white"
  }

这里整体框架就搭建好了

封装http

首先在根目录下创建一个文件夹，用的是http，然后在这个文件夹下创建一个js文件。这个js文件中写入

export default (url,data,method)=>{ // 导出一个函数 函数中的 url是请求接口地址 data 是发送的参数 method 是请求方式
  return new Promise((resolve,rejects)=>{ // 返回一个 promise
    wx.request({
      url, //请求地址
      data, // 请求时携带的参数
      method, // 请求方式
      success(res){  // 请求成功指定的函数
        resolve(res); // 请求成功执行成功的回调，执行的是 then
      },
      fail(err){     // 请求失败执行的函数
        rejects()     // 请求失败执行的回调，执行的是 catch
      },
    })
  })
}