UniApp 深度实践：打造丝滑流畅的私域电商小程序

原创于 2025-12-01 15:34:26 发布 · 1.1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #小程序 #java #vue #vue.js #ruoyi #uniapp

迭代猫微商城系统专栏收录该内容

14 篇文章

订阅专栏

📱 UniApp 深度实践：打造丝滑流畅的私域电商小程序

摘要：在多端融合的时代，如何用一套代码高质量地覆盖微信小程序、H5 和 App？本文将以“迭代猫私域微商城”为例，深度解析其移动端（Uni-App）的设计理念与技术实现。我们将从UI 设计规范、核心交互逻辑、性能优化等角度出发，并贴出关键代码片段，带你领略 Uni-App 开发的魅力。

🎨 设计理念：原生体验与统一规范

在移动端开发中，我们始终追求“原生级”的用户体验。

1. 视觉统一性

为了保证品牌调性的一致性，我们引入了全局主题色管理系统。

实现方案：通过 Vuex 全局管理 primaryColor，并在 CSS 变量中定义主题色。
效果：无论是按钮、标签还是图标，都能随后台配置一键换肤，完美适配不同商户的品牌色。

2. 交互流畅性

骨架屏（Skeleton）：在数据加载完成前，展示页面的大致结构，减少用户等待的焦虑感。
下拉刷新与上拉加载：基于 mescroll-uni 组件，实现了高性能的长列表滚动体验。
即时反馈：每一个点击操作都有清晰的触摸反馈（Ripple Effect）和 Toast 提示。

💻 关键代码解析

以下是我们在开发过程中沉淀的一些核心代码片段，希望能为你提供灵感。

1. 封装强大的 HTTP 请求库

为了统一处理 token 注入、错误拦截和 loading 状态，我们对 uni.request 进行了二次封装。

// utils/request.js
import config from '@/config'
import store from '@/store'

export default (options) => {
  return new Promise((resolve, reject) => {
    // 1. 自动注入 Token
    const token = uni.getStorageSync('token')
    const header = {
      'Content-Type': 'application/json',
      'Authorization': token ? `Bearer ${token}` : ''
    }

    uni.request({
      url: config.baseUrl + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: { ...header, ...options.header },
      success: (res) => {
        // 2. 统一错误处理
        if (res.data.code === 200) {
          resolve(res.data)
        } else if (res.data.code === 401) {
          // Token 过期，自动跳转登录
          store.dispatch('Logout')
          uni.navigateTo({ url: '/pages/login/index' })
        } else {
          uni.showToast({ title: res.data.msg || '请求失败', icon: 'none' })
          reject(res.data)
        }
      },
      fail: (err) => {
        uni.showToast({ title: '网络连接异常', icon: 'none' })
        reject(err)
      }
    })
  })
}

2. 微信静默登录与自动注册

利用 Uni-App 的跨端能力，我们实现了一套优雅的登录流程。

// store/modules/user.js
actions: {
  // 微信登录
  WxLogin({ commit }) {
    return new Promise((resolve, reject) => {
      // 1. 获取 code
      uni.login({
        provider: 'weixin',
        success: (res) => {
          // 2. 后端换取 openid
          getOpenId({ code: res.code }).then(response => {
            const { openid, token } = response.data
            if (token) {
              // 已绑定用户，直接登录
              commit('SET_TOKEN', token)
              resolve()
            } else {
              // 未绑定，跳转注册页（携带 openid）
              uni.navigateTo({ 
                url: `/pages/register/index?openid=${openid}` 
              })
            }
          })
        }
      })
    })
  }
}

3. 商品规格（SKU）选择器

这是电商中最复杂的交互之一，我们需要动态计算库存和价格。

// components/SkuSelector.vue
methods: {
  // 选择规格项
  selectSpec(specIndex, itemIndex) {
    // 更新选中状态
    this.$set(this.selectedSpecs, specIndex, itemIndex)
    
    // 查找匹配的 SKU
    const matchedSku = this.skuList.find(sku => {
      return sku.specs === JSON.stringify(this.getSelectedSpecMap())
    })

    if (matchedSku) {
      this.currentPrice = matchedSku.price
      this.currentStock = matchedSku.stock
      this.currentSkuId = matchedSku.id
    }
  }
}