uni-shop 总结

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方法 触底会自动触发

1. 节流阀防止数据发起额外的请求

定义一个变量 请求前为true 请求完为false 这样就不会频繁请求了 后面如果这个变量是true 才会继续触发下一次请求

2. 根据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(/

.webp 格式的图片不显示 也可以使用这个方法替换成jpg

价格闪烁的问题 是因为数据请求回来之前是undefined 所以加个if判断就行了 请求出来数据再渲染价格

15 goodsNav 商品导航区域

uni-app 自带的 通过配置options 和 buttonGrop

16 vuex

vue2 使用的是v3版本 vue3使用的是 v4版本

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules:{}
})

export default store

创建一个store目录 store.js文件 写上上面的内容 然后在main.js导入 挂在到app实例上

import store from "./store/store.js"
const app = new Vue({
	...app,
	store,
})

具体可以去官网看怎么用 有教程 模块化要开启命名空间 namespaced:true

17 添加购物车思想

使用find 看看购物车是否存在这个商品 返回商品本身 没有返回undefined
判断如果没有就Push 如果有 就count+1
uni.setTabBarBadge可以设置tabbar的数字徽标

18 uni-ui 的NumberBox 商品数量增加减去

解决numberBox 数据不合法的问题

找到这个组件的这个方法
_onblur(event) {
	let value = parseInt(event.detail.value)
	if(!value) {
		 this.inputValue = 1
		 return ;
	}
}

完善numbrbox组件的 inputValue监听器
if(+newValue !== +oldValue && Number && String(newValue).indexOf(‘.’) === -1)

滑动删除 uni-swipe-action uni-swipe-action-item
判断是否为空对象 JSON.stringify() === ‘{}’

16 选择地址

uni.chooseAddress api

const [err, succ] = await uni.chooseAdderss()
if(err == null && succ.errMsg = 'chooseAdderss:ok') {

}