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)