一：参考地址

1.接口来源：https://www.showdoc.com.cn/128719739414963
2.微信公众平台：https://mp.weixin.qq.com/
3.微信官方文档：https://developers.weixin.qq.com/doc/
4.图标获取：https://www.iconfont.cn/
5.图床：https://imgurl.org/

二：其他

1.使用了的插件：JSON-handle_0.6.1、Generate CSS tree
2.关于商家的AppID获取实现支付功能：【关注微信小程序商家助手、申请店铺、点击我的、点击店铺信息、、点击基础信息】这里就会出现商家AppID
3.token错误获取不到值等问题可以参考我的方法
4.不能授权等问题可以点击授权之后退出去再试

三：优势

小程序框架的目标是通过尽可能简单、高效的方式让开发者 可以在微信中开发具有原生APP体验的服务
1.微信有海量用户，而且粘性很高，在微信里开发产品更容易触达用户
2.推广app或公众号的成本太高
3.开发适配成本低
4.容易小规模试错，然后快速迭代
5.跨平台
6.微信明活已经达到10.82亿。中55岁以上的用户也达到6300万
7.信息传达数达到450亿，较去年增长1 8%;视频通话4.1亿次增长100%
8.小程序覆盖超过200+行业，交易额增长超过6倍，服务1000亿+人次创造出了5000亿+的商业价值

四：技术工具

1.系统：windows10
2.框架：原生框架MINA
3.技术：HTML5+CSS3+JavaScript+es7
4.工具：微信开发者工具、Visual StudioCode
5.其他了解：.json 后缀的 JSON 配置文件，页面配置.wxml 后缀的 WXML 模板文件，页面结构.wxss 后缀的 WXSS 样式文件，页面样式.js 后缀的 JS 脚本逻辑文件，页面逻辑.less后缀的LESS样式文件

五：基本项目目录

vscode 第三方软件配置文件
Components 组件SearchInput 搜索框组件Tabs 导航栏组件UpImg 自定义图片图片
icons 保存图片
Pages 页面文件夹auth 支付授权cart 购物车category 商品分类collect 收藏feedback 意见反馈goods_detail 商品详情goods_list 商品列表index 销售首页login 登录order 订单查询pay 商品支付search 搜索中心user 个人中心logs 日志
request 异步请求
styles 外部标签图片
Utils 第三方工具
app.js 项目的全局入口文件
app.json 全局配置文件
app.wxss 全局样式文件
project.config 项目的配置文件
sitemap.json 微信索引配置文件

六：主要页面

主要页面：销售首页、商品分类、购物车、个人中心、商品列表、商品详细、商品支付、授权页面、订单页面、商品收藏、搜索中心、意见反馈页面介绍：1.销售首页搜索框：点击进入搜索中心滚动图、分类、超市购、母婴品：点击进入商品分类时尚女装、户外运动、箱包配饰：点击进入商品列表2.商品分类搜索框：点击进入搜索中心一级分类：点击出现对应一级分类二级分类：点击出现三级分类三级分类：点击进入商品列表3.商品列表搜索框：点击进入收索中心综合、销量、价格：点击进入商品详细下拉：下拉会进行刷新，到底会提示4.搜索中心 输入框：输入完进行检索，出现取消按钮，出现检索信息检索信息：点击进入商品详细5.商品详细收藏：可以进行收藏和取消收藏进个人中心客户：模拟进入客服会话分享：分享给虚拟好友加入购物车：点击进入购物车页面立即购买：购买之前需要加入购物车6.购物车收货地址：没有就获取收索地址购买的宝贝：可以进行勾选和取消，可以对购买物品数量进行加减和删除结算按钮：显示购买的数量、显示购买的价钱，选择框可以对全部物品进行勾选如果地址和物品之一没有没法进行购买，点击进入商品支付7.商品支付显示收获地址购买物品的数量和价钱点击支付：进入授权页面，再次点击弹出二维码，会对支付成功失败进行提示8.授权页面分为两个；支付授权，登录授权授权按钮：点击进行授权9.个人中心登录按钮：没有进行登录授权全部订单、收藏商品、关注商品、我的足迹：显示数量我的订单：全部订单、待付款、待收货、退款退货收货地址管理联系客服、意见反馈、关于我们、推荐小程序10.商品收藏商品收藏、品牌收藏、店铺收藏、浏览足迹、全部收藏、正在热卖、即将上线点击收藏商品：进入对应的商品详细11.订单查询全部订单、待付款、待发货、退款退货：显示订单编号、订单价格、订单日期12.意见反馈体验问题、商品商家投诉问题总类：功能建议、购买遇到的困难、性能问题、其他描述问题框：可以输入反馈的商品问题，可以对物品照片进行添加取消提交按钮：点击把反馈的信息和照片上传到后台

七：各个功能实现思路

一：tabBar在全局进行配置
1.下载好图片
2.引入tabBar组件
3.设置好路径、名称、以及选中和没有选中的图标颜色等二：搜索框
1.引入navigator加样式
2.跳转加上路径
3输入框绑定值改变事件input事件3.1获取到输入框的值bindinput3.2合法性判断trim方法3.3检验通过把输入框的值发送到后台3.4返回的数据打印到页面上
4.防抖(防止抖动 )定时器防止重复输入重复发送请求，定义全局的定时器id
5.通过isFocus来控制按钮取消与否三：轮播图
1.引入接口数据数据
2.GET请求
3.在主页js引入轮播图数组swiperList[]
4.在js中设置API网络异步请求获取轮播图数据wx.request
5.通过this.setdata获取数据
6.在需要渲染的html中轮播图数据在页面标签中渲染出来swiper swiper-item navigator image设置循环项、绑定属性、给图片加属性指定图片路径
7.给swiper组件设置自动切换、是否显示面板指示点、是否循环轮播四：分类导航数据
1.设置分类导航数组catesList:[ ]
2.引入路径，进行赋值，进行调用
3.在对应的标签代码进行渲染navigator image五：楼层数据
1.设置好楼层数据floorL ist:[ ]
2.获取楼层数据进行赋值调用
3.在标签中进行渲染这里有嵌套六：商品分类
1.设置左侧菜单数据leftMenuL ist:[ ]、右侧商品数据rightContent:[ ]、接口返回数据Cates:[ ]、右侧内容滚动条距离顶部的距离scrollTop: 0
2.引入路径
3.对接口返回数据进行赋值
4.构造左侧的大菜单数据、构造右侧的商品数据
5.在标签中渲染左侧菜单、右侧商品内容引入视图容器scroll-view组件，设置属性允许纵向滚动、设置竖向滚动条位置
6.设置被点击的左侧的菜单currentIndex:0在标签中进行判断
7.给左侧菜单设置点击绑定事件获取被点击的标题身上的索引、给data中的current Index赋值就可以了、根据不同的索引来渲染右侧的商品内容
8.重新设置右侧内容的scroll-view标签的距离顶部的距离七：tabs组件
1.在商品分类的商品中插入链接进行跳转获取cid
2.在使用的js中进行定义组件、在组件中新增设置tabs、在使用的json中进行引入、在使用的的标签进行引用传递数据
3.在组件js中接收数据、在标签中引用进行激活选中判断绑定点击事件、在组件js中获取点击索引触发父组件事件
4.在使用标签中监听自定义事件，在使用js中定义标题点击事件从子组件传递过来八：页面上滑滚动条触底事件开始加载下-页数据
1找到滚动条触底事件微信小程序官 方开发文档寻找，页面上拉触底事件的处理函数onReachBottom
2判断还有没有下一页数据获取到总贝数总页数= Math.ceil(总条数/页容量pagesize)、获取到当前的页码pagenum、判断一下当前的页码是否大于等于总页数，大于表示没有下一页数据
3假如没有下一页数据弹出一个提示
4假如还有下一页数据来加载下一页数据，用showToast进行提示当前页码++、重新发送请求、数据请求回来要对data中的数组 进行拼接而不是全部替换九：下拉刷新事件
1.触发下拉刷新事件 需要在页面的json文件中开启一个配置项是否全局开启下拉刷新详见Page.onPullDownRefresh、下拉loading的样式backgroundTextStyle找到触发下拉刷新的事件监听用户下拉动作onPullDownRefresh
2.重置数据数组
3.重置页码设置为1
4.重新发送请求
5.数据请求回来需要手动的关闭等待效果wX. stopPul lDownRefresh ()
6.在官方文档API交互中设置wx.showLoading十：点击轮播图预览大图
1给轮播图绑定点击事件
2调用小程序的api图片previewImage设置当前显示图片的链接和接口调用成功的回调函数先构造要预览的图片数组、接收传递过来的图片url十一：客服和分享
都是button里面
1.联系客服open-type=" contact "
2.分享open-type=”share "十二：点击加入购物车
1先绑定点击事件
2获取缓存中的购物车数据数组格式
3先判断当前的商品是否已经存在于购物车
4已经存在修改商品数据 执行购物车数量++重新把购物车数组填充回缓存中
5不存在于购物车的数组中直接给购物车数组添加一个新元素新元素带上购买数量属性num 重新把购物车数组填充回缓存中
6弹出提示十三：获取用户的收货地址
1绑定点击事件
2调用小程序内置api获取用户的收货地址WX.chooseAddress
3获取用户对小程序所授予获取地址的权限状态scope3.1假设用户点击获取收货地址的提示框确定authSetting scope . address scope值true直接调用获取收货地址3.2假设用户点击获取收货地址的提示框取消 scope值false3.3假设用户从来没有调用过收货地址的api scope undefined直接调用获取收货地址诱导用户自己打开授权设置页面当用户重新给与获取地址权限的时候获取收货地址
4.页面加载完毕获取本地存储中的地址数据，把数据设置给data中的一个变量十四：总价格和总数量
1都需要商品被选中我们才拿它来计算
2获取购物车数组
3遍历
4判断商品是否被选中
5总价格+=商品的单价*商品的数量
5总数量+=商品的数量
6把计算后的价格和数量设置回data中即可十五：商品的选中
1获取被修改的商品的id
2获取购物车数组
3找到被修改的商品对象
4选中状态取反
5把购物车数据重新设置回data中和缓存中十六：全选和反选
1全选复选框绑定事件change
2获取data中的全选变量allChecked
3直接取反allChecked= !allChecked
4遍历购物车数组让里面商品选中状态跟随allChecked改变而改变
5把购物车数组和allChecked 重新设置回data 把购物车重新设置回缓存中十七：商品数量的编辑
1按钮绑定同一个点击事件区分的关键自定义属性“+”"+1"   "_" "-1"
2传递被点击的商品id goods_ _id
3获取data中的购物车数组来获取需要被修改的商品对象
4当购物车的数量=1同时用户点击"-”弹窗提示询问用户是否要删除API界面wx.showModal方法确定直接执行删除、取消什么都不做
5直接修改商品对象的数量num
6把cart数组重新设置回缓存中和data中this. setCart十八：支付
1先判断缓存中有没有token
2没有跳转到授权页面进行获取token失取token2.1getUserInfo获取用户信息进行获取授权2.2后台服务器生成用户token通过以下字段enc ryptedData, rawData,iv , signature获取用户信息，获取小程序登录成功后的code2.3发送请求获取用户的token2.4把token存入缓存中同时跳转回上一个页面
3有token，创建订单获取订单编号：准备请求头参数Authorization，准备请求体参数总价格地址订单,发送请求创建订单
4.发起预支付接口
5.调用小程序内置支付方法WX.requestPayment
6.查询后台订单状态
7.支付成功后跳转到订单页面
8.已经完成了微信支付手动删除缓存中已经被选中了的商品，删除后的购物车数据填充回缓存再跳转页面十九：头像获取登录
1.如果缓存中没有用户的个人信息比如头像名称等
2.那么点击按钮跳转到登录界面2.1通过按钮getUserlnfo获取用户信息，可以从bindgetuserinf回调中获取到用户信息2.2成功授权之后填充回缓存再跳转页面2.3在缓存中的数据在页面进行渲染二十：商品收藏
1页面onShow的时候加载缓存中的商品收藏的数据some方法
2判断当前商品是不是被收藏是就改变页面的图标、不是
3点击商品收藏按钮判断该商品是否存在于缓存数组中findindex方法showtoast方法进行提示已经存在把该商品删除splice方法，没有存在把商品添加到收藏数组中存入到缓存中即可push方法修改data中的属性isCollect
4.从缓存中获取被收藏商品的数量二十一：点击“+”触发tap点击事件
1调用小程序内置的选择图片的api接口WX.choose Image
2获取到图片的路径数组，图片数组进行拼接
3把图片路径存到data的变量中
4页面就可以根据图片数组进行循环显示自定义组件
5点击自定义图片组件5.1获取被点击的元素的索引5.2获取data中的图片数组5.3根据索引数组中删除对应的元素5.4把数组重新设置回data中二十二：意见反馈点击“提交”
1获取文本域的内容data中定义变量表示输入框内容，文本域绑定输入事件事件触发的时候把输入框的值存入到变量中
2对这些内容合法性验证
3验证通过用户选择的图片上传到专门的图片的服务器返回图片外网的链接wX. uploadFile遍历图片数组，挨个上传，自己再维护图片数组存放图片上传后的外网的链接
4文本域和外网的图片的路径一 起提交到服务器
5清空当前页面
6返回上一页

八：补充

1.在微信小程序中不支持通配符2.1px= 2rpx 3.设置后四个超链接&:nth- last-child( - n+4 ){}4.拉伸到图片标签的高度scaleToFill5.清除浮动overfLow 6.height: ~'calc(100vh-90rpx)'7.转换数组格式：Let cart=wx . getStorageSync("cart" )||[] ;8.选择过滤newCart一newCart. filter( v=> !v .checked) ;9.要使用组件就要在对应的配置文件进行引入10.可在微信公众平台-开发-开发设置中设置服务器域名，修改request合法域名11.在接口帮助库中通过es6的promise方法进行封装微信请求，在需要的地方进行引入发送请求的方法12.在接口帮助库中定义公共的url，接口进行拼接13.在接口帮助库中定义加载效果wX . showLoading和WX .hideLoading14.封装的方法一定要在onload进行调用15.es7的解决回调async表示同步 16.web中的本地存储和小程序中的本地存储的区别写代码的方式不一样了web: localStorage . setItem( "key"，"value") localStorage . getItem("key")小程序中: wx. setStorageSync("key", "value"); WX . getStorageSync("key");存的时候有没有做类型转换web:不管存入的是什么类型的数据，最终都会先调用以下toString(), 把数据变成了字符串再存入进去小程序:不存在类型转换的这个操作存什么类似的数据进去，获取的时候就是什么类型

毕业设计商城小程序练习相关推荐

小程序毕设作品之微信积分商城小程序毕业设计成品（8）毕业设计论文模板
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
小程序毕设作品之微信积分商城小程序毕业设计成品（5）任务书
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
小程序毕设作品之微信积分商城小程序毕业设计成品（1）开发概要
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
小程序毕设作品之微信积分商城小程序毕业设计成品（4）开题报告
整个项目包含了:开题报告 + 开题报告PPT + 任务书 + 中期报告 + 论文模板 + 答辩PPT等 + 项目源码主要安介绍了系统在开发过程中所应用到的一些关键的技术,主要包括了前端小程序开发的M ...
微信小程序商城服务器搭建,基于微信小程序商城毕业设计（小程序客户端+服务端Node.js源码）毕业论文+运行说明...
微信小程序商城毕业设计(微信小程序客户端毕业设计) 摘要购物商城系统是保证以购物商城为基础的网上交易实现的体系.市场交易是由参与交易双方在平等.自由.互利的基础上进行的基于价值的交换.网上交易同 ...
毕业设计 -- 微信小程序选题大全（一）
文章目录小程序毕设选题推荐选题建议创新性不要给自己挖坑选题推荐最后小程序毕设选题推荐 Hi,这里是丹成学长,这篇文章给各位同学分享小程序毕设如何选题,对毕设开发,开题等有不清楚的都可以 ...
校园二手商城小程序，手把手带你开发一款云开发版商城小程序，校园二手微信小程序，可升级社区团购小程序
从今天开始带领大家实现一款云开发版的校园二手商城小程序技术选型 1,前端微信小程序原生框架 css JavaScript 2,管理后台云开发Cms内容管理系统 web网页 3,数据后台小程序云 ...
校园超市，百货超市小程序，手把手带你开发一款微信商城小程序，云开发+cms+数据库+js+css+微信小程序
从今天开始带领大家实现一款云开发版的校园二手商城小程序技术选型 1,前端微信小程序原生框架 css JavaScript 2,管理后台云开发Cms内容管理系统 web网页 3,数据后台小程序云 ...
基于微信小程序的宠物用品商城小程序
文末联系获取源码开发语言:Java 框架:springboot JDK版本:JDK1.8 服务器:tomcat7 数据库:mysql 5.7/8.0 数据库工具:Navicat11 开发软件:ecl ...

毕业设计商城小程序练习

前言：

一：参考地址

二：其他

三：优势

四：技术工具

五：基本项目目录

六：主要页面

七：各个功能实现思路

八：补充

毕业设计商城小程序练习相关推荐

最新文章

热门文章