小程序踩坑日记(基于uniapp)

最新推荐文章于 2026-01-14 17:36:58 发布

原创最新推荐文章于 2026-01-14 17:36:58 发布 · 491 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #npm #webpack

小程序专栏收录该内容

1 篇文章

订阅专栏

本文档记录了基于uniapp的小程序开发过程中遇到的问题及解决方案，包括 vant-ui 的集成与样式覆盖，组件事件绑定，区域滚动处理，input防抖动策略，以及购物车数据管理和计数器的优化。在 vant-ui 使用时，强调了查看文档完整性和检查DOM的重要性；在封装请求和处理区域滚动时，介绍了小程序特定组件的运用；对于input防抖，提出了直接在绑定函数内处理的方案；最后，讨论了购物车数据存储和显示的同步问题。

项目搭建

vant-ui使用

在 src 目录下创建了个 wxcomponents ，然后把 vant-ui 的github上的dist拖到 wxcomponents/vant目录下
使用的时候在 pages.json 里挂载一下

{
	"path": "pages/mine/edit-user",
	"style": {
		"usingComponents": {
			"van-button": "/wxcomponents/vant/dist/button/index"
		}
}

样式覆盖

新手看文档要有头有尾，不然都不知道不报错也没效果是为什么

vant组件使用标签名写样式覆盖的时候，注意去控制台检查元素再看看
有可能你拿到的不是你想的元素（van-button），可能是他下一层的(.vant-button)

组件使用

添加相应样式时，记得要 v-bind/: 绑定，组件的相关事件用 @ 绑定

封装请求

export default function (config) {
  // 从参数中解构 baseURL 参数
  const {baseURL} = config;
  return function (Vue) {
    // 挂载全局方法
    Vue.prototype.http = async function (params) {
      // 请求参数
      const {url, method, data, header} = params;
      // 显示加载框
      uni.showLoading({
        title: '正在加载...',
        mask: true
      });
      // 发出请求
      const res = await uni.request({
        url: baseURL + url,
        method,
        header,
        data
      });
      // 关闭加载框
      uni.hideLoading();
      // 请求响应的数据
      return res.data;
    }
  }
}

区域滚动

当在页面中，某一指定区域需要单独的滚动效果，如果不进行处理会与页面的滚动造成冲突
可以使用小程序专门的组件 scroll-view
区域滚动

input防抖动

刚开始是想封装一个debounce全局函数

const debounce = (ms) => {
  return new Promise((resolve, reject) => {
    // 要检查，如果已存在，先清除
    if (debounce.timerId) clearTimeout(debounce.timerId)
    debounce.timerId = setTimeout(resolve, ms)
  })
}

后来发现不太适用于我的情况，然后我就直接在绑定的函数里做的处理

// 关键字搜索
querySearch() {
  if (this.timerID) clearInterval(this.timerID)
  this.timerID = setTimeout(async () => {
    const { message } = await this.$http({
    	url: '/api/public/v1/goods/qsearch',
        data: { query: this.inputText }
    })
    this.searchList = message
  }, 300)
}

购物车数据

购物车的数据可以存储在本地Storage里，但是在存取数据的时候需要注意，如果是在onLoad里获取的数据，在切换页面添加购物车后，再次打开购物车，数据没有刷新，所以将获取购物车数据封装，并在onShow钩子中调用

methods: {
  getCart() {
    this.cartList = uni.getStorageSync('cart') || []
  }
},
onShow() {
  this.getCart()
}

购物车计数器

这里的input我也给了 type="number" 但是后面拿到的还是 string

<!-- 加减 -->
<view class="amount">
  <text class="reduce" @click="changeNumber(index, 'reduce')">-</text>
  <input 
  type="number"
  @blur="changeNumber(index, 'input', $event)" 
  :value="goods.number" 
  class="number">
  <text class="plus" @click="changeNumber(index, 'plus')">+</text>
</view>

我主要是想做一个优化，在input失去焦点时判断输入的内容，为空或是0，给默认赋值为1
然后就发现一个小坑，这里如果本身输入的就是1的话，改为0，缓存里其实还是1的，但进入判断，又赋值为1，则不会刷新视图，导致input里还是会显示0

// 商品数量
changeNumber(index, type, e) {
  if (type === 'reduce' && this.cartList[index].number > 1){
    this.cartList[index].number -= 1
  } else if (type === 'plus') {
    this.cartList[index].number += 1
  } else if (type === 'input') {
    // console.log(e, typeof e.target.value,'before')
    if (e.detail.value === '' || e.detail.value === '0') {
      e.target.value = e.detail.value = 1
    }
    this.cartList[index].number = parseInt(e.detail.value)
  }
  uni.setStorageSync('cart', this.cartList)
},