// 封装 showToast
export const showToast = (params) => {
return new Promise((resolve, reject) => {
wx.showToast({
…params,
success: (res) => {
resolve(res)
},
fail: (err) => {
reject(err)
},
complete: (res) => { },
})
})
}
// 封装 login
export const login = () => {
return new Promise((resolve, reject) => {
wx.login({
success: (res) => { resolve(res) },
fail: (err) => { reject(err) },
timeout: 5000,
})
})
}
使用export单个导出,在页面使用需要用{xx,xxx}
当然了一般我使用uniapp开发,这样开发实在是太慢,uniapp也有源码,需要就上传,比这个demo要为详细
添加购物车逻辑(经典)
// 添加购物车
add_cart() {
// console.log(123);
// 获取购物车数据或空,第一次获取是空,
let getStorag = wx.getStorageSync(‘cart’) || [];
// (如果从本地取出来的数据id===定义的总数据的id) == -1,
if (getStorag.findIndex(v => v.goods_id === this.data.detailList.goods_id) == -1) {
//不存在 第一次添加加字段num=1 push 追加
this.data.detailList.num = 1;
// 添加字段checked 购物车要用但是数据里没有
this.data.detailList.checked = true;
// 全部push
getStorag.push(this.data.detailList)
} else {
// 已存在 num++ 让当前的++
getStorag[getStorag.findIndex(v => v.goods_id === this.data.detailList.goods_id)].num++;
}
// 添加到本地存储
wx.setStorageSync(‘cart’, getStorag);
this.num();
wx.showToast({
title: ‘添加购物车’, //提示的内容,
icon: ‘success’, //图标,
duration: 500, //延迟时间,
mask: true, //显示透明蒙层,防止触摸穿透,
success: res => { }
});
},
上滑加载、下拉刷新
// 手指滑动到底部后触发 ‘触底刷新加载更多操作’
bottomRefresh() {
if (this.data.buttom_num) {
this._setgetType();
this.data.ind++//++的时候标题跑到下页面但是,内容还在这一页,所以赋值的时候内容滑动ind+1
this.data.flag = (this.data.ind - 1)
}
this.setData({
ind: this.data.ind,
flag: this.data.flag,
})
},
// scrolltoupper 上滑事件
scrolltoupper() {
// console.log(1);
if (this.data.top_num) {
this._setgetType();
this.data.ind–
this.data.flag = (this.data.ind + 1)//默认滑动下标赋值flag falg====index显示border 滑动让border跟着变
}
this.setData({
ind: this.data.ind,
flag: this.data.flag,
})
},
本地存储设置过期时间,优化网络请求法
getType() {
request({
url: ‘/categories’,
method: ‘get’,
timeout: ‘5000’
}).then(result => {
this.data.cates = result;
// console.log( this.data.cates);
// 存入本地存储 字段时间和数据 //Date.now()当前事件 new Date.getTime() 获取时间戳
wx.setStorageSync(‘cates’, { time: Date.now(), data: this.data.cates })
let left_title = this.data.cates.map(v => v[this.data.ind].cat_name);//精准快速查找每一条和filter异曲同工
let right_main = this.data.cates[this.data.ind].children;//默认渲染总数据里的第一个children,大家电下标是0,默认渲染children下标是0,就可以点击右侧名称根据下标切换内容
this.setData({//这里面的就是响应式的
left_title, right_main
})
}).catch(err => {
console.log(err);
})
},
// 封装优化请求,请求的时候存本地且不过期,就使用本地数据,否则重新请求,在页面加载调用一下这个函数,不去直接调用getType请求接口
_setgetType() {
// 判断本地有没有数据
const cates = wx.getStorageSync(‘cates’);
if (!cates) { // 如果本地没有cates,就网络请求数据
this.getType()
} else {//本地有数据判断是否过期了
if (Date.now() - cates.time > 1000 * 300 == true) {
this.getType()//当前时间 - 存的时间 > 5分钟 = 间隔时间 5分钟外就重新调用
} else {//有数据没过期时
this.data.cates = cates.data;//将本地的数据赋值给定义的总数据data里的cates
let left_title = this.data.cates.map(v => v.cat_name);//map函数查到cat_name
let right_main = this.data.cates[this.data.ind].children;//默认渲染总数据里的第一个children。家电下标是0,默认渲染children下标是0,就可以点击右侧名称根据下标切换内容
this.setData({//这里面的就是响应式的
left_title, right_main
})
console.log(‘本地有数据,且没有过期大于5分钟,不发送网络请求,渲染本地的数据’);
}
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后:
总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。
面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。
(备注:前端)**
[外链图片转存中…(img-SI4Dqmtq-1713839037522)]
最后:
总结来说,面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气,但是我们可以在别的地方花更多时间,每个环节都提前做好准备。
面试一方面是为了找到工作,升职加薪,另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚,更重要的是在平时学习和工作中不断积累和坚持,把每个知识点、每一次项目开发、每次遇到的难点知识,做好积累,实践和总结。