1. 接口文档

2. 帮助文档

3. 项目搭建

3.1 新建小程序项目

填入自己的appid: wxdbf2b5e8c2f521a3

3.2 文件结构

目录名	作用
styles	存放公共样式
components	存放组件
lib	存放第三方库
utils	自己的帮助库
request	自己的接口帮助库
pages	存放页面.

app.json

{
  "pages": [
    "pages/index/index"
  ],
  "windows": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Marron购物",
    "navigationBarTextStyle": "black"
  },
  "sitemapLocation": "sitemap.json"
}

app.wxss

(空)

app.js : 快捷键 wx-app + tab
pages/index.wxml

<view>首页</view>

pages/index.wxss
pages/index.js: wx-page + tab

3.3 搭建项目的页面

页面名称	名称
首页	index
分类页面	category
商品列表页面	goods_list
商品详情页面	goods_detail
购物车页面	cart
收藏页面	collect
订单页面	order
搜索页面	search
个人中心页面	user
意见反馈页面	feedback
登录页面	login
授权页面	auth
结算页面	pay

直接修改app.json中的属性: pages

{
  "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": "#fff",
    "navigationBarTitleText": "Marron - 购物车",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

微信的编辑器会帮助自动生成对应的页面文件

3.4 引入字体图标

打开阿里巴巴字体图标(网站)
选择的图标
添加至项目
下载到本地
将样式文件由css修改为wxss
小程序中引入

在全局样式中,引入某个样式

// app.wxss
@import "./styles/iconfont.wxss";

3.5 搭建项目tabbar

在app.json中,输入tabBar + tab.生成首页的导航栏(位于手机底部)

3.6 全局样式

需求: 假设现在需要设置主题颜色为: #d81e06; 字体大小为14px.

在微信的样式中(.wxss),可以通过如下方式来定义全局变量.

/*  /app.wxss: 项目目录下 */
page{
    /* 主题颜色 */
    --themeColor: #d81e06;
    /* 字体大小 */
    font-size: 28rpx;
}

在字页面中使用主题颜色--themeColor

/* /pages/index/index.wxss: pages目录下 */
view{
    /* 使用主题颜色 */
    color: var(--themeColor)
}

3.7 顶部的导航栏

在根目录下的app.json文件中,有一个window属性,它控制的是顶部的样式(字体大小颜色、背景色…),下面说明几个常用的属性

{
    "window": {
        "navigationBarBackgroundColor": "d81e06",	// 背景色
        "navigationBarTitleText": "标题",
        "navigationBarTextStyle": "white"	// 标题颜色
    }
}

4. 首页

4.1 搜索框

需求: 多个页面用到搜索的功能,因此把搜索框封装成一个组件,方便代码的复用

首先在根目录下的components文件夹中新建一个目录SearchInput
在SearchInput目录下新建组件SearchInput(开发工具自动生成组件的4个文件)
在首页导入搜索组件

/*
	首页位于pages目录下的index文件夹中, 找到其json文件(微信中json文件用于配置)
	/pages/index/index.json
*/
{
    "usingComponents": {
        "SearchInput": "../../components/SearchInput/SearchInput"
    }
}

上面在配置文件中,导入组件成功.下面在.wxml中使用导入的组件

<!-- /pages/index/index.wxml -->
<view class="pyg_index">
    <!-- 搜索框结构 -->
    <SearchInput></SearchInput>
</view>

以上完成了搜索框外观的创建与使用, 下面实现点击跳转功能.

<!-- components/SearchInput/SearchInput.wxml -->
<view class="search_input">
    <navigator url="/pages/search/index" open-type="navigate">
        搜索
    </navigator>
</view>

以上实现了,点击搜索的适合,跳转到搜索页面.

4.2 轮播图

需求: 首页加载的时候,发送请求,获取数据。并将返回的结果显示在页面中

具体步骤: 首页的js文件,首先在data中注册数据,然后在onLoad生命周期函数中添加请求数据的事件.

// pages/index/index.js
Page({
    data:{
        swiperList:[],
    },
    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
                })
            }
        })
    }
})

上面准备好了轮播图的数据,下面根据数据写样式

<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>
                    <image mode="widthFix" src="{{item.image_src}}"></image>
                </navigator>
            </swiper-item>
        </swiper>
    </view>
</view>

上面成功的将轮播图展示在小程序中了：

wx:for: 使用到进入时,请求到的数据
wx:key: 绑定一个唯一值, 和vue中的key是一个意思
mode="widthFix": 表示宽度百分百,高度自适应.

下面,写样式

.index_swiper swiper {
  width: 750rpx;
  height: 340rpx;
}
.index_swiper swiper image {
  width: 100%;
}

以上完成了,最基本的轮播图流程(请求数据 -> 展示). 但是请求接口并未封装,可能会造成回调地狱,不利于代码的维护.下面封装请求数据的接口

方法封装

为了解决回调地狱的问题,下面使用ES6提供的语法对方法进行封装. 请求的代码写在了路径request/index.js中

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

上面封装了一个promise请求方法,调用如下

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

Page({
    data:{
        swiperList: [],
    },
    onLoad: function(options){
        request({
            url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"
        }).then(result =>{
            this.setData({
                swiperList: result.data.message
            })
        })
    }
})

4.3 分类导航

获取数据和设置数据同4.2,下面主要是页面的设计

<!-- pages/index/index.wxml -->
<view class="pyg_index">
    <!-- 楼层导航 -->
    <view class="index_cate">
        <navigator wx:for="{{cateList}}" wx:key="name">
            <image mode="widthFix" src="{{item.image_src}}"></image>
        </navigator>
    </view>
</view>

样式如下:

.index_cate{
    display: flex;
}

.index_cate navigator{
    padding: 25rpx;
    flex: 1;
}

.index_cate navigator image{
    width: 100%;
}

4.4 楼层

楼层的接口

楼层请求数据和设置数据的操作同4.2。下面编写楼层的页面

<view class="pyg_index">
    <!-- 楼层 -->
    <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 mode="widthFix" src="{{item1.floor_title.image_src}}"></image>
            </view>
            <!-- 内容 -->
            <view class="floor_list">
                <navigator wx:for="{{item1.product_list}}" wx:for-index="index2" wx:key="name">
                    <image mode="{{index2 == 0? 'widthFix' : 'scaleToFill'}}" src="{{item2.image_src}}"></image>
                </navigator>
            </view>
        </view>
    </view>
</view>

说明:

wx:for-item ='item1' 将数组中的当前项,命名为"item1"
<image mode="{{index2 == 0? 'widthFix' : 'scaleToFill'}}">: 数组中的第一项,使用widthFix模式,数组中除第一项外的项使用scaleToFill模式

上面实现了楼层的基本页面,下面实现样式

/* 楼层 */
.index_floor{}

.index_floor .floor_group{}

.index_floor .floor_group .floor_title{}

.index_floor .floor_group .floor_title image{
    width: 100%;
}

.index_floor .floor_group .floor_list{
    /* 清除浮动 */
    overflow: hidden;
    padding: 10rpx 0;
}

.index_floor .floor_group .floor_list navigator{
    width: 33.33%;
    float: left;
}

.index_floor .floor_group .floor_list navigator:nth-last-child(-n+4){
    height: 27.72711207vm;
    border-left: 10rpx solid #fff;
}

.index_floor .floor_group .floor_list navigator:nth-child(2) {
  border-bottom: 10rpx solid #fff;
}

.index_floor .floor_group .floor_list navigator:nth-child(3) {
  border-bottom: 10rpx solid #fff;
}

.index_floor .floor_group .floor_list navigator image {
  width: 100%;
  height: 100%;
}

小结:

给到数四个元素写样式: navigator:nth-last-chiuld(-n+4)
给第2个子元素设置样式: navigator:nth-child(2)

栗子好好吃

发布了228 篇原创文章 · 获赞 41 · 访问量 5万+

私信关注

小程序 --- > 项目小练手Ⅰ