微信小程序实现购物车，底部导航栏的配置，微信小程序实现路由跳转

最新推荐文章于 2024-08-07 22:38:02 发布

努力的琦琦

最新推荐文章于 2024-08-07 22:38:02 发布

阅读量1.4k

点赞数

分类专栏：微信小程序文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48210599/article/details/108742237

版权

微信小程序专栏收录该内容

13 篇文章 0 订阅

订阅专栏

微信小程序复习第一天

微信小程序实现购物车

首先是微信静态的页面

在这里插入图片描述

<!--购物车页面-->
<view>
	<!-- 空状态 -->
	<van-empty description="购物车空空如也~" wx:if="{{cartList.length <= 0 ? !isShow :isShow}}" image="/assets/catr_details.png">
		<van-button type="danger" class="bottom-button" bind:click="toHome">
			去逛逛~
		</van-button>
	</van-empty>
	<!-- <dly_cartCard wx:if="{{cart != 0 ? !isShow :isShow}}" cart="{{cartList}}"></dly_cartCard> -->
	<view wx:if="{{cartList.length != 0 ? !isShow :isShow}}">
		<view>
			<view class="card" wx:for="{{cartList.items}}" wx:key="index">
				<!-- 购物车商品卡片 -->
				<view class="card_con_img">
					<image src="{{item.pic}}"></image>
				</view>
				<view class="card_con">
					<view class="card_con_left">
						<view class="card_name">
							{{item.name}}
						</view>
						<image src="/assets/del.png" catchtap="delete_data" data-key="{{item.key}}"></image>
					</view>
					<view class="card_price">￥{{item.price}}</view>
					//这里点击加减调用addData subData
					<van-stepper class="card_stepper" value="{{item.number}}" bind:plus="addData" bind:minus="subData" data-number="{{item.number}}" data-key="{{item.key}}" integer />
				</view>
			</view> 

		</view>
		<!-- 底部提交栏 -->
		<van-submit-bar price="{{ cartList.price*100 }}" button-text="去提交" bind:submit="onSubmit" />
	</view>

	<!-- 购物车页面弹出框 -->
	<xhy_user_dialog bindallow="allow" id="tan" />
</view>

js部分

// pages/cart/cart.js
const AUTH = require('../../utils/register.js')
const {
  xps_api
} = require("../../http/api.js")
Page({

  /**
   * 页面的初始数据
   */
  data: {
    isShow: false, //判断空状态的显示和隐藏，默认是不显示
    cartList: [], //购物车的所有数据
  },
  toHome() {
    wx.switchTab({
      url: "../../pages/home/home",
    })
  },
  // 点击加号加一条数据
  addData(e) {
    // 商品数量
    let number = e.currentTarget.dataset.number + 1;
    // token
    let token = wx.getStorageSync('token');
    // 要修改的key值
    let key = e.currentTarget.dataset.key;
    xps_api("getNumber", {
      key,
      number,
      token
    }, "POST").then(res => {
      // console.log("购物车的加数据", res.data);
      this.setData({
        cartList: res.data,
      })
    })
  },
  subData(e) {
    // 商品数量
    let number = e.currentTarget.dataset.number - 1;
    // token
    let token = wx.getStorageSync('token');
    // 要修改的key值
    let key = e.currentTarget.dataset.key;
    xps_api("getNumber", {
      key,
      number,
      token
    }, "POST").then(res => {
      // console.log("购物车的减数据", res.data);
      this.setData({
        cartList: res.data,
      })
    })
  },
  // 删除
  delete_data(e) {
    // token
    let token = wx.getStorageSync('token');
    // 要修改的key值
    let key = e.currentTarget.dataset.key;
    xps_api("deleteData", {
      token,
      key
    }, "POST").then(res => {
      if (res.code == 0) {
        this.setData({
          cartList: res.data,
        })
      } else if (res.code == 700) {
        this.setData({
          cartList: [],
        })
      }
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },
  //allow允许登录
  allow(e) {
    // console.log(e.detail.userInfo)
    let userinfo = e.detail.userInfo
    if (userinfo) {
      //点击了允许执行登陆注册方法
      AUTH.register(this)
    }
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //进入页面判断是否登录
    AUTH.areyoulogin().then(res => {
      //是否本地有token
      if (res) {
        //弹出框隐藏 获取购物车列表
        this.selectComponent("#tan").closedailog()
      }
    })
    let token = wx.getStorageSync("token");
    xps_api("getCart", {
      token
    }).then(res => {
      // console.log("获取购物车的数据", res.data);
      if (res.code == 0) {
        this.setData({
          cartList: res.data
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },
  onSubmit(){
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

底部导航栏的配置

在这里插入图片描述

底部导航栏主要是在app.json中配置的，配置信息如下

需要注意的是需要先建好页面后去搭建

而且要用在pages中首项为home

{
  "pages": [
    "pages/home/home",
    "pages/classify/classify",
    "pages/cart/cart",
    "pages/user/user"
  ],
  "tabBar": {
    "color": "#707070",
    "selectedColor": "#1296db",
    "borderStyle": "white",
    "list": [{
        "text": "首页",
        "pagePath": "pages/home/home",
        "iconPath": "/assets/home.png",
        "selectedIconPath": "/assets/home_active.png"
      },
      {
        "text": "分类",
        "pagePath": "pages/classify/classify",
        "iconPath": "/assets/classify.png",
        "selectedIconPath": "/assets/classify_active.png"
      },
      {
        "text": "购物车",
        "pagePath": "pages/cart/cart",
        "iconPath": "/assets/cart.png",
        "selectedIconPath": "/assets/cart_active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/user/user",
        "iconPath": "/assets/user.png",
        "selectedIconPath": "/assets/user_active.png"
      }
    ]
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

微信小程序实现路由跳转

在这里插入图片描述

首先是商品列表页面

<view>
	<van-divider contentPosition="center" customStyle="color: #999; border-color: #ccc; font-size: 16px;">
		商品列表
	</van-divider>
	<view class="xhy_hot_goodItem">
		<view class="xhy_hot_item" wx:for="{{goodItem}}" wx:key="index" catchtap="goDetails" data-id="{{item.id}}">
			<image src="{{item.pic}}"></image>
			<view class="xhy_title">
				<view class="xhy_title_name">{{item.name}}</view>
				<view class="xhy_price"> 
          <text class="xhy_minprice">￥{{item.minPrice}}</text>
          <text class="xhy_oriprice">￥{{item.originalPrice}}</text>
        </view>
			</view>
		</view>
	</view>
</view>

js部分

  methods: {
    goDetails(e) {
      let id = e.currentTarget.dataset.id
      //使用 wx.navigateTo去跳转路由
      wx.navigateTo({
        url: '../../pages/details/details?id=' + id,
      })
    },
  }