参考项目文档
- 搭建目录结构
目录名 | 作用 |
---|---|
styles | 存放公共样式 |
components | 存放存放组件样式 |
lib | 存放第三⽅库 |
utils | 帮助库 |
request | ⾃⼰的接⼝帮助库 |
- 搭建项目页面
在做项目之前呢,我们先来封装下http,方便调用接口
http中包含api.js、fatch.js、http.js
1. api.js:是导出我们请求的接口
2. fatch.js:是用的Promise 分别传三个参数( url,data,method,)
3. http.js:api.js和fatch.js都经过http.js
//导出
module.exports={
swipers,
}
开始进入我们的页面
底部导航分别对应的我们的页面,是在app.json中写入
pages:配置我们的页面
window:配置全局头部样式
tabBar:是用于页面路由跳转
首页
最顶部的搜索栏是采用数据的双向数据绑定、页面的跳转
轮播图是调用swiper接口和父传子、子传父来实现
父传子:
在自定义组件的js文件中通过properties属性来接收参数,在父组件的子组件标签中双向绑定挂载自定义属性,然后在父组件中修改值同时子组件值也会修改。
子传父:
在子组件js文件中修改通过properties属性接收到的参数同时父组件中的值也会变化。
下面的楼层,直接渲染数据
分类页
首先把分类页拆分成两份,左边是tap切换,右边是数据渲染
//生命周期函数--监听页面加载
onLoad: function (options) {
var _this=this
wx.request({
//获取我们的接口
url: 'https://api-hmugo-web.itheima.net/api/public/v1/categories',
success:function(res){
_this.setData({
list:res.data.message
})
}
})
},
点击tap切换时,我们给它一个默认的参数ID,根据ID进行筛选
点击右侧数据我们请求列表接口,携带者当前点击的cid
//获取列表页
onLoad: function (options) {
this.setData({
re:options
})
var _this=this
wx.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1/goods/search?query=&cid='+options.id+'&pagenum=1&pagesize='+this.data.num*10,
success(res){
_this.setData({
list:res.data.message.goods
})
}
点击详情页中单条数据----代码展示
//点击每一条获取当前的ID
go_lis(e){
console.log(e.target.dataset.id);
//将获取的iD重新赋值到data中
this.setData({
id:e.target.dataset.id
})
//跳转时,会携带data中的id
wx.redirectTo({
url: '../lis/index?id='+this.data.id,
})
进入加入购物车页面
在加入购物车页面渲染数据,写一写样式,当我们点击加入购物车时
//点击加入购物车
get(){
Toast.success('添加成功');
var nn=true
//修改下this的指向
var _this=this
//获取本地数据
var obj=wx.getStorageSync('shopCar')||[]
//如果本地有这条数据,我就让它num++,前提是ID相等的情况下
obj.forEach(res=>{
if(res.cat_id==_this.data.list.cat_id){
res.num++
nn=false
}
})
//如果本地里面没有这条数据时,让它默认添加一条 即num=1
if(nn==true){
_this.data.list.num=1
_this.data.list.flag=false
obj.push(_this.data.list)
}else{
}
//我们将这条数据重新存储到本地
wx.setStorage({
data: obj,
key: 'shopCar',
})
}
点击左下购物车时
//跳到购物车页面
go_shop(){
wx.reLaunch({
url: '../btn-shop/index',
})
},
进入购物车页面
//点击单选
ck(e){
//打印出来的是我们的下标
console.log(e.target.dataset.index);
//如果是点击当前的下标时 flag是判断选中不选中的
if(this.data.list[e.target.dataset.index].flag==true){
this.data.list[e.target.dataset.index].flag=false
}else{
this.data.list[e.target.dataset.index].flag=true
}
//var一个空数组
var nn=[]
//筛选之后把不选中的放到一个空数组中
this.data.list.forEach(res=>{
if(res.flag==false){
nn.push(res)
}
})
//如果为false的数组中为空时,这就相当于我们都选中了,相反
if(nn.length==0){
this.setData({
checked:true
})
}else{
this.setData({
checked:false
})
}
//我们将data中的list存到数据中
wx.setStorage({
data: this.data.list,
key: 'shopCar',
})
}
接下来进入我们的加减法计算
//加
jia(a){
//点击加号我们将下标存一下
var index=a.target.dataset.index
//将当前数据中的num++
this.data.list[index].num++
//将data中的list再重新存一下
wx.setStorage({
data: this.data.list,
key: 'shopCar',
})
this.onLoad()
},
//减
jian(a){
var index=a.target.dataset.index
this.data.list[index].num--
//减法唯一不同的地方在判断num=0时删除这条数据
if( this.data.list[index].num==0){
Dialog.confirm({
title: '删除',
message: '确认删除',
})
.then(() => {
this.data.list.splice(a.target.dataset.index,1)
wx.setStorage({
data: this.data.list,
key: 'shopCar',
})
this.onLoad()
// on confirm
})
//相反点击取消时,我们让它的数量等于1
.catch(() => {
this.data.list[a.target.dataset.index].num=1
//再存一下
wx.setStorage({
data: this.data.list,
key: 'shopCar',
})
this.onLoad()
});
}
全选功能的实现
//点击全选,获取它的状态
onChange(event) {
this.setData({
checked: event.detail,
});
//这个list是我们一开始选中的数据,当全部选中时,就意味着状态一样
this.data.list.forEach(res=>{
res.flag=event.detail
})
wx.setStorage({
data: this.data.list,
key: 'shopCar',
})
this.onLoad()
},
价格渲染以及实现
//生命周期函数--监听页面加载
onLoad:function(options) {
var _this=this
//获取数据
wx.getStorage({
key: 'shopCar',
success(res){
//价格
var pric=0
res.data.forEach(aa=>{
如果点击的这条数据为true时,我们就计算他们的价格
if(aa.flag==true){
pric+=(aa.goods_price*aa.num)
}
})
console.log(pric);
_this.setData({
price:pric
})
_this.setData({
flag:false,
list:res.data
})
console.log(res.data);
}
})
},
点击提交订单时,我们将选中的数据存一下,然后在订单页面获取并展示
下单
- 点击下单按钮,请求下单支付,返回支付参数,收到5个参数之后输入密码确认用户支付 输入密码是跟小程序 小程序是跟微信 然后返回给我们
wx.requestPayment() //获取五个参数后调用支付接口
timeStamp:res.data.timeStamp //时间戳
nonceStr:res.data.nonceStr //随机字符串
package:res.data.package ///订单详情扩展字符串
signType:res.data.signType //签名方式
paySign:res.data.paySign //签名
- 支付流程
- 登录微信公众平台, 首先开通微信支付功能 这是准备工作的第一步,确保小程序对应的支付功能已经开启
- 登录微信商户平台需要获取两个参数,一个是商户号 一个是支付秘钥。
1.首先要调用wx.login()获取code,唯一标识openID和会话秘钥session_key。并将获取到token缓存下来。
2.服务器端则是通过小程序提交的code,和小程序的APP和url,并用url进行get请求。
他返回的数据是一个json字符串,我们通过使用json_decode将他解析成数组,里面包括openID和session_key。
3.调用下单接口,获取prepay_id,这是后端完成的。
点击提交订单,创建订单,清空购物车,完成支付,过程会有两种清空,如果是在购物车进行提交订单操作,我们需要先清空一下购物车再创建订单,最后完成支付。