黑马优购小程序之项目搭建

1.1 新建项目

1.2 搭建目录结构

目录结构划分如下：

项目目录结构图如下：

1.3 清理无用文件

将logs文件夹删除，并从app.json中移除 将index/index.js中Page对象内容删除，只保留声明周期相关函数 在index/index.json中添加标题"navigationBarTitleText": "优购首页" 在index/index.wxml中删除原内容，添加<view>首页</view> 在index/index.wxss中删除原样式内容

1.4 搭建项目页面

最终效果如图：

1.5 搭建tabBar

在项目根目录下，新建icons文件夹，并将图标拷入改文件夹 修改app.json文件，添加tabBar 代码如下：

"tabBar": {
          
   
    "color": "#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
          
   
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "icons/home.png",
        "selectedIconPath": "icons/home-o.png"
      },
      {
          
   
        "pagePath": "pages/category/index",
        "text": "分类",
        "iconPath": "icons/category.png",
        "selectedIconPath": "icons/category-o.png"
      },
      {
          
   
        "pagePath": "pages/cart/index",
        "text": "购物车",
        "iconPath": "icons/cart.png",
        "selectedIconPath": "icons/cart-o.png"
      },
      {
          
   
        "pagePath": "pages/user/index",
        "text": "我的",
        "iconPath": "icons/my.png",
        "selectedIconPath": "icons/my-o.png"
      }
    ]
  }

1.6 初始化页面样式

1.6.1 定义主题颜色和字体

直接上代码，内含注释。

1.6.2 使用定义的主题颜色

在index/index.wxss中使用定义的主题颜色，方式如下：

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

在index/index.wxml中使用view标签，代码如下：

<!--index.wxml-->
<view>首页</view>

1.6.3 设置导航栏和全局外观

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

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

综上，设置完成后，效果如下：

1.7 小结

至此呢，基本项目架子就搭建完成了，本节内容相对比较简单，在下一节中，将会完成首页模块的开发。