1 配置http请求
小程序不支持 axios 因此使用插件
@escook/request-miniprogram 可以按需导入
import {$http} from '@escook/request-miniprogram'uni.$http = $http$http.baseUrl = 'https://www.uinav.com'$http.beforeRequest = function(options) {uni.showLoading({title:'数据加载中',})
}$http.afterRequest = function() {uni.hideLoading()
}
支持请求拦截器 和响应拦截器
2 配置小程序的分包
除了tabbar页面在主包 其他的都放分包里面 创建一个subpkg文件夹 然后在page.json里面 与pages同级创建
"subPackages": [{"root": "subpkg","pages": [],
在subpkg里面创建分页面 就会自动填充到subPackages里面 创建的时候 记得指定是subpkg
、
3二次封装 uni.showToast方法
为了方便弹出信息
在main.js定义如下
uni.$showMsg = function(title='数据加载失败', duration = 1500) {uni.showToast({title,duration,icon: 'none'})
}
这样就可以直接用uni.$showMsg来弹出信息了
4 uni.getSystemInfo 拿到可用的高度 windowHeight
5 滑动的时候 切换分类 重置滚动条位置
绑定scroll-top属性 定义初始值为0 当切换的时候 重新赋值
this.scrollTop = this.scrollTop == 0? 1 : 0
因为这里 都是0 所以滚动条不生效 所以改成1 视觉上不变
6 搜索组件的吸顶效果
定义样式
position:sticky;
top:0;
z-index:999
7 uni-search 自动获取焦点
去源码里面 修改 show showsync 为true就行了
8 搜索框的防抖处理
input(e) {clearTimeout(this.timer)this.timer = setTimeout( () => {console.log(e)
}, 500)
}
500毫秒内只要不输入就会请求 如果重新输入了 就清除计时器重新⏲
9 解决搜索历史2Bug
1 push 添加在数组后面 使用计算属性 然后reverse 变成最前面
2 重复 使用set数组去重
这里为了去掉以前重复的数据 需要这样来处理
const set = new Set(this.historyList)
set.delete(this.kw) #新数据
set.add(this.kw)
this.historyList = Array.from(set)
10 持久化存储历史搜索
uni.setStorageSync(‘kw’, JSON.stringfity(this.histiryList)) 这里转化为字符串 不能存数组
然后onload的时候 再 JSON.parse 拿到
11 下拉加载更多
在pages.json 里面页面里面定义一个style 里面有onReachBottomDistance 设置触底的距离 一般是150 然后在methods里面定义onReachBottom方法 触底会自动触发
- 节流阀防止数据发起额外的请求
定义一个变量 请求前为true 请求完为false 这样就不会频繁请求了 后面如果这个变量是true 才会继续触发下一次请求
- 根据total 判断数据是否请求完
this.queryObj.pageNum * this.queryObj.pageSize >= this.total
return uni.showMsg(‘数据加载完毕’)
12 下拉刷新
1 style 里面enablePullDownRefresh 设置为true 也可以设置 backbroundColor颜色
2 methods 中定义onPullDownRefresh 方法 会监听下拉刷新
重置数据 重新发起数据请求 同时 请求结束 应该关闭这个下拉刷新的界面
this.getGoodsList(() => uni.stopPullDownRefresh())getGoodsList(cb) {
....请求结束后
cb && cb() 如果有回调函数就调用
}
13 大图预览效果
在image上绑定方法 然后使用如下的内置方法就行了 current表示当前预览的图片 urls是所有预览的图片地址
uni.previewImage({current: i,urls: this.goods_info.pics.map(item => item.big_pic)
})
14 rich-text 富文本渲染html
rich-text node 绑定就行 图片上下有空白 使用display:block解决 如果是html 可以用正则来替换
info = info.replace(/<img /g/, '/img style="display:block"')
.webp 格式的图片不显示 也可以使用这个方法替换成jpg
价格闪烁的问题 是因为数据请求回来之前是undefined 所以加个if判断就行了 请求出来数据再渲染价格
15 goodsNav 商品导航区域
uni-app 自带的 通过配置options 和 buttonGrop
