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

雨点打透心脏的1/2处 2023-07-09 11:23 11阅读 0赞

### 文章目录 ###

*   *   *  1.1 新建项目
         *  1.2 搭建目录结构
         *  1.3 清理无用文件
         *  1.4 搭建项目页面
         *  1.5 搭建tabBar
         *  1.6 初始化页面样式
         *   *  1.6.1 定义主题颜色和字体
             *  1.6.2 使用定义的主题颜色
             *  1.6.3 设置导航栏和全局外观
         *  1.7 小结

### 1.1 新建项目 ###

无脑通过微信开发者工具创建项目，填入`appid`，创建完成后，如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70]

### 1.2 搭建目录结构 ###

目录结构划分如下：

<table> 
 <thead> 
  <tr> 
   <th>目录名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>styles</td> 
   <td>存放公共样式</td> 
  </tr> 
  <tr> 
   <td>components</td> 
   <td>存放组件</td> 
  </tr> 
  <tr> 
   <td>lib</td> 
   <td>第三方库</td> 
  </tr> 
  <tr> 
   <td>utils</td> 
   <td>工具类</td> 
  </tr> 
  <tr> 
   <td>request</td> 
   <td>自用接口帮助库</td> 
  </tr> 
 </tbody> 
</table>

项目目录结构图如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 1]

### 1.3 清理无用文件 ###

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

### 1.4 搭建项目页面 ###

<table> 
 <thead> 
  <tr> 
   <th>页面名称</th> 
   <th>模块名</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>首页</td> 
   <td>index</td> 
  </tr> 
  <tr> 
   <td>分类页面</td> 
   <td>category</td> 
  </tr> 
  <tr> 
   <td>商品列表页面</td> 
   <td>goods_list</td> 
  </tr> 
  <tr> 
   <td>商品详情页面</td> 
   <td>goods_detail</td> 
  </tr> 
  <tr> 
   <td>购物车页面</td> 
   <td>cart</td> 
  </tr> 
  <tr> 
   <td>收藏页面</td> 
   <td>collect</td> 
  </tr> 
  <tr> 
   <td>订单页面</td> 
   <td>order</td> 
  </tr> 
  <tr> 
   <td>搜索页面</td> 
   <td>search</td> 
  </tr> 
  <tr> 
   <td>个人中心页面</td> 
   <td>user</td> 
  </tr> 
  <tr> 
   <td>意见反馈页面</td> 
   <td>feedbabck</td> 
  </tr> 
  <tr> 
   <td>登录页面</td> 
   <td>login</td> 
  </tr> 
  <tr> 
   <td>授权页面</td> 
   <td>auth</td> 
  </tr> 
  <tr> 
   <td>结算页面</td> 
   <td>pay</td> 
  </tr> 
 </tbody> 
</table>

最终效果如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 2]

### 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 定义主题颜色和字体 ####

直接上代码，内含注释。

/* 在微信小程序中，不支持通配符 '*' */
    page,view,text,swiper,swiper-item,image,navigator{ 
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    
    
    /* 主题颜色 1. less 中 存在变量这个知识 2. 原生的css和wxss也支持变量 */
    page{ 
        /* 定义主题颜色 */
        --themeColor: #eb4450;
        /* 定义统一字体 此处假设设计稿大小为375px，那存在1px=2rpx，假定设计稿字体为14px，那在小程序中应定义为2rpx */
        font-size: 28rpx;
    }

#### 1.6.2 使用定义的主题颜色 ####

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

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

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

<view>首页</view>

#### 1.6.3 设置导航栏和全局外观 ####

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

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

综上，设置完成后，效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 3]

### 1.7 小结 ###

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200228171637715.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200228172048389.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200228173437534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200228182516395.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTAzNTgxNjg=,size_16,color_FFFFFF,t_70