欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

商城微信小程序（一）——開發(fā)環(huán)境搭建、小程序結(jié)構(gòu)、首頁完成 ... ... ... ... - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價值，我們在追求其視覺表現(xiàn)的同時，更側(cè)重于功能的便捷，營銷的便利，運營的高效，讓網(wǎng)站成為營銷工具，讓軟件能切實提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序為后期升級提供便捷的支持！

您當前位置>首頁 » 新聞資訊 » 小程序相關(guān) >

商城微信小程序（一）——開發(fā)環(huán)境搭建、小程序結(jié)構(gòu)、首頁完成 ... ... ... ...

發(fā)表時間：2021-1-5

發(fā)布人：葵宇科技

瀏覽次數(shù)：96

準備工作：

安裝微信小程序開發(fā)工具
安裝VScode，并安裝如下插件：

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

為了方便開發(fā)，我們不直接編寫微信的樣式文件，而是使用該插件將less語法自動生成wxss樣式，插件添加如下設(shè)置：

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

小程序目錄：

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

pages結(jié)構(gòu)

    "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"

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

使用微信小程序開發(fā)工具在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": "黑馬優(yōu)購",
    "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，并創(chuàng)建名為SearchInput的component，

關(guān)鍵代碼如下：
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": "優(yōu)購首頁"
}

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中的引入和使用方法

幻燈片、分類導航、樓層列表關(guān)鍵代碼如下：

index.js

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

Page({

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

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  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();


  },

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

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

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

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函數(shù)
   */
  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%;
        }
      }
    }
  }
}

總結(jié)：

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

相關(guān)案例查看更多