1.准备工作

1.首先拿到项目后做好项目搭建

(1)搭建之前首先要分析整个项目的剧本组成是否有源码或者是效果图（黑马优购有源码和效果图和请求的接口文档）
(2)在源码或者效果图上分析页面的组成以及效果的展示页面跳转等
(3)在以上准备工作完成之后就要利用微信开发者工具进行开发

2.搭建基础页面

1.首先打开项目文件找到app.json中创建该项目需要的文件

2.在app.json中配置底部导航实现底部基本页面的跳转

3.底部tabbar配好路由可以跳不同的页面
接着就可以写首页的布局以及功能的实现
在请求数据时用的是封装的request请求
在根目录下创建http文件里面包含fetch.js http.js 和api.js在这个文件中来封装请求的接口
api.js

fetch.js

http.js

采用封装的方法可以处理项目在开发过程中出现一致的功能或者效果是可以用这种方式来提高开发效率

接着就可以通过项目的api文档来获取到接口请求过来的数据
首页的轮播图，nav导航，以及下面的楼层都是根据接口地址来获取所需要的所有数据最后渲染到页面上，可以采用组件化开发思想利用组件在首页注册引入。

分类页面

1.商品的分类页面是在首页给中间导航绑定点击事件然后在首页的js文件下写跳转的路由这里用的是微信小程序文档的方法进行页面跳转

2.在分类页面，根据api接口文档在封装好的http文件中请求分类页面需要的的数据分类页面顶部的搜索按钮可以根据封装的直接引入，下面分类数据请求接口左侧的侧导航与右边的商品相当于竖向的tab切换
可以根据左侧对应的下标来找到对用的商品

列表页内容

1.通过在商品页面右侧的商品设置点击事件根据绑定的自定义是属性这样可以根据唯一的商品goods_id找到对应的商品列表数据
代码如下：

通过点击事件跳转到商品列表页（这里注意跳转路由需要传参就是商品的当前id）

这样可以实现到列表页一个跳转，在列表页根据传的参数id可以获取当前点击的对应的数据
然后遍历数据渲染到列表页

这里有部分功能的实现是上拉加载和下拉加刷新的功能实现
上拉加载下拉刷新

详情页面

跳转详情页也是根据配置详情页的接口这里需要商品的id根据id来获取整个商品的详情数据在根据接口对页面进行渲染
代码如下：
在详情页面可以根据商品id来渲染页面
在详情页有加入收藏、分享、客服的功能加入购物车：是根据效果来定义一个需要的数组用一个数组来接收，给点击购物车绑定一个点击事件当点击后将数据保存到数组里面并保存到本地存储里面，这样的话可以让数据不丢失通过wx.setStorageSync 方法将数据保存取的话可以使用wx.getStorageSync 方法获取本地存储的数据
这里要注意添加购物车要判断商品id是否一致，当id一致时就不会往数组里面添加，只会增加对应的商品数量

handleCartAdd() {console.log(this.data.data);let k = false;// 判重复let price = this.data.data.goods_price;let image = this.data.data.goods_small_logo;let flag = false;// 复选框的状态let num = 1;let name = this.data.data.goods_name;let id = this.data.data.goods_id;this.obj.cart.forEach(item => {if (item.id == id) {k = true;item.num++;}});if (!k) {this.obj.cart.push({price,image,flag,num,name,id});}console.log(this.obj.cart);wx.setStorageSync('shopping', this.obj.cart);// wx.setStorageSync("cart", cart);wx.showToast({title: '加入成功',});},

跳转到购物车页面可以对保存的数据进行渲染，在购物车页面，需要实现对商品全选，反选，商品总量，总价格的计算以及跳转到预支付页面
购物车页面有获取收获地址等用户信息获取授权等
在获取收获地址和获取登录授权之前要判断本地是否有数据
如果没有就要通过文档接口获取数据

我的页面

这个页面是有一个登录按钮用来获取微信头像信息
给登录绑定点击事件，跳转到登录界面在登录界面通过点击事件来获取用户信息采用方法来获取微信信息

getUserProfile(e) {wx.getUserProfile({desc: '用于完善会员资料',success: (res) => {console.log(res);//res所有的用户信息this.setData({userInfo: res.userInfo,hasUserInfo: true})wx.setStorageSync('user', res.userInfo)}})wx.setStorageSync('user', this.data.userInfo)},

我的页面收藏商品的数量也是根据本地存储保存的收藏商品的数量来计算商品总数

意见反馈页面

需要给‘意见反馈’绑定点击事件跳转意见反馈页面
在此页面有一个需要输入的反馈内容和上传的图片还有提交按钮
点击提交先判断意见是否为空为空弹出提示
点击＋是执行 wx.chooseImage（）方法可以调用文件选择图片
点击提交可以选择要上传的地址

获取图片：

handleChooseImg(){wx.chooseImage({// 选择图片会通过微信来调用相册count: 5,//可以上传的数量sizeType: ['original', 'compressed'],// 照片格式sourceType: ['album', 'camera'],success: (result) => {console.log(result);this.setData({// 图片数组 进行拼接 image:[...this.data.image, ...result.tempFilePaths]// 成功获取后})}})console.log(this.data.image);},

点击提交：

 handleSubmit(){let {text,image} = this.data// 判断输入的内容是否为空if(!text.trim()){wx.showToast({title: '请输入内容',})return;}// 调用wx.showLoading是弹出Loading字样wx.showLoading({title: "正在上传中",mask: true});// 判断图片的长度是否为0if(image.length !=0){image.forEach((item,index)=>{// 调用wx.uploadFile方法来获取图片的文件wx.uploadFile({filePath: item,// 文件包含的数据(获取图片的路径)name: 'file',// 文件名formData: {},url: 'https://images.ac.cn/Home/Index/UploadAction/',// 上传接收的地址success:(res)=>{console.log(res);let url = JSON.parse(res.data).url;this.LoadImgs.push(url);if (index === image.length - 1) {wx.hideLoading();this.setData({text: "",image: []})// 返回上一个页面wx.navigateBack({delta: 1});}}})})}else{wx.hideLoading()console.log("只提交了文本");wx.navigateBack({delta: 1,})}},

微信小程序黑马优购讲解相关推荐

微信小程序黑马优购遇到的问题和心得
案列学习如果不想在consolo中输出可以在中为项目设置这个属性 Flex 如果一行放不下第二个可以让他们换行默认横向布局现在改为纵向布局 align-items: center; just ...
小程序swiper怎么让内容撑开高度_[视频]微信小程序实战优购商城，涵盖你所学的技能点...
很多友友都在找视频教程学习,IT技术教程分享网[http://www.mano100.cn]已经为你收集了各种各样的视频教程,不用再到处找视频教程学习了.无论是免费的,还是收费的,都在这里了.只要你注 ...
uniapp微信小程序项目-优购商城
原网页笔记文档: https://www.escook.cn/docs-uni-shop/ 1. 起步 #1.1 uni-app 简介 uni-app 是一个使用 Vue.js 开发所有前端应用的框架 ...
小程序黑马优购商城项目讲解
小程序优购商城项目讲解在我们开始之前我们需要配好该项目所需要的接口文档以及配好相应的页面,以免在开发过程中会出现遗漏的问题出现. 首先我们要知道优购是分为4部分的分别为首页/列表/购物车/我的 ...
提高微信小程序的应用速度的常见方式有哪些? 小程序怎么实现下拉刷新? 简述微信小程序原理？小程序的发布流程（开发流程）分析下微信小程序的优劣势？小程序授权登录流程？小程序支付如何实现
小程序部分常见面试题提高微信小程序的应用速度的常见方式有哪些? 提高页面加载速度用户行为预测减少默认data的大小组件化方案分包预下载小程序与原生App相比优缺点? 优点: 基于微信平台开 ...
微信小程序更新功能详细讲解
我在之前的文章中详细讲解了:今天和大家来详细聊一聊微信小程序一些新功能. 微信小程序操作教程(个人用户注册)和微信小程序操作教程(企业用户注册) 一.小程序短信功能介绍短信广告作为全新的媒体传播形 ...
微信小程序云开发——模板讲解之云函数
在上一张我们已经配好了环境,这章我们按照模板的顺序去执行提供的案例,对官方文档进行一个实践操作. 首先我们点击"点击获取 openid "文字,发现控制台报错: 云函数调用失败 ...
微信小程序--黑马程序员
小程序的页面,都存放在pages的目录里 ,以单独的文件夹存在 .js文件 (页面的脚本文件,存放页面的数据,事件处理函数) .json(当前的配置文件,配置窗口的外观 ) .wxml文件(页面的模板 ...
黑马小程序品优购商城项目分析
黑马电商品优购小程序几日前完成了该项目,整理了下大概的逻辑思路,希望和大家一起交流学习,文档中不足之处希望各位不吝赐教. 该项目使用小程序原生mina框架项目页面的搭建页面名称文件首页 in ...

微信小程序黑马优购讲解