wx.hideLoading()
}
})
})
}
// 封装 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分钟,不发送网络请求，渲染本地的数据');
}
}
},
icon图标解决法
微信小程序不支持css样式，所以无法直接引入生成代码链接，解决方法blog.csdn.net/m0_57904695…https://blog.csdn.net/m0_57904695/article/details/121408946
更新中。。
学习笔记
主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue等等
HTML/CSS
**HTML：**HTML基本结构，标签属性，事件属性，文本标签，多媒体标签，列表 / 表格 / 表单标签，其他语义化标签，网页结构，模块划分
**CSS：**CSS代码语法，CSS 放置位置，CSS的继承，选择器的种类/优先级，背景样式，字体样式，文本属性，基本样式，样式重置，盒模型样式，浮动float，定位position，浏览器默认样式
HTML5 /CSS3
**HTML5：**HTML5 的优势，HTML5 废弃元素，HTML5 新增元素，HTML5 表单相关元素和属性
**CSS3：**CSS3 新增选择器，CSS3 新增属性，新增变形动画属性，3D变形属性，CSS3 的过渡属性，CSS3 的动画属性，CSS3 新增多列属性，CSS3新增单位，弹性盒模型
JavaScript
**JavaScript：**JavaScript基础，JavaScript数据类型，算术运算，强制转换，赋值运算，关系运算，逻辑运算，三元运算，分支循环，switch，while，do-while，for，break，continue，数组，数组方法，二维数组，字符串
