目录
uni-app简介
uniapp是一个使用vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、等快应用等多个平台。
工具
HBuilder X、微信开发者工具
总结
本学期老师通过多乐商城项目带领我们学习和了解uniapp框架。
项目搭建
接口文档
帮助文档
阮一峰的flex教程:Flex 布局教程:语法篇 - 阮一峰的网络日志https://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
Vue官网:https://cn.vuejs.org/v2/guide/https://cn.vuejs.org/v2/guide/
微信小程序官网:微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/framework/
目录结构
common:存放公共样式
components:存放自定义组件
page:存放主包页面(tab页面)
subpkg1:子包1,存放子包页面(商品列表页面、商品详情页面、搜索页面)
subpkg2:子包2,存放子包页面(其他页面)
utils:自己的帮助库
页面
字符图标
首页
效果
业务逻辑
1.使用tabbar实现底部导航功能
2.使用自定义组件的方式实现 头部搜索框
3.加载 轮播图 数据
4.加载 导航 数据
5.加载 楼层 数据
<script>
export default {
data() {
return {
swiperList: [], //轮播图数据
navList: [], //导航栏
floorList: [] //楼层
}
},
onLoad() {
this.getSwiperList();
this.getNavList();
this.getFloorList();
},
methods: {
async getSwiperList() {
const res = await this.$Https({
url: '/home/swiperdata'
});
console.log(res);
this.swiperList = res.message;
},
async getNavList() {
const res = await this.$Https({
url: '/home/catitems'
});
console.log(res);
this.navList = res.message;
},
getFloorList() {
this.$Https({
url: '/home/floordata'
}).then((res) => {
this.floorList = res.message;
console.log(this.floorList);
})
}
关键技术
1.全局样式设置
2.自定义组件 实现 搜索框
3.uni内置 request API
4.swiper 组件
swiper组件标签存在默认的宽度与高度
100%*150px
图片存在默认宽度与高度
320px*240px
5.uni.request的封装
分类页面
效果
业务逻辑
1.加载分类页面数据
<script>
export default {
data() {
return {
cateData: [], //全部分类数据
leftList: [], //左侧菜单数据
rightList: [],
currentIndex:0
}
},
methods: {
//获取分类数据
async getCateData() {
const res = await this.$Https({
url: '/categories'
});
// console.log(res);
//获取全部分类数据
this.cateData = res.message;
console.log(this.cateData);
try{
uni.setStorageSync('cates', {
time: Date.now(),
data: this.cateData
});
} catch (e) {
uni.showToast({
tital: "数据缓存失败",
duration:2000
})
}
//构建左侧菜单数据
this.leftList = this.cateData.map(v => v.cat_name);
console.log(this.leftList);
//构建右侧数据(2级+3级)
this.rightList = this.cateData[0].children;
console.log(this.rightList);
},
changeIndex(index){
this.currentIndex=index;
this.rightList = this.cateData[index].children;
}
},
onLoad() {
// this.getCateData();
//
//
const Cates = uni.getStorageSync('cates');
if (!Cates) {
this.getCateData();
} else {
if ((Date.now() - Cates.time) > 1000 * 10) {
this.getCateData();
} else {
console.log('使用旧数据');
this.cateData = Cates.data;
//
this.leftList = this.cateData.map(e => e.cat_name);
//
this.rightList = this.cateData[0].children;
}
}
}
}
2.点击左侧菜单,右侧数据动态渲染
关键技术
1.scroll-view 组件
商品列表页面
效果
业务逻辑
1.加载商品列表数据
2.启动上拉页面功能 onReachBotton 页面触底事件
3.加载下一面功能
4.启用下拉页面功能
(1)页面的json文件中开启设置 enablePullDownRefresh:true
(2)页面的js中,绑定事件 onPullDownRefresh
<script>
export default {
data() {
return {
//选项卡数据
tabsList: [{
id: 0,
value: "综合",
isActive: true
}, {
id: 1,
value: "价格▲",
isActive: false
}, {
id: 2,
value: "价格▼",
isActive: false
}],
//向商品列表搜索接口发请求时发送的数据
queryParam: {
query: '',
cid: '', //3级类id
pagenum: 1, //当前页码。接口默认为1
pagesize: 10 //每页数据条数。接口默认为20
},
goodsList: []
};
},
//Onload参数为上个页面(分类页)传递的数据,参数类型为Object(用于页面传参)
onLoad(e) {
this.queryParam.cid = e.cid
this.getGoodsList()
},
//页面下拉加载
//
onReachBottom() {
//判断是否还有下一页,如当前页面大于等于总页数,则没有下一页
if (this.queryParam.pagenum >= this.totalPageCount) return uni.showToast({
title: '到底啦~'
})
//获取下一页数据
this.queryParam.pagenum++;
this.getGoodsList();
},
//下拉刷新
//1重置数据 2重置页码为1 3重新发请求 4关闭等待效果
onPullDownRefresh() {
//1重置数据
this.goodsList = [];
//2重置页码为1
this.queryParam.pagenum = 1;
//3重新发送请求
setTimeout(() => {
//数据请求发送成功后去掉下拉
this.getGoodsList(() => uni.stopPullDownRefresh());
}, 1000)
},
methods: {
//切换选项卡
handleTabsChange(activeId) {
this.tabsList.forEach(v => v.id == activeId ? v.isActive = true : v.isActive = false);
},
//获取商品列表
async getGoodsList(cb) {
const res = await this.$Https({
url: '/goods/search',
data: this.queryParam
});
console.log(res);
// this.goodsList=res.message.goods
//只要数据请求完毕,就立即按需调用cb回调函数
cb && cb();
//计算总页数
this.totalPageCount = Math.ceil(res.message.total / this.queryParam.pagesize);
//为数据赋值 通过扩展运算符的形式,进行新旧数据拼接
this.goodsList = [...this.goodsList, ...res.message.goods]
console.log(this.goodsList);
}
}
}
</script>
关键技术
1.配置文件中 启动上拉及下拉功能