商城微信小程序（一）——開發環境搭建、小程序結構、首頁完成

這個系列文章記錄本人學習微信小程序的過程，教程來源黑馬程序員，我只是用文字記錄下，以備忘。

準備工做：

安裝微信小程序開發工具
安裝VScode，並安裝以下插件：

各個插件的做用都有說明，這裏說下Easy LESS，因爲微信小程序不支持less語法，

爲了方便開發，咱們不直接編寫微信的樣式文件，而是使用該插件將less語法自動生成wxss樣式，插件添加以下設置：

"less.compile": {
    
        "outExt": ".wxss",
    },

小程序目錄：

components--存放自定義組件
icons--存放小程序用到的圖標（主要是底部tabs圖標）
lib--存放用到的第三方庫
pages--小程序的頁面
request--封裝request請求
styles--存放公共的樣式
utils--存放一些工具類

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"

分別是首頁、分類頁、商品列表頁、商品詳情頁、購物車、收藏頁、訂單頁、搜索頁、用戶中心、反饋、登陸、驗證、支付頁。

使用微信小程序開發工具在app.json中快速搭建各個頁面和底部導航tabs：

{
  "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"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#eb4450",
    "navigationBarTitleText": "黑馬優購",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
    "color":"#999",
    "selectedColor": "#ff2d4a",
    "backgroundColor": "$fafafa",
    "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"
    }
  ]
  }
}

首頁主要有四部分組成：搜索框、幻燈片、分類導航、樓層導航，以下圖：

新建搜索組件

新建以下目錄componentsSearchInput，並建立名爲SearchInput的component，

關鍵代碼以下：
SearchInput.less

.search_input{
    height: 90rpx;
    padding: 10rpx;
    background-color: var(--themeColor);
    navigator{
        height: 100%;
       display: flex;
       justify-content: center;
       align-items: center;
       background-color: #ffffff; 
       border-radius: 15rpx;
       columns: #666;
       
    }
}

SearchInput.wxml

<view class="search_input">
    <navigator url="/pages/search/index" open-type="navigate">搜索</navigator>
</view>

使用組件

在首頁index中使用組件
index.json

{
  "usingComponents": {
    "SearchInput":"../../components/SearchInput/SearchInput"
  },
  "navigationBarTitleText": "優購首頁"
}

index.wxml

<SearchInput></SearchInput>

封裝request請求：

在reques目錄下新建index.js：

export const request = (params) => {
    return new Promise((resolve,reject)=>{
        wx.request({
         ...params,
         success:(result)=>{
           resolve(result);
         },
         fail:(err)=>{
           reject(err);
         },
        });
      })
}

使用封裝的request

參考首頁的index.js中的引入和使用方法

幻燈片、分類導航、樓層列表關鍵代碼以下：

index.js

import { request } from "../../request/index.js"

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    //輪播圖數組
    swiperList: [],
    //導航數組
    catesList: [],
    //樓層數據
    floorList:[],
  },

  /**
   * 生命週期函數--監聽頁面加載
   */
  onLoad: function (options) {
    // wx.request({
    //   url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
    //   success: (result) => {
    //     this.setData(
    //       {
    //         swiperList: result.data.message
    //       }
    //     )
    //   },
    //   fail: (res) => { },
    //   complete: (res) => { },
    // });
    this.getSwiperList();
    this.getCatesList();
    this.getFloorList();


  },

  // 獲取輪播圖數據
  getSwiperList() {
    request({ url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata" })
      .then(result => {
        this.setData(
          {
            swiperList: result.data.message
          }
        )
      }
      );
  },

   // 獲取分類數據
   getCatesList() {
    request({ url: "https://api-hmugo-web.itheima.net/api/public/v1/home/catitems" })
      .then(result => {
        this.setData(
          {
            catesList: result.data.message
          }
        )
      }
      );
  },

  // 獲取樓層數據
  getFloorList() {
    request({ url: "https://api-hmugo-web.itheima.net/api/public/v1/home/floordata" })
      .then(result => {
        this.setData(
          {
            floorList: result.data.message
          }
        )
      }
      );
  },

  /**
   * 生命週期函數--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函數--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函數--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

index.wxml

<view class="pyg_index">
  <SearchInput></SearchInput>
  <view class="index_swiper">
    <!-- 1 swiper標籤存在默認的寬度和高度
        100% * 150px 
      2 image標籤也存在默認的寬度和高度
        320px * 240px 
      3 設計圖片和輪播圖
        1 先看一下原圖的寬高  750 * 340 
        2 讓圖片的高度自適應 寬度 等於100%
        3 讓swiper標籤的高度 變成和圖片的高同樣便可 
      4 圖片標籤
        mode屬性 渲染模式
          widthFix  讓圖片的標籤寬高 和 圖片標籤的內容的寬高都等比例的發生變化 -->
    <swiper autoplay indicator-dots circular>
      <swiper-item wx:for="{{swiperList}}" wx:key="goods_id">
        <navigator url="{{item.navigator_url}}">
          <image mode="widthFix" src="{{item.image_src}}"></image>
        </navigator>
      </swiper-item>
    </swiper>
  </view>
  <!-- 分類開始 -->
  <view class="index_cate">
    <navigator class="" target="" url="" hover-class="navigator-hover" open-type="navigate" wx:for="{{catesList}}" wx:key="name">
      <image class="" src="{{item.image_src}}" mode="widthFix" lazy-load="false" binderror="" bindload="" />
    </navigator>
  </view>
  <!-- 樓層開始 -->
  <view class="index_floor">
    <view class="floor_group" wx:for="{{floorList}}" wx:for-item='item1' wx:for-index='index1' wx:key="floor_title">
      <view class="floor_title">
        <image class="" src="{{item1.floor_title.image_src}}" mode="widthFix" lazy-load="false" binderror="" bindload="" />
      </view>
      <view class="floor_list">
        <navigator class="" target="" url="" hover-class="navigator-hover" open-type="navigate" wx:for="{{item1.product_list}}" wx:for-item='item2' wx:for-index='index2' wx:key="name">
          <image class="" src="{{item2.image_src}}" mode="{{index2===0?'widthFix':'scaleToFill'}}" lazy-load="false" binderror="" bindload="" />
        </navigator>
      </view>
    </view>
  </view>
</view>

index.less

.index_swiper {
  display: flex;

  swiper {
    width: 750rpx;
    height: 340rpx;

    image {
      width: 100%;
    }
  }
}

.index_cate {
  display: flex;

  navigator {
    padding: 20rpx;
    flex: 1;

    image {
      width: 100%;

    }
  }
}

.index_floor {
  .floor_group {
    .floor_title {
      padding: 10rpx 0;
      image {
        width: 100%;
      }
    }

    .floor_list {
      overflow: hidden;

      navigator {
        float: left;
        width: 33.33%;

        //  後四個超連接
        &:nth-last-child(-n+4) {
          height: 33.33vw*386/232/2;
          border-left: 10rpx solid #ffffff;
        }

        //第二 第三兩張圖
        &:nth-child(2),
        &:nth-child(2) {
          border-left: 10rpx solid #ffffff;
        }

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}

總結：

1，ES6中的Promise異步請求2，less語法佈局，特別是樓層圖片佈局