慕尚花坊小程序开发---day2

在第二天的开发工作里，我完成了构建项目页面，首页页面代码的书写。

三.构建项目页面

1.导入assets文件

2.配置app.json文件

四.首页

1.1：首页结构

1 <!--index.wxml-->
2 <view class="index-container">
3
4 <!-- ⾸⻚背景图 -->
5 <view class="window-bgc"></view>
6
7 <!-- ⻚⾯主体区域 -->
8 <view class="container">
9
10 <!-- 轮播图区域 -->
11
12 <!-- 导航区域 -->
13
14 <!-- ⼴告区域 -->
15 <view class="adver">
16 <view class="adver-left"></view>
17 <view class="adver-right"></view>
18 </view>
19
20 <!-- 商品列表 -->
21
22 </view>
23
24 </view>

1.2：首页背景图

1 /**index.wxss**/
2 .index-container {
3
4 // ⾸⻚背景图
5 .window-bgc {
6   height: 200rpx;
7   width: 100%;
8   background-color: #f3514f;
9   border-radius:0 0 50% 50%;
10 }
11 }

1.3：banner组件

1.新建banner组件

2.构建banner组件结构

1 // banner.js
2 Component({
3
4 })

1 // banner.json
2 {
3 "component": true,
4 "usingComponents": {}
5 }

1 // banner.wxml
2 <view>我是banner组件</view>

1 // index.json
2 {
3 "usingComponents": {
4 "banner": "./banner/banner"
5 }
6 }

1 // index.html
2 <!-- 轮播图区域 -->
3 <banner/>

3.完成轮播图组件

1.4：entrance组件

1.构建entrance组件

// entrance.js
Component({
  

})

// entrance.json
{
  "component": true,
  "usingComponents": {}

}

// index.json
{
  "usingComponents": {
    "banner":"./banner/banner",
    "entrance":"./entrance/entrance"
   
    
  
},
}
  

// index.wxml

<!-- 导航区域 -->
<entrance></entrance>

2.完成导航组件

1.5：广告组件

1.6：列表组件

1.构建列表组件

// index.json
{
  "usingComponents": {
    "banner":"./banner/banner",
    "entrance":"./entrance/entrance",
    "goods-list":"../../compoments/goods-list/goods-list"
    
  
  },
  "navigationBarTitleText": "慕尚花坊"
}

2.完成列表组件

1.7：商品卡片组件

1.构建商品卡片组件

2.完成商品卡片组件

结尾：到这里首页页面的代码编写基本完成。

首页页面代码运行效果图

通过今天对首页页面内容的代码编写。让我对组件的创建和使用有了更深的认识，丰富了我对小程序开发方向。