微信小程序优购商城项目

这篇文章主要就是把我写的优购商城进行简单的说明，希望可以对大家有所帮助

1.先配置页面

在app.json中设置所需要的页面路径

2.然后再封装我们需要的组件和wx.request

wx.request可以不封装，但是封装可以减少重复代码，写起来也比较方便
axios就是我封装的http文件，名字叫什么都可以

2-1 api.js代码

代码是导出需要的接口路径，

module.exports={"swiber":"/home/swiperdata",
}

2-2 request.js代码

封装wx.reuqest方法并导出

//url>>>路径  data>>>接口需要的参数   method>>>接口使用的方法 get 或者 postmodule.exports = (url, data, method) => {return new Promise((resolve,reject) => {wx.request({url: url,data: data,method: method,success(res) {//成功回调 返回参数resolve(res)},fail(err){//失败回调reject(err)}})})}

2-3axios.js文件

封装好之后下使用需要在全局注册，

//将封装好的api和request导入使用
var api = require('../http/api')
var req = require('../http/request')
//接口路径前缀
let baseUrl = "https://api-hmugo-web.itheima.net/api/public/v1"
//请求轮播图数据
function swiper() {return req(baseUrl + api.swiber, {}, "get")
}
//将方法导出
module.exports = {swiper,
}

2-4全局注册并在组件使用

在根目录下app.js引入axios

// app.js
//引入axios
let axios = require('./http/axios')
App({onLaunch() {// 展示本地存储能力const logs = wx.getStorageSync('logs') || []logs.unshift(Date.now())wx.setStorageSync('logs', logs)},globalData: {userInfo: null},//注册成全局的方法axios,
}
)

2-5最后在页面使用

// pages/index/index.js
//保存app实例
var app = getApp()
Page({/*** 页面的初始数据*/data: {banner: [],},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//使用封装的axios接口进行请求数据app.axios.swiper().then(res => {let banner = res.data.message，//请求成功将数据保存给data以便在页面使用this.setData({ banner })})})},
})

到这里我们的axios就介绍完了，没什么难处，可能头几次有点不知道过程，多写几次就OK了！
接下来说一下我们项目开发的过程，一些相对容易写的我就说的简单一点，重点说清楚！

2首页的数据

首页功能感觉是最简单的，请求数据然后渲染出来就ok了，接口都不需要传参数，还有上边的搜索，忘记标出来了，他就是个按钮，点击后跳转到另一个搜索页面进行搜索，根据input输入框里边输入的关键字进行搜索，将关键字传入到接口就会返回相关的数据，最下边有搜索的代码*

// pages/search/search.js
var app = getApp()
Page({/*** 页面的初始数据*/data: {//input输入框的值uu: ""},//手写的双向数据绑定sss(e) {this.setData({uu: e.detail.value})//e.detail.value是input的关键字，将数据传到接口中返回的就是根据关键字所返回的数据，然后渲染到页面就okapp.axios.search(e.detail.value).then(res => {this.setData({list:res.data.message})})},deta(e){wx.navigateTo({url: '/pages/goods_detail/goods_detail?goods_id='+e.currentTarget.dataset.id,})},
})

3.分类页面的实现

写完首页来实现我们的分类页面
分别是左右两个组件
使用的是小程序自带的标签加上scroll-y="true"属性就可以实现上下滚动，下边上代码

// pages/category/category.js
//使用app实例
var app = getApp()
Page({/*** 页面的初始数据*/data: {scrol_list: [],scol_right: [],erjilist: [],index: 0,id: -1,shoplist: [],},//保存左侧竖向导航的下标等下用来写tab切换的样式emic(e) {this.setData({index: e.currentTarget.dataset.index,})//右侧分类渲染的首层数据this.setData({scol_right: this.data.scrol_list[this.data.index].children})},//跳转到商品列表然后将id传到商品列表页面gotoid(e) {wx.navigateTo({url: `/pages/goods_list/goods_list?cid=  ${e.currentTarget.dataset.id}}`})// })},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//页面首次加载获取到数据保存app.axios.scrol_list().then(res => {this.setData({scrol_list: res.data.message})// console.log(this.data.scrol_list);this.setData({scol_right: res.data.message[this.data.index].children,})})},
})

这里数据获取没什么难的，我写的时候遇到的问题在wxml！！
他的右侧数据渲染有点绕，渲染的时候有点让我挠头
看代码

<sear></sear>
<view class="boxss"><scroll-view style="width:20%;height:100%" scroll-y="true"><!--components/scrol_list/scrol_list.wxml--><view style="display:flex"><view style="width:220rpx"><block wx:for="{{scrol_list}}" wx:key="index" wx:for-index="ins"><view class="{{index==ins ? 'bgs' : ''}}" style="width:100%;height:82rpx;text-align:center;line-height:82rpx"data-index="{{ins}}" bindtap="emic">{{item.cat_name}}</view></block></view></view></scroll-view>//这里是右侧数据<scroll-view style="width:80%" scroll-y="true"><!--components/scrol_view/scrol_view.wxml--><view style="width:100%">//第一层循环。是分类的标题  电视  空调之类的<view wx:for="{{scol_right}}" wx:key="index" style="width:100%;margin-botttom:10rpx"><view style="width:100%;text-align:center;margin-botttom:40rpx;margin-top:20rpx">/ {{item.cat_name}} /</view><view style="display:flex;flex-wrap:wrap;">//第二层循环  是分类标题下的数据 他循环的是上一层数据的children 当时这里可让我好蒙，看清数据结构后觉得超简单<block wx:for="{{item.children}}" wx:for-item="items" wx:key="index"><!-- 跳详情 --><viewstyle="width:33%;  display: flex;flex-direction: column;justify-content: cneter;align-items: center;padding-top:20rpx;padding-bottom:20rpx"data-id="{{items.cat_id}}" bindtap="gotoid"><image src="{{items.cat_icon}}" style="width:100rpx;height:100rpx"></image><text>{{items.cat_name}}</text></view></block></view></view></view></scroll-view>
</view>
<!-- <shoplist shoplist="{{shoplist}}"></shoplist> -->

4商品分类

商品分类重点要说的上拉加载更多，下拉刷新代码没有多少，

// pages/goods_list/goods_list.js
var app = getApp()
Page({/*** 页面的初始数据*/data: {shoplist: []},//接口所需要的参数requestParmse: {query: "",//商品idcid: "",//当前页码pagenum: 1,//每页显示的数量pagesize: 10,},/*** 生命周期函数--监听页面加载*///进入页面获取数据的方法，在生命周期函数中执行 进入页面便会获得数据getlist() {//开启一个加载动画wx.showLoading({title: '加载中',})//将上边写的参数传递到后台 成功后会返回第一页的数据 保存app.axios.shoplist(this.requestParmse, "get").then(res => {console.log(res);this.setData({shoplist: res.data.message,arr: res.data.message})//关闭动画wx.hideLoading({title: "数据加载完成"})})},onLoad: function (options) {//获取商品分类idthis.requestParmse.cid = options.cid || ""this.requestParmse.query = options.query || ""//执行方法获取数据this.getlist()},* 页面相关事件处理函数--监听用户下拉动作*///下拉刷新onPullDownRefresh: function () {//开启动画wx.showLoading({title: '刷新',})//将页码修改为1this.requestParmse.pagenum = 1//请求数据app.axios.shoplist(this.requestParmse, "get").then(res => {//将请求的数据和原来的数据展开到一个数组this.setData({shoplist: { goods: [...res.data.message.goods] },arr: { goods: [...res.data.message] }})//数据获取完成，关闭动画wx.hideLoading({title: "刷新成功"})})},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {//开启加载动画wx.showLoading({title: '加载中',})//上拉页码加一this.requestParmse.pagenum++//页码作为参数传递给接口app.axios.shoplist(this.requestParmse, "get").then(res => {//将请求的数据和原来的数据展开到一个数组var k = [...res.data.message, ...this.data.shoplist.goods]this.setData({shoplist: { goods: [...res.data.message.goods, ...this.data.shoplist.goods] },arr: { goods: [...res.data.message, ...this.data.shoplist.goods] }})//数据获取完成，关闭动画wx.hideLoading({title: "数据加载完成"})})},
})

这里的是综合销量价格的排序

// components/shoplist/shoplist.js
Component({/*** 组件的属性列表*/properties: {shoplist: {type: Object},arr: {type: Array}},/*** 组件的初始数据*/data: {lists: ["综合", "销量", "价格"],arr1: [],newlist: [],fa: 3,},// onLoadmethods: {gotodetail(e) {//根据点击的商品id跳转对应的商品详情wx.navigateTo({url: '/pages/goods_detail/goods_detail?goods_id=' + e.currentTarget.dataset.id,})},prics() {//定义一个变量默认falselet s = falseif (s == false) {//将数据深拷贝成json字符串this.setData({arr2: JSON.stringify(this.data.arr)})//变量变为trues = true// console.log(s);}this.setData({newlist: JSON.stringify(this.data.shoplist.goods)})//使用我们data中定义的变量 进行判断价格从大到小或者从小到大排序if (this.data.fa == 3) {let arr = this.data.shoplist.goods.sort((a, b) => {return a.goods_price - b.goods_price})this.setData({arr: arr})this.setData({fa: 4})} else if (this.data.fa == 4) {let arr = this.data.shoplist.goods.sort((b, a) => {return a.goods_price - b.goods_price})this.setData({arr: arr})this.setData({fa: 3})}},//点击综合将刚才排序前保存的json字符串的第一页数据转换回来在赋值给数组arrzh() {// console.log(this.data.arr);this.setData({arr: JSON.parse(this.data.arr2),})},//销量排序 数据中没有销量，所以我是根据id'排序的 逻辑跟价格是基本相同xl() {this.setData({newlist: JSON.stringify(this.data.shoplist.goods)})// console.log(this.data.newlist);if (this.data.fa == 3) {let arr = this.data.shoplist.goods.sort((a, b) => {return a.goods_id - b.goods_id})this.setData({arr: arr})this.setData({fa: 4})// console.log(this.data.fa);} else if (this.data.fa == 4) {let arr = this.data.shoplist.goods.sort((b, a) => {return a.goods_id - b.goods_id})this.setData({arr: arr})this.setData({fa: 3})// console.log(this.data.fa);}},}
})

5商品详情

根据商品列表页点击商品的id请求到接口渲染数据
使用富文本标签渲染下边的富文本数据
这个页面没啥说的客服和分享是固定写法直接上代码了接下来说收藏和购物车

// pages/goods_detail/goods_detail.js
import regeneratorRuntime from '../../lib/runtime/runtime';var app = getApp()
Page({/*** 页面的初始数据*/data: {goods_id: "",detail_list: [],banner: [],lists: "",show: true,lss: []},/*** 生命周期函数--监听页面加载*///点击收藏执行代码sc(e) {console.log(e);//获取当前详情页数据let ls = e.currentTarget.dataset.list//获取本地存储的收藏商品数据let sclist = wx.getStorageSync('sclist') || []//本地收藏为0执行的判断if (sclist.length === 0) {console.log(111);//将当前商品添加进收藏数组显示收藏成功 sclist.push(ls)wx.showToast({title: '收藏成功',})console.log(sclist);//保存收藏后的数据 存在本地this.setData({//show是收藏小图标样式判断show: false,lss: sclist})wx.setStorageSync('sclist', sclist)} else {// console.log(e.goods_id);// console.log(ls.goods_id);//收藏页面有数据执行判断 判断当前商品id和我们保存的收藏商品数据id进行对比  如果有返回的是下标  没有返回-1let indexx = sclist.findIndex(v => v.goods_id === ls.goods_id)console.log(indexx);if (indexx == -1) {//商品不存在将当前商品添加进数组 并保存sclist.push(ls)wx.showToast({title: '收藏成功',})console.log(sclist);this.setData({show: false,lss: sclist})//将添加后的数组重新保存在本地wx.setStorageSync('sclist', sclist)} else {//else就是商品存在 显示已收藏 wx.showToast({title: '已收藏',})return false}}},//获取当商品详情所展示的数据getlist() {//this.data.goods_id 我们保存的商品下标app.axios.detail(this.data.goods_id).then(res => {console.log(res);//获取数据后保存this.setData({detail_list: res.data.message,banner: res.data.message.pics,lists: JSON.stringify(res.data.message)})console.log(this.data.detail_list);})},onLoad: function (options) {//已经入页面就获取数据console.log(options);this.setData({goods_id: options.goods_id})this.getlist()},
//加入购物车gotocard() {//从本地获取已经加入购物车的是商品数据  或者空数组let cart = wx.getStorageSync("cart") || [];console.log(cart);//跟收藏逻辑一样 判断当前商品id是否与购物车商品id有重复let index = cart.findIndex(v => v.goods_id === this.data.detail_list.goods_id)console.log(index);if (index === -1) {//当前商品不存在购物车  新生成num属性为1 生成一个checked等下做判断this.data.detail_list.num = 1this.data.detail_list.checked = true//将添加成功的数据添加进购物车数组cart.push(this.data.detail_list)} else {//商品存在让数量加1console.log(11);cart[index].num++console.log(cart[index].num);}//修改过的数据保存本地wx.setStorageSync("cart", cart)wx.showToast({title: '加入成功',})},gotoca() {//跳转购物车wx.reLaunch({url: '/pages/cart/cart',})},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {//进入页面判断收藏商品是否存在控制页面展示的收藏商品小图标样式let sclist = wx.getStorageSync('sclist') || []console.log(sclist);console.log(this.data.goods_id);let inde = sclist.findIndex(v => v.goods_id == this.data.goods_id)console.log(inde);if (inde == -1) {this.setData({show: true})} else {this.setData({show: false})}},
})

6购物车和获取地址

添加收货地址是一个按钮点击请求收货地址api
下边数据是存在本地的购物车数据
获取到收货地址和选中购买商品才能点击支付
使用 wx:if wx:else就能实现下边代码重点说收货地址和支付

// pages/cart/cart.js
Page({/*** 页面的初始数据*/data: {list: [],index: [],price: "",iss: [],flag: false,flags: false,lists: {}},//点击支付将选中商品存入本地 跳转支付页面zf() {wx.setStorageSync('zflist', this.data.iss)wx.navigateTo({url: '/pages/pay/pay',})},add() {//给获取地址按钮注册点击事件， 使用微信自带的api wx.chooseAddress成功的回调中就是所需要的地址 保存下来渲染即可wx.chooseAddress({success: (result) => {this.setData({lists: result})},})},
//点击加号数量加1jia(e) {let zxindex = e.currentTarget.dataset.index;let lis = this.data.list;console.log(lis);console.log(zxindex);lis[zxindex].num++this.setData({list: lis})wx.setStorageSync('cart', lis)let nums = 0this.data.iss.forEach(e => {this.setData({price: nums += Number(e.goods_price) * (e.num)})console.log(this.data.price);});},//点击减号数量-1  比加号多一个数量不能为1之下的数字jian(e) {console.log(e);let zx = e.currentTarget.dataset.index;let zxsb = this.data.list;if (zxsb[zx].num <= 1) {zxsb[zx].num = 1console.log(zxsb[zx].num);this.setData({list: zxsb})console.log(this.data.list);wx.setStorageSync('cart', this.data.list)} else {console.log(zxsb[zx].num);zxsb[zx].num--}this.setData({list: zxsb})wx.setStorageSync('cart', this.data.list)let nums = 0this.data.iss.forEach(e => {this.setData({price: nums += Number(e.goods_price) * (e.num)})console.log(this.data.price);});},//点击全选商品全部选中tas() {if (this.data.flag === true) {this.setData({iss: [],flags: false,flag: false})} else {this.setData({iss: this.data.list,flags: true,flag: true})}//计算商品总价let nums = 0;this.data.iss.forEach(e => {nums += Number(e.goods_price) * (e.num)});this.setData({price: nums})},//点击单选控制全选ec(e) {this.setData({index: e.detail.value})let is = []this.data.list.forEach((a, i) => {this.data.index.forEach((s) => {if (i == s) {is.push(a)}});this.setData({iss: is})});if (e.detail.value.length == this.data.list.length) {this.setData({flag: true})} else {this.setData({flag: false})}//计算选中商品总价let nums = 0this.data.iss.forEach(e => {nums += Number(e.goods_price) * (e.num)});this.setData({price: nums})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {console.log(wx.getStorageSync('cart'));this.setData({list: wx.getStorageSync('cart')})},
})

7支付页面

支付页面获取地址跟上边一样偶就不重复了
重点说支付的逻辑

// pages/pay/pay.js
Page({/*** 页面的初始数据*/data: {list: [],dz: [],priceAll: ""},zfs(){wx.navigateTo({url: '/pages/auth/auth',})},price() {//计算总价 let numS = 0this.data.list.forEach(e => {console.log(e.goods_price);console.log(e.num);numS += e.goods_price * e.num});//总价this.setData({priceAll: numS})},//获取地址add() {wx.chooseAddress({success: (result) => {console.log(result);this.setData({dz: result})},})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//进入页面执行let v = wx.getStorageSync('zflist')this.setData({list: v})this.price()},
})

点击支付跳转到支付页面
固定写法将按钮设置open-type=“getUserInfo” bindgetuserinfo=“sq”
在执行sq下边的方法
接口如果能用就可以执行后边的操作但是支付接口是假的就只能写到这一步

<button  open-type="getUserInfo" bindgetuserinfo="sq">获取授权
</button>

// pages/auth/auth.js
import { request } from "../../request/index.js";
//es7语法转换
import regeneratorRuntime from '../../lib/runtime/runtime';
import { login } from "../../utils/asyncWx.js";
Page({/*** 页面的初始数据*/data: {},async sq(e) {console.log(e);let detail = e.detaillet { cont } = await login()let pro = { detail, cont }const { token } = await request({ url: "/users/wxlogin", data: pro, method: "post" });},
})

7我的页面

这个页面是需要登陆的登陆后才可以显示头像昵称和收藏商品
还有下边的一个意见反馈

没有登陆需要点击登录按钮
设置 open-type=“getUserInfo” bindgetuserinfo=“getuserinfo” 属性执行小程序自带的属性

// pages/login/login.js
Page({/*** 页面的初始数据*/data: {},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},//点击登录按钮看看本地有没有用户数据getuserinfo(e) {let user = wx.getStorageSync('userDetail') || []if (user.length <= 0) {wx.setStorageSync('userDetail', [e.detail])}//点击跳转我的页面wx.reLaunch({url: '/pages/user/user',})},})

我的页面执行的方法


// pages/user/user.js
var app = getApp()
Page({/*** 页面的初始数据*/data: {userdetail:[],sclist:[]},log() {//没有登陆跳转登陆页面wx.navigateTo({url: '/pages/login/login',})},//跳转反馈gofeb(){wx.navigateTo({url: '/pages/feedback/feedback',})},//跳转收藏gotocst() {wx.navigateTo({url: '/pages/collect/collect',})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//获取本地的存储的用户数据console.log(wx.getStorageSync("sclist"));this.setData({userdetail: wx.getStorageSync("userDetail"),sclist:wx.getStorageSync("sclist")})},
})

意见反馈页面
点击加号ti叫图片以及点击提交

// pages/feedback/feedback.js
Page({/*** 页面的初始数据*/data: {imags: [],is: ["体验问题", "商品、商家投诉"],ix: 0,erarval: ""},add() {console.log("111")//添加的图片const ims = this.data.imags//文本域的文字const val = this.data.erarval//判断文本域输入文字合法性// if (!val.trim()) {//   // 不合法//   wx.showToast({//     title: '输入不合法',//     icon: 'none',//     mask: true//   });//   return;// }//循环图片ims.forEach((v, i) => {//微信小程序api将本地资源文件上传到服务器wx.uploadFile({//图片路径filePath: v,//描述name: 'file',//上传路径url: 'https://images.ac.cn/Home/Index/UploadAction/',formData: {},//上传的服务器路径也是坏的  所以只能到这一步success: (res) => {console.log(res);}})});},err(e) {this.setData({erarval: e.detail.value})},asc(e) {console.log(e);this.setData({ix: e.currentTarget.dataset.index})},comi() {var that = this//从本地或者使用相机拍照wx.chooseImage({//图片最大个数count: 9,//所选的图片的尺寸sizeType: ['original', 'compressed'],//选择图片的来源sourceType: ['album', 'camera'],success(res) {console.log(res);//将最新添加照片和已经添加的照片合并保存that.setData({imags: [...that.data.imags, ...res.tempFilePaths]})}})},
})