【无标题】

1.1：创建项⽬

在微信开发者⼯具的开始界⾯左侧检查项⽬类型，需要为 [⼩程序]。

然后在右侧点击 [+] 开始新建项⽬。

最后在弹出的界⾯中输⼊项⽬相关的信息，点击确定即可

创建完毕后:

 2:项⽬初始化

• 重置 app.js 中的代码。

• 删除 app.json 中 pages 下的 "rendererOptions" 以及 "componentFramework" 字段。

•  重置 app.wxss 中的代码。
• 删除 app.json 中 pages 下的 "pages/logs/logs" 路径，同时删除 pages/logs ⽂件夹。
• 删除 components 中的⾃定义组件。
• 重置 pages/index ⽂件夹下的 index.js 、 index.wxss 、 index.html 以及 index.json ⽂件。
• 更新 utils 下 util.js 的⽂件名为 formatTime.js。

 

1.2：⾃定义构建 npm + 集成Sass

随着项⽬的功能越来越多、项⽬越来越复杂，⽂件⽬录也变的很繁琐，为了⽅便进⾏项⽬的开发，开发 ⼈员通常会对⽬录结构进⾏调整优化，在此项⽬中， 我们就需要将⼩程序源码放到

miniprogram ⽬录下

• 自定义构建  

"miniprogramRoot": "miniprogram/"

• 然后配置 project.config.json 的 setting.packNpmManually 为 true。  

"setting": {
 "packNpmManually":true,
 ...
 },

• 初始化项目
•  输入以下代码

npm init -y

• 最后配置 project.config.json 的 setting.packNpmRelationList 项，指定 packageJsonPath 和
• miniprogramNpmDistDir 的位置。

 

1 "setting": {
2 "packNpmManually":true,
3 "packNpmRelationList": [
4 {
5 "packageJsonPath": "./package.json",
6 "miniprogramNpmDistDir": "./miniprogram"
7 }
8 ],
9 },
10 
11 // packageJsonPath 表示 node_modules 源对应的 package.json
12 // miniprogramNpmDistDir 表示 node_modules 的构建结果⽬标位置

• 安装 vant ，然后进⾏ npm 构建 ，测试是否能够正常 vant 构建成功。

 

npm i @vant/weapp

• “⼯具”-“构建npm”。
•  集成 Sass
• 在 project.config.json ⽂件中，修改 setting 下的 useCompilerPlugins 字段为 ["sass"] ，即可开启⼯具内置的 sass 编译插件。 
• 构建项目界面
• 更改wxss后缀名为sass

2.构建项目界面 

 

assets⽂件导⼊和配置app.json⽂件

{
    "pages": [
        "pages/category/category",
        "pages/index/index",
        "pages/cart/cart",
        "pages/my/my"
    ],
    "window": {
        "navigationBarTitleText": "慕尚花坊",
        "navigationBarBackgroundColor": "#f3514f",
        "navigationBarTextStyle": "white"
    },
    "tabBar": {
        "color": "#252933",
        "selectedColor": "#FF734C",
        "backgroundColor": "#ffffff",
        "borderStyle": "black",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "assets/tabbar/index.png",
                "selectedIconPath": "assets/tabbar/index-active.png"
            },
            {
                "pagePath": "pages/category/category",
                "text": "分类",
                "iconPath": "assets/tabbar/cate.png",
                "selectedIconPath": "assets/tabbar/cate-active.png"
            },
            {
                "pagePath": "pages/cart/cart",
                "text": "购物车",
                "iconPath": "assets/tabbar/cart.png",
                "selectedIconPath": "assets/tabbar/cart-active.png"
            },
            {
                "pagePath": "pages/my/my",
                "text": "我的",
                "iconPath": "assets/tabbar/my.png",
                "selectedIconPath": "assets/tabbar/my-active.png"
            }
        ]
    },
    "sitemapLocation": "sitemap.json",
    "lazyCodeLoading": "requiredComponents",
    "usingComponents": {
        "van-button": "@vant/weapp/button/index"
      }
}

首页结构

<!-- index.wxml -->
<view class="index-container">

  <!-- 首页背景图 -->
  <view class="window-bgc"></view>

  <!-- 页面主体区域 -->
  <view class="container">

    <!-- 轮播图区域 -->
    <banner />

    <!-- 导航栏区域 -->
    <entrance />
    <!-- 广告区域 -->
    <view class="adver">
      <view class="adver-left">
        <navigator url="">
          <image src="../../assets/images/love.jpg" mode="widthFix" />
        </navigator>
      </view>
      <view class="adver-right">
        <navigator url="">
          <image src="../../assets/images/elder.jpg" mode="widthFix" />
        </navigator>
        <view>
          <navigator url="">
            <image src="../../assets/images/friend.jpg" mode="widthFix" />
          </navigator>
        </view>
      </view>
    </view>

    <!-- 列表区域 -->
    <goods-list/>

  </view>

</view>

首页背景

.index-container {
  
  // 首页背景图
  .window-bgc {
    height: 200rpx;
    position: absolute;
    width: 100%;
    background-color: #f3514f;
    border-radius: 0rpx 0rpx 25% 25%;
  }

  .adver {
    display: flex;
    width: 96%;
    margin: 0 auto;
    border-radius: 18rpx;
    background-color: white;

    .adver-left {
      width: 50%;
      // 上 右 下 左
      padding: 8rpx 8rpx 0rpx 8rpx;
    }

    .adver-right {
      width: 50%;
      padding: 8rpx 8rpx 0rpx 8rpx;

      // 选中第二张图片
      view:last-child{
        padding-top: 6rpx;
      }
    }

    image {
      width: 100%;
    }
  }
}

构建banner组件结构

在banner.json界面

{
  "component": true,
  "usingComponents": {}
}

轮播图界面

//banner.wxml

<view class="swiper-box">
  <swiper autoplay class="swiper" indicator-active-color="#FF734C"
  interval="2000" duration="1000" indicator-color="rgba(0,0,0,.3)">
    <block wx:for="{{ bannerList }}" wx:key="index">
      <swiper-item class="swiper-item">
        <image class="img" src="{{ item }}" mode="" />
        </swiper-item>
    </block>
  </swiper>

  <view class="indicator">
    <text 
      wx:for="{{bannerList.length}}" 
      wx:key="id"
      class="rectangle"></text>
  </view>
</view>

//banner.scss

.swiper-box {
  position: relative;
  .swiper {
    height: 320rpx;
    // 设置圆角弧度
    border-radius: 18rpx;
    // 设置溢出隐藏
    overflow: hidden;
    width: 95%;
    // 设置外边距
    margin: 0 auto ;
  }
  .swiper-item {
    .img {
      width: 100%;
      height: 100%;
      border-radius: 18rpx;
    }
  }

  .indicator {
    display: flex;
    justify-content: center;
    position: absolute;
    bottom: 16rpx;
    left: 0;
    right: 0;
    .rectangle {
      width: 30rpx;
      height: 6rpx;
      background-color: #f3514f;
      margin: 0 8rpx;
      border-radius: 6rpx;
    }
  }
  
}

banner.js

Component({
  properties:{
    bannerList:{
      type:Array,
      value:[
        '../../../assets/banner/banner-1.jpg',
        '../../../assets/banner/banner-2.jpg',
        '../../../assets/banner/banner-3.jpg'
      ]
    }
  }
})

商品列表组件