Uniapp商城项目实战技巧

1.配置网络请求

由于平台的限制，小程序项目中不支持 axios，而且原生的 wx.request() API 功能较为简单，不支持拦截器等全局定制的功能。因此，建议在 uni-app 项目中使用 @escook/request-miniprogram 第三方包发起网络数据请求。

请参考 @escook/request-miniprogram 的官方文档进行安装、配置、使用

官方文档： https://www.npmjs.com/package/@escook/request-miniprogram
最终，在项目的 main.js 入口文件中，通过如下的方式进行配置：

安装 npm install @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.封装 uni.$showMsg() 方法

当数据请求失败之后，经常需要调用 uni.showToast({ /* 配置对象 */ }) 方法来提示用户。此时，可以在全局封装一个 uni.$showMsg() 方法，来简化 uni.showToast() 方法的调用。具体的改造步骤如下：

1. 在 main.js 中，为 uni 对象挂载自定义的 $showMsg() 方法：

// 封装的展示消息提示的方法
uni.$showMsg=function(title ='数据加载失败！', duration =1500){
  uni.showToast({
    title,
    duration,
    icon:'none',})}

2.今后，在需要提示消息的时候，直接调用 uni.$showMsg() 方法即可：

asyncgetSwiperList(){const{ data: res }=await uni.$http.get('/api/public/v1/home/swiperdata')if(res.meta.status !==200)return uni.$showMsg()this.swiperList = res.message
}

2. CSS属性美化样式

// 文字不允许换行（单行文本）white-space: nowrap;
// 溢出部分隐藏overflow: hidden;
// 文本溢出后，使用 ... 代替text-overflow: ellipsis;

2.将搜索关键词存入 historyList

// 2.1 直接把搜索关键词 push 到 historyList 数组中this.historyList.push(this.kw)

2.1 解决关键字前后顺序的问题

1. data 中的 historyList 不做任何修改，依然使用 push 进行末尾追加

2. 定义一个计算属性 historys，将 historyList 数组 reverse 反转之后，就是此计算属性的值：

// 注意：由于数组是引用类型，所以不要直接基于原数组调用 reverse 方法，以免修改原数组中元素的顺序// 而是应该新建一个内存无关的数组，再进行 reverse 反转return[...this.historyList].reverse()

// 保存搜索关键词为历史记录saveSearchHistory(){// this.historyList.push(this.kw)// 1. 将 Array 数组转化为 Set 对象constset=newSet(this.historyList)
// 2. 调用 Set 对象的 delete 方法，移除对应的元素set.delete(this.kw)
// 3. 调用 Set 对象的 add 方法，向 Set 中添加元素set.add(this.kw)
// 4. 将 Set 对象转化为 Array 数组this.historyList = Array.from(set)}

3. 使用过滤器处理价格

---

data 节点平级，声明 filters 过滤器节点如下：

filters:{// 把数字处理为带两位小数点的数字tofixed(num){returnNumber(num).toFixed(2)}}

1. 在渲染商品价格的时候，通过管道符 | 调用过滤器：

<!-- 商品价格 --><viewclass="goods-price">￥{{goods.goods_price | tofixed}}</view>