小程序优购商城项目总结

写完了小程序的优购商城今天在这里总结一下项目流程和思路

项目主要分为四个tabBar主页面和其他一些操作页面

我们的tabBar页面在app.json文件中配置好首页-分类-购物车-我的

在写之前我们先完成一下其他的配置比如我们封装的request请求里面有以下配置

配置request

话不多说咱们直接上图

封装好我们的request导出在我们的Api.js文件内导入后开始请求数据

封装Api数据发送请求并导出

在首页中导入方法拿到我们传过来的接口并在onload生命周期函数中接收到我们的接口数据并渲染到页面上，通过简单的布局即可静态页面的实现效果了。

以上就是我们请求的主页数据数据渲染完成后效果图如下

首先要封装搜索框头部组件因为在其他页面我们待会用得到。

这里的搜索框是一个navigator，点击之后才会进入真正的搜索页面。

分类页面：

分类页面的实现，布局方面使用felx布局可以帮助我们实现想要的效果。想要实现左边导航栏与右边内容的同步，那么我们就需要给左边的导航栏设置一个点击事件并自定义一个属性去拿到我们每一个的下标，将它传入到我们的点击事件中去通过事件对象e我们可以找到每次点击的时候下标的变化，在data中定义传一个变量，并将这个下标的变化赋值给我们定义的变量渲染我们的右侧列表，这样就实现了同步的切换效果了，左侧的导航栏呢需要添加一个点击之后加选中的效果。我们可以写一个选中样式，，在标签上通过三元表达式去实现这一效果。

效果图

主要代码如下

接着就是我们的路由跳转传参了

实现详情页的跳转：

由于列表页不属在tab栏中，所以跳转的话要去使用navigateTO方法去实现路由的切换，使用switchtab的切换的话无法跳转。转入的ID即为我们点击所对应分类的ID

商品列表页：

要实现的功能分别为：1.下拉刷新 2.上拉加载 3.tab切换

首先我们要将我们封装的搜索框渲染到分类列表页

渲染下方的数据以及布局tab栏的切换可以通过我们定义一个的下标去实现切换的效果。

要实现效率和价格的效果。我们可以通过使用sort排序的方法去实现效果。

这里我在请求到数据前就使用sort排序来对数据进行了修改代码如下：

再到tab切换加上if判断调用请求的函数

下拉刷新：让pagenum++并且调用函数让参数改变从而请求第二页的数据然后再将当前数据和下拉刷新请求到的数据进行合并在页面中渲染

上滑加载：通过自带的生命周期函数，当我们上拉的时候将pagenum=1的时候即可实现效果

详情页：

思路同理与分类页跳入商品列表页，在商品列表页面中点击传入自定义的商品id来获取与详情页相同的Id实现数据的传参。

这个页面的效果分别有

加入购物车/收藏/购买/客服/分享/跳入购物车组成

跳转至购物车：

我们需要使用swicthtab来实现，因为购物车存在导航栏栏中，这时候只能使用switch实现跳转。

分享与客服：

都可以通过在小程序API中找到，通过找到button'中的open-type=share/const来实现这两个功能。

加入购物车：

我们可以通过本地缓存来实现这一效果，使用本地存储与数组方法findIndex来实现效果

加入购物车代码如下：

点击购物车按钮跳至转购物车页面

购物车：

小程序的购物车主要功能

首先拿到第一步呢，我们肯定是要先把每一个复选框的状态给同步了，这样我们在写价格啊，选中的数量…。就很简单了。我使用的change事件。
实现思路是：我们这个事件中，默认有一个事件对象e，在这个e里面呢，有我们当前选中的复选框value值，我们让他的chekcked取反让他当前true取反为false

首先拿到第一步呢，我们肯定是要先把每一个复选框的状态给同步了，这样我们在写价格啊，选中的数量…。

初始化函数

先创建一个初始化函数在里面在我们使用单选全选和加减的时候调用一下这个方法就可以实现这些操作这个函数主要作用就是我们的总数总价当我们所有的选中后会计算出价格和数量如果有一个商品未选中的话那就让全选并把我们求到的数据响应式更新到视图当中最后将当前购物车的数据存在内存之中

加减法的执行思路：

给加减法都通过data-index去在e事件对象中拿到我们的下标，通过识别每一个下标去找他们在购物车数据中所对应的商品的数量，

收货地址：

我们可以从小程序API中找到wx.getSeting方法，从中我们通过sccess函数中的res可以log出来看到我们想要的数据，将其放到本地存储中之后到对应的页面进行渲染即可

我的页面：

我们需要先判断本地存储中有没有登录过，如果没有登录过，就提示让用户去登录。
登录：我们写好登录页面后，给一个获取授权的按钮，然后写一个点击事件

然后进行授权登录登陆的参数是code码还有四个加密串作为参数请求我们登录的数据将token存在我们的内存中方便在我们的请求头获取token 代码如下

支付页面：

点击去支付跳到支付页面当我们点击支付的时候会弹出来支付二维码这里我们没有权限当然也不会支付成功了

代码如下首先我们支付前先判断一下有没有登录就用token存没存在来判断如过不存在就让他跳到登录页

接下来让我们获取一下创建订单的参数 {收货地址，订单的总价格} 请求体参数为{商品的id，商品的数量，商品的单价}参数有了我们就来写请求订单的接口发起请求获取到我们的订单编号

发起预支付：

发起预支付后使用微信的开放能力发起支付再请求订单状态的接口查看是否创建订单成功创建成功后让他跳转到订单页获取到订单页的数据渲染订单页面

图片上传

选择并显示图片

在wxml中给button按钮绑定一个点击事件，给img赋值一个属性动态传递数据并对其for循环

点击"+"触发点击事件
1 调用小程序内置的选择图片的能力
2 获取到图片的路径数组
3 把图片路径存到data的变量中
4 页面就可以根据图片数组进行循环显示

删除图片

在wxml中绑定点击事件

点击自定义图片组件
1 获取被点击的元素的索引
2 获取data中的图片数组
3 根据索引在数组中删除对应的元素
4 把数组重新设置回data中

提交图片

点击提交
1 获取文本域的内容类似输入框的获取
1.data中定义变量表示文本域内容
2.文本域绑定一个输入事件事件触发的时候把输入框的值存入到变量中
3 验证通过用户选择的图片上传到专门的图片接口，这里我们用的后台的图片上传接口返回图片外网的链接
1.遍历图片数组
2.挨个上传
3.自己再维护图片数组存放图片上传后的外网链接
4 文本域和外网图片的路径一起提交到服务器
5 清空当前页面
6 返回上一页

浏览图片：

这里还是用到了微信的开放能力预览图片

我们要获取到我们提交的网络图片的链接获取到当前图片的列表

再使用微信开放能力来进行预览