文章目录
1.小程序的第三方框架
- 腾讯 wepy 类似于vue
- 美团 mpvue 类似于vue
- 京东 tao 类似于react
- 滴滴 chameleon
- uni-app 类似于vue
- 原生框架MINA
2. 帮助文件
接口文档地址:https://www.showdoc.com.cn/128719739414963/2513235043485226
阿里巴巴字体iconfont:https://www.iconfont.cn/
即本项目的后台已经写好了,直接调用接口即可
3.项目的搭建
3.1新建小程序项目
填入自己的openID
3.2搭建目录结构
录名
作
styles
存放公共样式
components
存放组件
lib
存放第三库
utils
的帮助库
request
的接帮助库
3.3. 搭建项目的页面
名称
名称
index
分类
category
商品列表
goods_list
商品详情
goods_detail
购物
cart
收藏
collect
订单
order
搜索
search
个中
user
意反馈
feedback
登录
login
授权
auth
结算
pay
3.4. 引字体图标
1. 打开阿巴巴字体图标 站
https://www.iconfont.cn/
2. 选择的图标
选择自己想要的图标添加入库
3. 添加项
选择购物车图标
点击添加至项目(我选择了三个购物车的图标)
可以将其添加到一个已有的项目或者新建一个项目
本次项目所需要的图标
点击Font class生成代码
会生成一个class地址
4. 点击链接,复制样式,将其放入styles目录下的iconfont.wxss中
@font-face {
font-family: "iconfont"; /* Project id 3078102 */
src: url('//at.alicdn.com/t/font_3078102_um8ol0i9ny.woff2?t=1640609932945') format('woff2'),
url('//at.alicdn.com/t/font_3078102_um8ol0i9ny.woff?t=1640609932945') format('woff'),
url('//at.alicdn.com/t/font_3078102_um8ol0i9ny.ttf?t=1640609932945') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-weibiaoti2fuzhi08:before {
content: "e625";
}
.icon-shoucangxuanzhong:before {
content: "e62b";
}
.icon-fenxiang:before {
content: "e86e";
}
.icon-kefu:before {
content: "e88f";
}
.icon-dingdan:before {
content: "e645";
}
.icon-fukuantongzhi:before {
content: "e60c";
}
.icon-tuihuotuikuan_dianpu:before {
content: "e773";
}
.icon-shoucang:before {
content: "e8b9";
}
.icon-gouwucheman:before {
content: "e600";
}
.icon-gouwuchekong:before {
content: "e601";
}
.icon-gouwucheman1:before {
content: "e602";
}
5. 在app.wxss中导入要使用的样式
@import "./styles/iconfont.wxss"
3.5 创建tabbar页面
1. 在项目中创建icon文件夹,并将素材中的相关图标拷贝进入
2. 常见tabbar相关页面和样式
app.json中
{
"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"
],
"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"
}
]
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#eb4450",
"navigationBarTitleText": "黑马优购",
"navigationBarTextStyle":"white"
},
"style": "v2",
"sitemapLocation": "sitemap.json"
}
2.初始化页面
在app.wxss中
@import "./styles/iconfont.wxss";
/**在微信小程序中 不支持通配符* **/
page,view,text,swiper-item,image,navigator{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/**
主题颜色 通过变量来实现
less中存在变量这个知识点
原生的css和wxss也支持变量
**/
page{
/**定义主题颜色**/
--themeColor:#eb4450;
/**
统一字体大小
1px = 2rpx
**/
font-size: 20rpx;
}
==
4.1. 效果
4.2 使定义组件的式实现头部搜索框
1. 在components下面创建一个SearchInput组件,实现搜索的功能
2. 在SearchInput.wxml创建搜索导航
<view class="search_input">
<navigator url="/pages/search/index" open-type="navigate">
搜索
</navigator>
</view>
3. SearchInput.wxss中的样式
/* components/SearchInput/SearchInput.wxss */
.search_input {
height: 90rpx;
padding: 10rpx;
background-color: var(--themeColor);
}
.search_input navigator {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
border-radius: 15rpx;
color: #666;
}
4.引入所使用的组件
在pages/index/index.json中引入所使用的组件
{
"usingComponents": {
"SearchInput":"../../components/SearchInput/SearchInput"
},
"navigationBarTitleText": "优购首页"
}
5.使用组件
在pages/index/index.wxml
<view class="pyg_index">
<!--搜索框开始-->
<SearchInput></SearchInput>
<!--搜索框结束-->
</view>
4.3 首页轮播图
1. 网络请求获取轮播图的数据
在pages/index/index.js下
Page({
/**
* 页面的初始数据
*/
data: {
//轮播图数组
swipperList:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
//异步请求获取轮播图的数据
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata',
success:(result)=>{
this.setData({
swipperList:result.data.message
})
}
});
}
})
接口调用结果显示
没有结果显示解决办法
-
没有添加appid,点击详情按钮,选择不校验合法域名
-
为了后面的开发管理和部署上线,选择开发管理中的服务设置,设置服务器的域名
2. 轮播图动态渲染
在pages/index/index/wxml中<!--轮播图开始--> <view class="index_swiper"> <!-- 1.swiper标签存在默认高度和宽度 100%*150px 2.image标签也存在默认宽度和高度 320px*240px 3.设计轮播图 先看原图的高度 750*340 让图片高度自适应 宽度等于100% 让swiper的高度和图片高度一样即可 4.图片标签 mode属性渲染模式 widthfix 让标签的宽高和标签内容的宽高发生等比例的变化 --> <swiper autoplay indicator-dots circular> <swiper-item wx:for="{ {swipperList}}" wx:key="goods_id"> <navigator> <image mode="widthfix" src="{ {item.image_src}}"></image> </navigator> </swiper-item> </swiper> </view> <!--轮播图结束-->
相应的wxss
.index_swiper swiper {
width: 750rpx;
height: 340rpx;
}
.index_swiper swiper image {
width: 100%;
}
3. 将原生的请求改为promise方式
-
在request的目录下创建index.js
export const request=(params)=>{
return new Promise((resolve,reject)=>{ wx.request({ ...params, success:(result)=>{ resolve(result); }, fail: (err)=>{ reject(err) } }); } )
}
-
在pages/index/index.js中加入request.js的路径
import {request} from “…/…/request/index.js”
-
请求路径的改写
onLoad: function (options) {
//异步请求获取轮播图的数据
// wx.request({
// url: ‘https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata’,
// success:(result)=>{
// this.setData({
// swipperList:result.data.message
// })
// }// }); request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata'}) .then(result=>{ this.setData({ swipperList:result.data.message }) })
},
4.4 首页分类导航模块
1. 请求接口数据
在pages/index/index.js中获取导航数据
//获取导航数据
getCatesList(){
request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'})
.then(result=>{
this.setData({
catesList:result.data.message
})
})
}
2. 页面进行导航数据的显示
在pages/index/indedx.wxml中进行导航数据的显示
<!--导航开始-->
<view class="index_cate">
<navigator
wx:for="{
{catesList}}"
wx:key="name"
>
<image mode="widthFix" src="{
{item.image_src}}">
</image>
</navigator>
</view>
<!--导航结束-->
3. css样式
.index_cate {
display: flex;
padding: 20rpx;
}
.index_cate navigator {
flex: 1;
}
.index_cate navigator image {
width: 100%;
}
4.5 首页楼层模块
1. 获取接口数据
pages/index/index.js
//获取楼层的接口数据
getFloorList(){
request({url:'https://api-hmugo-web.itheima.net/api/public/v1/home/floordata'})
.then(result=>{
this.setData({
floorList:result.data.message
})
})
}
2. 内容显示
pages/index/index.wxml
<!--楼层开始-->
<view class="index_floor">
<view >
<view wx:for="{
{floorList}}"
wx:for-item="item1"
wx:for-index="index1"
wx:key="floor_title"
class="floor_group"
>
<!--标题-->
<view class="floor_title" >
<image src="{
{item1.floor_title.image_src}}" mode="widthFix" ></image>
</view>
<!--内容-->
<view class="floor_list">
<navigator
wx:for="{
{item1.product_list}}"
wx:for-item="item2"
wx:for-index="index2"
wx:key="name">
<image src="{
{item2.image_src}}" mode="{
{index2===0?'widthFix':'scaleToFill'}}"/>
</navigator>
</view>
</view>
</view>
</view>
<!--楼层结束-->
3. 导入样式
pag