用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 實戰教程 查看內容

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

Rolan 2020-10-10 14:09

各個插件的作用都有說明,這里說下Easy LESS,由于微信小程序不支持less語法

準備工作:

安裝微信小程序開發工具
安裝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">
    
    <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語法布局,特別是樓層圖片布局

鮮花
鮮花
雞蛋
雞蛋
分享至 : QQ空間
收藏
时时彩彩票app下载手机版