小程序商城项目

最新推荐文章于 2024-06-02 13:40:29 发布

coderlin_

最新推荐文章于 2024-06-02 13:40:29 发布

阅读量1.1k

点赞数 2

本文链接：https://blog.csdn.net/lin_fightin/article/details/110147573

版权

创建项目

在这里插入图片描述

引入阿里图标

在这里插入图片描述

接着只要在全局样式下引入就行了

使用

就可以了，

设置基本样式

在这里插入图片描述

使用全局变量样式

在这里插入图片描述

实现适配

封装搜索框组件

在这里插入图片描述
标明哪个父组件使用了

如果想实现多插槽，需要在组建的js文件中定义

在组件中不能使用全局样式中的东西，故要自己引入icon的样式

封装网络组件

这里的url后面跟着冒号不是等号，写错。
在这里插入图片描述

这样就能调用.then来获取数据，记得resolve(data)要把数据传出来。

封装轮播图组件

在这里插入图片描述

让图片的宽高随着改变而改变，
还有注意swiper的高度，不然改变机型时，图片自适应了，外层的swiper没有自适应

使用rpx随着屏幕改变而改变大小
。因为图片跟swiper自身存在着默认标签，所以需要配置其自适应才能在正常机型切换。

导航栏封装，万物皆可封装

在这里插入图片描述
先获取，再传进去

调样式用rpx调，可以实现适配。

这个也可以封装

在这里插入图片描述

内容里放一个大盒子，在大盒子里面循环navigator，注意图片要加上Mode属性哦

由于后面四张的高度是第一张的一半，因此我们要算出第一张高度的比例，因为要适配。

第一张宽×高=232/386 在视图窗口里面宽度位33.33vw
故高度位height=386*33.33vw/232
因此我们通过在这里插入图片描述
算出后面的高度等于第一张的高度/2，并且

除了第一张要自适应，其他的都要以定义的高度为准，故用{{}}进行一个判断。结果如图，

分类

在这里插入图片描述
分析页面，顶部搜索框组件。
左边导航栏组件。右边总览组件，
先做导航栏组件。

在这里插入图片描述
小程序中绑定类名是{{*****?‘类名’，‘’}}

大致就是弄成左右两个组件再去v-for循环再调个样式就可以了，点击左侧导航栏颜色跟着改变。
点击不同的导航呈现不同的页面。
每次点击发送事件并且把索引值发送出去，在这里插入图片描述
父亲监听到了做出判断
再修改传给右组件的值达到更新。

因为分类数据过多，现做一个缓存效果优化性能

将请求道的数据存入本地存储并给一个时间期限，下次则从本地存储中获取即可，有过期限制。

在这里插入图片描述

判断本地存储
在这里插入图片描述

在每次页面生成的时候判断有没有本地存储并且是否过期。做出相对应的判断。
这样就优化用户体验了。

小bug

这里用的是cates，也就是你的this.alls是没东西的，那么在切换导航栏时就会出错
在这里插入图片描述
改成这样就好了

小bug，每次点击左侧导航栏切换时，右边的坐标不会置顶显示。

在这里插入图片描述
将他设为0，每次刷新就会在顶部显示。

ES7 async解决回调地狱

首先下载runtime.js
在这里插入图片描述

如果需要使用到async，则需要在每个文件里面引入这个js文件，不可以全局引入。

async+await实现异步变同步

列表页

在这里插入图片描述

地址后面加上传递的参数
在另一个界面的onload中获取

传递成功

引入vant-ui库

首先 npm init 接着在这里插入图片描述

这样就可以的。
接着要点击切换显示不同的界面。
首先在子组件发送出去

在父组件监听后并修改当前的索引值，在Block里面做出判断，显示应该显示的东西。

接着写商品列表，也是一个组件多用，先创建一个子组件，再创建一个孙组件，对这个孙组件实现复用

在这里插入图片描述

gool-list是大容器，list-item是每一个小货品。效果如图

发送网络请求将获取的东西传给goodlist

在这里插入图片描述
再遍历根据数据遍历list-item

再设置一些样式就Ok了。字体大小或者图片大小使用rpx，能有效解决适配问题。

上拉刷新，下拉显示更多

在这里插入图片描述

首先获取cid，然后设置size形参，在这里插入图片描述
接着每次下拉触底都调用这个函数去获取更多的数据传给good-list。
做判断

第一次请求获取总数。每一页显示10条，用num来获取总共多少也。ceil向上取整，numNow代表现在多少页。若num=numNow证明没有更多了。

下拉刷新下拉删除数据，重新调用。

在这里插入图片描述

搞定。

代码优化

在这里插入图片描述

将弹框在请求中显示，可以优化。

商品详情页面

在这里插入图片描述

轮播图插件，在主页封装过，所以直接拿来用

在这里插入图片描述

轮播图的数据跟这个不太一样，因此需要做改变，而必须在setData里面改变数据，才会反馈到组件去。我们可以设置

让父组件控制他的样式大小。
、

在这里插入图片描述

根据页面微调样式

强制文字几行显示并加…

rich-text解析HTML代码

苹果手机不能显示webp格式优化代码

由于详情页我们只用到几个数据，所以要进行筛选
在这里插入图片描述

在这里插入图片描述
注意，要先将全部值赋给goodDeatil，使里面有goods_price这些属性，不然直接用res.data.message.goods_price去赋值会直接报错。

替换webp

在这里插入图片描述
后面g表示替换全部。

实现点击轮播图预览大图功能

需要用到小程序的一个API
在这里插入图片描述
这个思路就是点击轮播图里面的组件，然后将事件传出来并把当前图片的url传出来。然后需要用到的父组件就监听，不需要的就不用监听。

但要想办法阻止navigator的跳转，目前还没找到但可以在正常显示。浏览器调试器会报错。

底部导航栏封装

在这里插入图片描述
使用到vantui组件库

进入客服

在这里插入图片描述

利用子绝父相将Button按钮扩至与父亲一样大并且设置透明度为零，此时按钮存在但不会显示出来。分享功能也是如此

购物车

购物车属于tabbar，所以跳转要用在这里插入图片描述
这样才会成功。

加入购物车，使用小程序的本地缓存来实现

在这里插入图片描述
先从本地存储取出来判断有没有当前这个物品，然后做出相对应的操作，并且将其重新加入本地存储。
这样就可以了。

购物车界面，添加地址，需要用到小程序的API，获取用户的收货地址

在这里插入图片描述

bug

当第一次点击取消后，就会出现下次点击没反应。
在这里插入图片描述

在这里插入图片描述

先判断，如果为false就得重新赋值，在openSetting的成功回调函数重再去获取收货信息。

代码优化

在这里插入图片描述

再进行引入
再将获取到的收货地址村粗本地村粗

拼接地址，注意，push会执行从数组后面加操作，但是他的返回值的该数组的长度。

coderlin_

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
0
评论
小程序商城项目

创建项目引入阿里图标接着只要在全局样式下引入就行了使用就可以了，设置基本样式使用全局变量样式实现适配搜索框用组件标明哪个父组件使用了如果想实现多插槽，需要在组建的js文件中定义在组件中不能使用全局样式中的东西，故要自己引入icon的样式封装网络组件这样就能调用.then来获取数据，记得resolve(data)要把数据传出来。...
复制链接

扫一扫