微信⼩程序商城项⽬逐字稿

半颗黄豆
342 阅读6分钟
  • 微信⼩程序商城项⽬逐字稿

关键技术

⾸⻚

商品分类

商品列表

商品详情

购物⻋

获取token

⽀付

订单查询

商品搜索

个⼈中⼼

优购 是⼀个使⽤uniapp+uview架构实现的⼩程序电商项⽬。我们主要⽤到了以下关键技术

  1. 考虑到代码的可扩展性，我们使⽤的是 vscode + 脚⼿架的⽅式创建和开发uniapp‘项⽬’，并没有使

⽤hbuilderX（脚⼿架创建的项⽬和hbuilderX创建的项⽬不直接兼容）

  1. uniapp ，它是⼀个vue语法全端开发框架，内置的uniapi可以直接兼容到各种客户端

  2. uview ， 它是和uniapp配套的全端UI框架，内置的组件和功能可以直接被打包到各种客户端

  3. 我们⼀共⽤到的技术有

关键技术

Plain Text

复制代码

uniapp的uniapi（如弹出窗⼝，全屏预览图⽚、本地存储等），直接promise和跨端

uview内置样式、按钮、图⽚、轮播图、富⽂本、拦截器、内置模版 以及 本地存储 和 vuex

1

2⾸⻚

  1. 我们打开⼩程序时，会先进⼊到商城的⾸⻚，此时⽤户是以游客身份来预览⻚⾯的。

  2. 其中我们会通过 uview提供的内置组件如轮播图、导航标签、图⽚标签和内置样式类技术等来动态渲

染⾸⻚数据

  1. ⽤户点击其中的导航标签会跳转到对应的如商品分类、商品列表或者商品详情等⻚⾯

商品分类

  1. 商品分类⻚⾯实现了电商分类⻚⾯经典的布局⽅案 - 类似京东分类、淘宝分类，左侧菜单固定宽度

+右侧内容动态宽度

  1. ⻚⾯打开时，我们会先请求商品所有的分类菜单数据，然后将它渲染到⻚⾯上，接着当我们点击不同

的分类菜单时，就会发送新的请求获取对应的商品数据

  1. 此时，⽤户点击商品数据时，便会跳转到商品列表⻚⾯

  2. 考虑到更好的体验，我们在获取数据之后，可以带上⼀个⽇期时间⼀并存⼊到本地存储中，下次发送

请求前先判断是否过期，如果不过期，就使⽤本地存储的，如果过期就重新发送⽹络请求

商品列表

商品列表⼀共分有三⼤功能

  1. 使⽤uview的tab组件实现切换列表商品功能，可以根据关键字综合或者销量或者价格来切换商品列

表

  1. 其中还实现了⻚⾯上拉分⻚功能，我们可以借助⼩程序内置的⻚⾯上拉或者 scroll-view标签的上拉

2事件实现分⻚功能。来发送分⻚请求时，我们会先判断是否还存在下⼀⻚数据，如果存在发送请求，

不存在就提示⽤户没有商品

  1. ⻚⾯下拉刷新功能，我们需要在⻚⾯配置⽂件中开启允许⻚⾯下拉的配置，然后在⻚⾯中定义⻚⾯下

拉事件，接着在事件中 重置数据，如商品列表数组、⻚码、查询参数等，重置完毕后就可以发送请

求获取最新商品数据

商品详情

商品详情⻚⾯主要分为了数据展示和添加购买商品功能

  1. 其中数据展示 我们使⽤了轮播图、富⽂本组件来渲染⻚⾯，还调⽤了⼩程序的全屏预览图⽚的api

（previewImage）实现点击全屏预览图⽚功能

  1. ⻚⾯底部的购物栏结构我们是使⽤了uview提供的模版快速实现

  2. 点击 购物⻋按钮时 使⽤了vuex来全局存储购物⻋数据，我们会发送异步请求来完成加⼊购物⻋功

能，同时会把购物⻋数据存储在vuex中

  1. 点击 购买 时，则会直接调起微信⽀付api完成⽀付功能。 （⽀付流程会在⽀付⻚⾯详细讲解）

  2. 点击 联系客服 则会使⽤⼩程序内置的 功能来实现联系客服

购物⻋

购物⻋⻚⾯主要是对商品数据进⾏编辑

  1. 我们会中vuex中读取出购物⻋数据，然后渲染显示到⻚⾯中

  2. 通过vuex中的action发起异步请求来操作购物⻋数据，中间有实现了商品的数量的编辑、选中和滑动

删除商品功能

  1. 通过vuex中getters功能实现计算商品总⾦额、计算结算商品数量、全选框全选功能

3获取token

因为token需在在全局中都可以使⽤，所以我们存放token的位置放在了vuex中，并且在请求拦截器⾥实

现了根据url⾃动携带token。获取token在vuex中的actons中实现的

  1. ⾸次执⾏wx.login 或者⼩程序的临时登录凭据 code

  2. 然后执⾏ wx.getUserProfile 获取⽤户信息

  3. 将以上两个数据 发送给我们的后端，换取 token并且存储起来

⽀付

当我们在购物⻋⻚⾯编辑待⽀付的商品时，点击⽀付按钮便开始执⾏⽀付流程

  1. 我们先调⽤了⼩程序中的获取收货地址api，获取到⽤户的收货地址信息

  2. 然后判断⽤户是否已经登录(是否获取到了token)，未登录则调⽤actions中的⽅法获取token

  3. 获取到待⽀付的商品信息 调⽤后端的⽣成订单接⼝，获取订单编号

  4. 根据订单编号 来调⽤后端的⽀付接⼝，返回⽀付⾦额等相关信息

  5. 根据⽀付信息 调起微信⼩程序内置的⽀付接⼝ requestPayment 完成⽀付

  6. ⽀付完毕后，查询订单状态，根据订单状态 弹出提示信息

订单查询

订单查询⻚⾯分成了 全部订单、待⽀付订单、待发货订单 ⼏个分类。传⼊不同参数，返回和显示对应数

据

4商品搜索

我们封装了⼀个全局搜索组件，在⾸⻚、分类、商品列表中都使⽤到了。当点击该组件时，会跳转到商

品搜索⻚⾯

  1. 商品搜索⻚⾯会根据⽤户输⼊的关键字来查询对应的商品列表

  2. 为了提⾼⽤户的体验和服务器的性能，我们在这⾥使⽤了防抖的技术，避免⽤户频繁输⼊导致出现体

验不好的情况。（频繁发送⽹络请求，堵塞⽹络、⻚⾯频繁显示最新列表，切换过快）

个⼈中⼼

个⼈中⼼⻚⾯主要是做信息展示

  1. 展示⽤户信息-头像和昵称

  2. 展示订单信息 待付款、待收货、全部订单、退货退款等

  3. 联系客服（⼩程序内置的api contact）

  4. 意⻅反馈 （⼩程序内置的api feedback）

  5. 版本信息

avatar
文章
阅读
粉丝