概述
【项目技巧】UNIAPP商城+侧边栏+数据请求+购物车逻辑+本地缓存+楼层布局+滚动到底部刷新-搜索防抖
封装UNIAPP的数据请求
- 设置根路径 方便拼接
- export全局导出
- new Promis方便调用的时候通过.then .catch抓取
在main.js中引入 通过Vue.prototype.自定义方法 = 封装的请求函数名
import {Request} from './network/api.js'
Vue.prototype.$Request = Request
使用方法
//在你想要的事件内使用
created() {
this.$Request({
url: 'home/floordata',//请求路径
data:{},//请求体 对象
methods://请求方法 默认是GET,字符串 大小写都可
}).then((res) => {
//把获取到的数据保存到data中
this.productList = res.data.message
})
}
封装请求
在微信小程序中封装请求
新建一个js文件叫request 下面是代码
引入方法: 在需要用到的组件内按需引入引入
楼层布局
思路 第一张的图片高度不变化 后面四张的图片要和 等比例的宽高的一般
已知 第一张 宽度232 高度386 第二张的宽度33.33vw 求第二张的高度
计算公式 高度除以宽度 乘以 第二张的宽
386/232 = x ? * 33.33vw
x = 33.33vw * 386/232
最后后面四张高度除以2 才能和第一张大图片相等
然后做判断 如果是第一张那么就使用宽高不变 如果不是就和设置好的宽高相同
widthFix宽度不变，高度自动变化，保持原图宽高比不变
scaleToFill不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
分类布局-重点
先把结构分析
分类布局-缓存-按需加载数据
下列是代码
<view class="cates_contents">
<!-- 左侧菜单 -->
<scroll-view scroll-y='true' class="left_menu" scroll-with-animation>
<view :id="'left'+index" :class="index == currentIndex ? 'active left_list' : 'left_list'"
v-for="(item,index) in leftContents" @click="leftMenu(index, item,$event)" :data-myid="index">
{{item}}
</view>
</scroll-view>
<!-- 右侧菜单 -->
<scroll-view scroll-y='true' class="right_menu" :scroll-into-view="rightId">
<view class="right_list" v-for="(item,index) in rightContents" :id="'right'+index" :data-myid="index">
<view class="titles">
/{{item.cat_name}}/
</view>
<view class="goodsinfo">
<navigator open-type="navigate" v-for="list in item.children">
<image :src="list.cat_icon" mode="widthFix"></image>
<view class="goodsname">
{{list.cat_name}}
</view>
</navigator>
</view>
</view>
</scroll-view>
</view>
分别在data保存数据 总数据 左侧数据 右侧数据
下列分别样式点击事件 和 数据渲染
由于数据众多 需要按需渲染
- 默认渲染总数据中的第0项
-缓存-本地载入数据-优化数据请求-重点
** 把数据存储到本地 同时把当前的时间戳存入 用来做过期判断**
把数据存储到本地 需要在渲染
执行步骤 get把本地数据调用出来做判断
- 先判断get获取本地数据做判断
- 如果本地没有数据 那么就调用请求渲染
- 如果有再判断有没有过期 利用当前的时间戳 减去之前存入的时间 如果超过10秒也重新调用
- 直接把本地数据给 组件中的data数据 重新渲染
web本地存储 和 小程序存储的区别
滚动到底部加载下一页的数据
上拉加载
页面到底部的生命周期事件
业务逻辑
下拉到底部 当前的页码值加+1 并且重新请求数据
如果当前的页码值 大于 或者 等于 总页码值 说明没有数据了 总页数= total(总条数)/pagesize(当前页面容量)
下拉刷新
购物车页面的逻辑 添加的逻辑
注意存入的时候 放入一个checked的属性用来做全选反选的判断
//购物车点击
CartClick(){
//1.获取本地的数据 用来做判断 如果没有数据 则是一个空数组
let carts = uni.getStorageSync('carts')||[]
//2.遍历本地数据 判断当前的id和本地的是否相等 如果相等 返回当前索引 (findindex判断不相等返回-1 否则匹配返回当前的索引)
let goodsindex = carts.findIndex(item => item.goods_id == this.goodsDetail.goods_id)
console.log(goodsindex)
//如果 ==-1 说明数组里面找不到id(或者是空数组) 是第一次添加 则存入
if (goodsindex === -1){
//第一加入给他数量等1
this.goodsDetail.num = 1
//存入的时候 默认给一个复选框的状态 用于全选反选
this.goodsDetail.checked = true
//添加到carts的空数组中
carts.push(this.goodsDetail)
}
//否则 相等说明本地数据的数量要+1
else{
carts[goodsindex].num++
}
//把数据重新添加回缓存中
uni.setStorageSync('carts',carts)
uni.showToast({
title:'加入成功',
icon:'success',
mask:true
})
}
购物车的价格-总条数-全选-反选||every()方法全部为true返回true
业务逻辑
1.在onShow生命周期中获取数据渲染
onShow() {
//获取本地数据如果没有则返回空数组
const carts = uni.getStorageSync('carts') || []
this.cartList = carts
//计算全选 计算总价
this.setCart()
}
2.data中需要的数据
3.封装一个计算全选状态-和-总价-总数量
//计算全选 计算总价
setCart(){
//1.计算全选 计算复选框的状态 every数组方法会遍历会接收一个回调函数那么每一个回调函数都返回true那么every方法的返回值true
//只要有一个回调函数返回了false那么不再循环执行，直接返回false
//不确定本地数据时候是空数组 空数组调用every，返回值就是true 所以先做判断 如果数组类的值不为空
this.allChecked = this.cartList.length !== 0 ? this.cartList.every(item => item.checked) : false
//默认为值都为0便于计算
this.totalNum = 0
this.totalPrice = 0
//计算总价格 和总数量
this.cartList.forEach(item => {
//计算全选中的价格和总数量
if(item.checked){
this.totalPrice += item.num * item.goods_price
this.totalNum += item.num
}else{
this.allChecked =false
}
})
},
监听复选框的点击 每次点击传入id用于获取 改商品的索引
//监听复选框点击
handleItemChange(id){
//获取当前的索引
const index = this.cartList.findIndex(item=> item.goods_id === id)
//每次 点击当前的复选框状态取反
this.cartList[index].checked = !this.cartList[index].checked
//把数据重新存入
uni.setStorageSync('carts',this.cartList)
//调用计算
this.setCart()
},
监听全选框点击
//监听全选点击
allCheckedchange(){
//如果没有全选
//那么就把所有商品的状态变为true
if(!this.allChecked){
this.cartList.map(item=>{
item.checked = true
})
this.setCart()
}else{
this.cartList.map(item=>{
item.checked = false
})
this.setCart()
}
}
监听±
//监听加号
//不能让他小于0
subNum(index) {
if (this.cartList[index].num <= 1) {
return
}
this.cartList[index].num--
uni.setStorageSync('carts',this.cartList)
this.setCart()
},
//监听减号
addNum(index) {
this.cartList[index].num++
uni.setStorageSync('carts',this.cartList)
this.setCart()
// console.log(index)
},
结算-微信支付流程
先把没有选中的数据过滤掉
第一步获取token授权
点击判断缓存中有没有token 没有就跳转到新页面获取授权 存入token
跳转到新页面获取授权 getUserInfo bindgetuserInfo 可以获取用户信息
获取所需要的请求体 用于发送post请求token
**此时我们已经拿到接口所需的五个参数了 请求数据 **
最后把token存入到缓存中 并且返回到支付页面
第二步创建订单
准备请求头 和 请求体
这是goods数组遍历出来的对象
这是请求返回的res参数 返回获取到订单编号
第三步准备预支付
利用订单编号 以及 请求头获取数据
这些参数就是微信支付需要用到的参数了
第四步微信支付
我们有了这些数据可以通过api接口调用微信支付
wx.requestPayment
微信支付
封装了一下
最后一步 查看订单支付状态
返回支付成功
try catch捕获失败后的提示
登录
我的订单信息
由于请求需要带type值 我们可以在链接跳转的时候带上
我们需要拿到页面跳转的url携带的参数 但是onShow生命周期拿不到options的url携带参数
**可以利用微信小程序的页面栈 **
这里是从用户页面 转入 商品信息页面 可以看到有两个数组 最后的哪一个就是当前页面
对时间戳的显示做格式转换 或者是用monment的插件
默认是这样
修改后的
商品收藏 || some方法 有一个为true就方法true
1.默认值为false未选中
2.点击商品收藏事件
- 先获取缓存中的商品收藏
- 利用findIndex遍历变量缓存中的id 判断是否有当前项目
- 如果不等于-1说明已经收藏过 删除
- 反之 把商品存入
商品搜索
商品搜索-防抖的实现
由于每次输入都会请求 我们不需要这么频繁
防抖
防抖
- 先定一个定时器变量 值为什么都可以
- 先清楚这个定时器
- 再1秒后执行这个定时器
应用场景 每次输入都会如下代码 执行顺序 如果输入的是第一个字 先清楚定时器 然后1秒钟后执行 如果一秒内再次输入会清除当前的定时器内的函数执行不执行后台请求，如果1秒内没有输入 就请求
最后
以上就是饱满钥匙为你收集整理的【项目技巧】UNIAPP商城+侧边栏+数据请求+【项目技巧】UNIAPP商城+侧边栏+数据请求+购物车逻辑+本地缓存+楼层布局+滚动到底部刷新-搜索防抖封装UNIAPP的数据请求在微信小程序中封装请求楼层布局分类布局-重点分类布局-缓存-按需加载数据-缓存-本地载入数据-优化数据请求-重点web本地存储 和 小程序存储的区别滚动到底部加载下一页的数据下拉刷新购物车页面的逻辑 添加的逻辑购物车的价格-总条数-全选-反选||every()方法全部为true返回true结算-微信支付流程第一步获取to的全部内容，希望文章能够帮你解决【项目技巧】UNIAPP商城+侧边栏+数据请求+【项目技巧】UNIAPP商城+侧边栏+数据请求+购物车逻辑+本地缓存+楼层布局+滚动到底部刷新-搜索防抖封装UNIAPP的数据请求在微信小程序中封装请求楼层布局分类布局-重点分类布局-缓存-按需加载数据-缓存-本地载入数据-优化数据请求-重点web本地存储 和 小程序存储的区别滚动到底部加载下一页的数据下拉刷新购物车页面的逻辑 添加的逻辑购物车的价格-总条数-全选-反选||every()方法全部为true返回true结算-微信支付流程第一步获取to所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复