1. 接口文档

2. 帮助文档

小程序开发文档
mdn
阿里巴巴字体 iconfont

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%;
}