关于小程序:商城微信小程序一开发环境搭建小程序结构首页完成

这个系列文章记录自己学习微信小程序的过程，教程起源黑马程序员，我只是用文字记录下，以备忘。

筹备工作：

装置微信小程序开发工具
装置 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 语法布局，特地是楼层图片布局