技术选型
小程序的第三方框架：
- 腾讯wepy 语法类似vue
- 美团mpvue 语法类似vue
- 京东taro 语法类似react
- 滴滴 chameleon
- uni-app 语法类似vue
- 原生框架 MINA
本次微信小程序的实战项目，使用原生框架。
项目搭建
1 新建小程序项目
填入自己的appid
搭建目录结构
修改应用标题和页面标题；
删除log页面；
删除app.wxss和index.wxss中的内容
删除app.js和index.js中的内容，并且使用wx-app和wx-page快捷生成代码。
搭建项目的页面
列式编程小技巧：
Shift+Alt+鼠标，可以从鼠标点击的2次头尾的列。
Ctrl+D 可以对多列选择从当前到之后的片段。
2 引入字体图标
https://www.iconfont.cn/
步骤：
- 查找要用的图标；
- 点击选择的图标，点击
添加入库 - 选好需要的所有图标后，点击右边
购物车的按钮 - 点击
添加至项目 - 选择
Font class，选择查看在线链接，复制当前生成的css文件链接，进行查看。 - 将第5步中的css文件中的代码，全选复制粘贴至项目styles文件夹下的iconfont.wxss文件中
- 在app.wxss文件中引入iconfont.wxss的内容，
@import "./styles/iconfont.wxss;"注意这里要加分号，否则下面的样式会报错。 - 字体图标的使用：
<text class="iconfont icon-jiarugouwuche"></text>、<text class="iconfont icon-gouwuche"></text>
3 搭建项目tabbar结构
tabbar就是小程序中页面最下方的标签结构。
注意：tabbar最少有2个项才行，只写一个会报错的。
在app.json文件中的windows下方写一个同级的tabber，如图。
"tabBar": {
"color": "",// 未选中时的字体颜色
"selectedColor": "",
"backgroundColor": "",
"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"
}
]
},
4 初始化页面样式
/* 全局引入wxss文件，每个页面都能使用这个文件中的类 */
@import "./styles/iconfont.wxss";
/* 在微信小程序中，不支持通配符“*” */
page,view,text,swiper,swiper-item,image,navigater {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* 主题颜色，通过变量来实现
1 less中存在变量这个知识
2 原生的css和wxss也支持变量
*/
page{
/* 定义主题颜色 */
--themeColor: #eb4450;
/* 定义统一字体大小，假设设计稿大小是375px
1px = 2rpx
14px = 28px
*/
font-size: 28rpx;
}
/* index.wxss */
view{
/* 使用主题颜色 */
color:var(--themeColor);
}
首页
效果
小技巧：取消下图中的勾选，可以解决VS中只有一个文件夹不展开的问题。
首页-轮播图
首页-获取轮播图数据
接口文档地址：https://www.showdoc.com.cn/128719739414963
报错和解决方法如下2图：
解决方法一：
解决方法二：
介绍->点击链接跳转至官网首页->扫码登录->设置啥子服务器来着
// index.js
// 0 引入用来发送请求的方法-- 解构方式拿到request函数
import { request } from "../../request/index.js"
//Page Object
Page({
data: {
// 轮播图数组
swiperList:[]
},
// 页面开始加载的时候就会触发的事件
onLoad: function(options) {
// 1 发送异步请求，获取轮播图数据
// 优化的手段可以通过es6的promise来解决这个问题
wx.request({
url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
success:(res) => {
// 箭头函数内部的this是词法作用域，由上下文确定
// console.log(res.data)
// console.log(this,typeof(this));
this.setData({
swiperList:res.data.message
})
}
})
}
});
首页-轮播图-动态渲染
<view class="szyg_index">
<!-- 搜索框开始 -->
<SearchInput></SearchInput>
<!-- 搜索框结束 -->
<!-- 轮播图开始 -->
<view class="index_swiper">
<!--
1 swiper标签存在默认的宽高 100% * 150px
2 image标签也存在默认的宽高 320px * 240px
3 设计图片和轮播图
1 先看一下原图的宽高 750px * 340px
2 让图片的高度自适应 宽度等于100%
3 让swiper标签的高度，变成和图片的高度一致
4 图片标签
mode属性 渲染模式
widthFix 让图片标签宽高和图片标签内容的宽高都等比例的发生变化
-->
<!-- circular衔接后，最后一张图后会衔接第一张图； -->
<swiper autoplay interval="3000" 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>
/* index.wxss */
.index_swiper swiper {
width: 750rbx;
height: 340rpx;
}
.index_swiper swiper image {
width: 100%;
}
轮播图优化
容易陷入回调地狱，需要用promise封装。
// request文件夹下的index.js
export const request=(params)=>{
return new Promise((resolve,reject)=>{
wx.request({
...params,
success: (result)=>{
resolve(result)
},
fail: (err)=>{
reject(err)
}
});
})
}
index文件夹下的index.js
// 0 引入用来发送请求的方法-- 解构方式拿到request函数
import { request } from "../../request/index.js"
//Page Object
Page({
data: {
// 轮播图数组
swiperList:[],
},
// 页面开始加载的时候就会触发的事件
onLoad: function(options) {
// 1 发送异步请求，获取轮播图数据
// 优化的手段可以通过es6的promise来解决这个问题
// wx.request({
// url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
// success:(res) => {
// // 箭头函数内部的this是词法作用域，由上下文确定
// console.log(res.data)
// // console.log(this,typeof(this));
// this.setData({
// swiperList:res.data.message
// })
// }
// })
this.getSwiperList()
},
// 获取轮播图数据
getSwiperList() {
request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'})
.then(result=>{
this.setData({
swiperList:result.data.message
})
})
}
});
首页-分类导航
// 0 引入用来发送请求的方法-- 解构方式拿到request函数
import { request } from "../../request/index.js"
//Page Object
Page({
data: {
// 轮播图数组
swiperList:[],
// 导航数组
catesList:[],
},
// 页面开始加载的时候就会触发的事件
onLoad: function(options) {
// 1 发送异步请求，获取轮播图数据
// 优化的手段可以通过es6的promise来解决这个问题
// wx.request({
// url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
// success:(res) => {
// // 箭头函数内部的this是词法作用域，由上下文确定
// console.log(res.data)
// // console.log(this,typeof(this));
// this.setData({
// swiperList:res.data.message
// })
// }
// })
this.getSwiperList()
this.getCatesList()
},
// 获取轮播图数据
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=>{
console.log(result);
this.setData({
catesList:result.data.message
})
})
}
});
<view class="szyg_index">
<!-- 搜索框开始 -->
<SearchInput></SearchInput>
<!-- 搜索框结束 -->
<!-- 轮播图开始 -->
<view class="index_swiper">
<!--
1 swiper标签存在默认的宽高 100% * 150px
2 image标签也存在默认的宽高 320px * 240px
3 设计图片和轮播图
1 先看一下原图的宽高 750px * 340px
2 让图片的高度自适应 宽度等于100%
3 让swiper标签的高度，变成和图片的高度一致
4 图片标签
mode属性 渲染模式
widthFix 让图片标签宽高和图片标签内容的宽高都等比例的发生变化
-->
<!-- circular衔接后，最后一张图后会衔接第一张图； -->
<swiper autoplay interval="3000" 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 class="index_cate">
<navigator
wx:for="{{catesList}}"
wx:key="name"
>
<image class="" src="" mode="widthFix" src="{{item.image_src}}"/>
</navigator>
</view>
<!-- 分类导航结束 -->
</view>
这里用了弹性盒子的知识，.index_cate是Flex容器。
设置navigator标签的flex: 1，则平分容器的空间。
这时，image的大小仍然很大，如下图
只有设置image标签的width:100%;之后，图标大小才能如预想那般显示。
设置navigator标签的padding: 10px;，让图标变得更小一些，（这里注意：图片已经是随宽度等比例大小变化）。
.index_cate{
display: flex;
navigator{
flex: 1;
padding: 10px;
image{
width:100%;
}
}
}
首页-楼层
请求URL：https://api-hmugo-web.itheima.net/api/public/v1/home/floordata
楼层结构
获取数据
<!-- 楼层开始 -->
<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">
<!--
mode="widthFix" 宽度指定后，高度会等比例自适应
-->
<image mode="widthFix" src="{{item1.floor_title.image_src}}"></image>
</view>
<!-- 内容 -->
<view class="floor_list">
<navigator
wx:for="{{item1.product_list}}"
wx:for-item="item2"
wx:for-index="index2"
wx:key="name"
>
<!--
1 第一张图片的高度是随着宽度变化的
2 后4张图片的高度是随着第一张图片的高度变化的，是它的一半
-->
<image mode="{{index2===0?'widthFix':'scaleToFill'}}" src="{{item2.image_src}}"></image>
</navigator>
</view>
</view>
</view>
<!-- 楼层结束 -->
楼层css优化
首页的index.less文件
1.设置导航标签浮动float: left;，宽度width:33.33%，从而每个导航标签的宽度都占屏幕的1/3；
2.设置第一张图盘的高度随着宽度变化，在wxml文件中设置图片标签的mode="{{index2===0?'widthFix':'scaleToFill'}}"；
3.后4张图片的高度是第1张图片的高度的一半。在浏览器中通过url查看第1张图片，得到高度为232 * 386，则设置其高度为 33.33vw * 386 / 232。通过子代选择器，选择后4张图片，设置高度为第1张图片的一半。
4.清除.floor_list的浮动
5.加上边框。这里注意：需要在全局设置navigator标签box-sizing: border-box;
6.设置.floor_list中的图片的宽高继承width: 100%; height: 100%;
.index_floor{
.floor_group{
.floor_title{
padding: 10rpx 0;
image{
width: 100%;
}
}
.floor_list{
// 清除浮动
overflow: hidden;
// 每张图片的宽度都是容器的1/3，后面4张的高度都是第1张的1/2.
navigator{
float: left;
width: 33.33%;
// &代表所有父选择器（不仅仅是最近的祖先）
// -n+2，表示倒数第4个元素，以及后边的所有元素。即后4个元素
&:nth-last-child(-n+4){
// 原图的宽高 232 * 386
// 第一张：232 / 386 = 33.33vw / height
// 100vw等于屏幕宽度
// 除法不支持的，加上()，这样wxss就可以算出值了。
height:((33.33vw * 386 / 232) / 2);
// 后4张图片加左边框
border-left: 10rpx solid #ffff;
}
// 2、3两个超链接
&:nth-child(2),
&:nth-child(3){
border-bottom: 10rpx solid #fff;
}
image{
width: 100%;
// 高要继承
height: 100%;
}
}
}
}
}
分类页面
效果
功能：
1.分析页面数据
2.点击
3.缓存
每次编辑保存页面时，项目都会重新跳回到首页。解决方法：
指定编译模式，其实就是设置小程序每次启动的页面而已。
注意：当前在哪个页面上添加编译模式，在启动页面项就会自动填充该页面。
编辑保存后，重新刷新后，就是这个页面。
页面布局
// category文件夹下的index.js文件
{
"usingComponents": {
"SearchInput":"../../components/SearchInput/SearchInput"
},
"navigationBarTitleText": "商品分类"
}