智能运动鞋落地页

请编辑过的人员留下你的姓名

• 文档编辑人员 冯垣玮(2022/10/28)

说明

范肆智能鞋购买平台

项目地址

• svn://dev.webdev.ouj.com/biz/mini_mall/template/uni-app-pro

技术选型

目标:微信小程序

可选择的方案，(1)原生 (2)uni-app (3)taro

考虑以后有h5端的需求，使用跨端框架可节约开发成本，最终选择技术人员更熟悉的跨端框架uni-app。

最终的技术栈

uniapp + scss + uviewui(2.0.31) + 原生小程序内置 Api

node版本

"node": "16.13.0"

开发工具

XBuilder X (3.6.3.20220917)

项目架构

- api                       # http请求
- components                # 公共组件(自定义)
- config                    # 项目变量配置文件
- mixins                    # 全局mixin
- node_modules
- pages
    |- Activity             # 商城活动相关，如抽奖码活动（搁置中）
    |- Index                # 商城首页
    |- Login                # 登录
    |- Product              # 商品相关
       |-Detail             # 商品详情
       |-Eval               # 商品评价
       |-Index              # 商品页
       |-Video              # 商品视频查看
    |- User                 # 用户相关
       |-AccSet             # 账户设置
       |-Address            # 收货地址
       |-Cart               # 购物车
       |-Coupon             # 优惠券
       |-Index              # 个人中心
       |-Order              # 订单相关（订单列表，订单详情，售后服务,用户评价）
       |-Suggest            # 投诉反馈
- static                    # 存放应用引用的本地静态资源
- store                     # 全局存储
- styles                    # 定义的全局scss
- utils                     # 工具类
- App.vue                   # 应用配置，用来配置App全局样式以及监听
- main.js                   # Vue初始化入口文件
- manifest.json             # 配置应用名称、appid、logo、版本等打包信息
- pages.json                # 配置页面路由、导航条、选项卡等页面类信息
- uni.scss                  # uni-app内置的全局常用样式变量 

备注

商品数据缓存

• 把第一次加载商品信息的数据进行缓存，下次进入该商品页便可不用重新加载数据，可避免白屏加载，提升用户体验。

商品只能购买一件问题

• 因为需要对接erp的商品，订单，售后等信息，确保订单结构一致。（可优化购买多件）

订单商品过多展示问题

• 若是一个订单存在多个商品，商品会根据顺序排列出来，样式不够美观。

频繁点击跳转生成多个跳转页面问题

• 使用节流函数进行处理

兼容ipad

• 使用@media进行兼容

关于商品详情tab描点问题

因为是内嵌H5页面，无法获取H5里面的图片加载是否完成，描点无法准确定位

处理思考：

• 更改现在的切换模式

• 弃用H5内嵌

• 减少图片大小，增加响应速度，再用定时处理（用户第一次进入小程序由于图片未缓存，用定时处理，然后通过vuex记录用户已经进来过一次，即图片已缓存。第二次进入则无需定时但 是缺点明显，用户第一次进入无法判断图片加载完成时间）