微信小程序功能：商品收藏-图片预览-客服-分享-加入购物车

微信小程序–商品详情页面

包含功能点：

商品收藏

图片预览

客服

分享

加入购物车

跳转到购物车页面（注意：open-type="switchTab"）

结构：goods_detail.wxml

<!-- 轮播图 -->
<view class="detail_swiper"><swiper autoplay="{{true}}" circular="{{true}}" indicator-dots="{{true}}"><swiper-item wx:for="{{goodsObj.pics}}" wx:key="pics_id" bindtap="handlePrevewImage" data-url="{{item.pics_mid}}"><image src="{{item.pics_mid}}" mode="widthFix" /></swiper-item></swiper>
</view>
<!-- 商品价格 -->
<view class="goods_price">￥{{goodsObj.goods_price}}</view>
<!-- 商品名称和收藏 -->
<view class="goods_name_row"><view class="goods_name">{{goodsObj.goods_name}}{{goodsObj.goods_name}}</view><view class="goods_collect" bindtap="handleCollect"><text class="iconfont {{isCollect?'icon-shoucang1':'icon-shoucang'}}"></text><view class="collect_text">收藏</view></view>
</view>
<!-- 商品详情 -->
<view class="goods_info"><view class="goods_info_title">图文详情</view><view class="goods_info_content"><!-- 富文本：可以渲染后台返回的标签字符串 --><rich-text nodes="{{goodsObj.goods_introduce}}"></rich-text></view>
</view>
<!-- 底部tab栏 -->
<view class="btm_tool"><view class="tool_item"><view class="iconfont icon-kefu"></view><view>客服</view><button open-type="contact"></button></view><view class="tool_item"><view class="iconfont  icon-fenxiang"></view><view>分享</view><button open-type="share"></button></view><navigator class="tool_item" url="/pages/cart/cart" open-type="switchTab"><view class="iconfont  icon-gouwuche"></view><view>购物车</view></navigator><view class="tool_item btn_cart" bindtap="handleCartAdd">加入购物车</view><view class="tool_item btn_buy">立即购买</view>
</view>

样式：goods_detail.less

// 底部tab栏：固定定位--遮挡内容
page {padding-bottom: 90rpx;
}// 轮播图
.detail_swiper {// 原图：400 * 400px，比例：1-1swiper {// 高 = 宽，也是比例：1-1；根据需要微调为65vw(该写：100vw)height: 65vw;text-align: center;swiper-item {image {width: 60%;}}}
}// 商品价格
.goods_price {padding: 15rpx;font-size: 32rpx;font-weight: 600;color: var(--themeColor);
}// 商品名称和收藏
.goods_name_row {border-top: 5rpx solid #dedede;border-bottom: 5rpx solid #dedede;padding: 10rpx 0;display: flex;.goods_name {flex: 5;color: #000;font-style: 30rpx;padding: 0 10rpx;// 文字溢出--省略号代替...display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;text-overflow: ellipsis;}.goods_collect {flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;border-left: 1rpx solid #000;.icon-shoucang1 {color: orangered;}.collect_text {}}
}// 商品详情
.goods_info {.goods_info_title {font-size: 32rpx;font-weight: 600;color: var(--themeColor);padding: 20rpx;}.goods_info_content {}
}// 底部tab栏
.btm_tool {position: fixed;left: 0;bottom: 0;// 块级元素：添加绝对、固定定位之后，需要给一个宽度；否则宽度由内容撑开了width: 100%;height: 90rpx;background-color: #fff;border-top: 1rpx solid #ccc;display: flex;.tool_item {flex: 1;display: flex;flex-direction: column;justify-content: center;align-items: center;font-size: 24rpx;position: relative;// 隐形的button按钮：绝对定位，继承父元素宽高，不透明button {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;}}.btn_cart {display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 2;background-color: #ffa500;color: #fff;font-size: 30rpx;font-weight: 600;}.btn_buy {display: flex;flex-direction: column;justify-content: center;align-items: center;flex: 2;background-color: #eb4450;color: #fff;font-size: 30rpx;font-weight: 600;}
}

逻辑：goods_detail.js文件

// pages/goods_detail/goods_detail.js
import { request } from "../../request/index.js";
Page({/*** 页面的初始数据*/data: {// 接口：商品详情数据goodsObj: {},// 商品是否被收藏isCollect: false},// 商品对象--全局变量GoodsInfo: {},// 点击轮播图 放大预览handlePrevewImage(e) {// 1.先构造要预览的图片数组const urls = this.GoodsInfo.pics.map(v => v.pics_mid);// 2.接收传递过来的图片urlconst current = e.currentTarget.dataset.url;wx.previewImage({current,urls,success: (result) => {console.log(result)}});},// 点击  加入购物车handleCartAdd() {// 1.获取缓存中的购物车 数组格式let cart = wx.getStorageSync("cart") || [];// 2.先判断  当前的商品是否已经存在于 购物车 (缓存中的商品id === 商品对象的id)let index = cart.findIndex(v => v.goods_id === this.GoodsInfo.goods_id);if (index === -1) {// 3. 不存在于购物车的数组中  直接给购物车数组添加一个新元素  新元素带上购买数量属性 num 重新把购物车数组  填充回缓存中this.GoodsInfo.num = 1;// 重点：添加属性--商品选中状态--为购物车页面准备this.GoodsInfo.checked = true;cart.push(this.GoodsInfo)} else {// 4. 已经存在  修改商品数据  执行购物车数量++ 重新把购物车数组  填充回缓存中cart[index].num++;}// 5. 不管该商品是否存在于购物车数组中，都需要把购物车数组填充回缓存中wx.setStorageSync("cart", cart);// 6. 弹框提示wx.showToast({title: '加入成功',icon: 'success',// 防止用户手抖  疯狂点击按钮mask: true});},// 获取商品详情数据getGoodsDetail(goods_id) {request({ url: "/goods/detail", data: { goods_id } }).then(goodsObj=>{// 将接口数据赋值给全局变量this.GoodsInfo = goodsObj;// 1.获取缓存中的商品收藏的按钮let collect = wx.getStorageSync("collect") || [];// 2.判断当前商品是否被收藏let isCollect = collect.some(v => v.goods_id === this.GoodsInfo.goods_id);// 3. 提取有用信息this.setData({goodsObj: {goods_name: goodsObj.goods_name,goods_price: goodsObj.goods_price,/*** iphone 部分手机  不识别webp图片格式* 最好找到后台  让他做修改* 临时自己修改  确保后台存在 1.webp => 1.jpg*/goods_introduce: goodsObj.goods_introduce.replace(/\.webp/g, '.jpg'),pics: goodsObj.pics},isCollect})});},/*** 点击收藏按钮* 1. 判断该商品是否存在于缓存数组中* 2. 已经存在  把该商品删除* 3. 没有存在  把该商品添加到收藏数组中  存入缓存中即可。*/handleCollect() {// 默认：没有被收藏let isCollect = false;// 1.获取缓存中的商品收藏数组let collect = wx.getStorageSync("collect") || [];// 2.判断该商品是否被收藏过let index = collect.findIndex(v => v.goods_id === this.GoodsInfo.goods_id);// 3.当index!= -1 表示  已经收藏过了if (index !== -1) {// 能找到  已经收藏过了  在数组中删除该商品collect.splice(index, 1);// 取消收藏isCollect = false;wx.showToast({title: '取消成功',icon: 'success',mask: true});}else {// 没有收藏过collect.push(this.GoodsInfo)// 添加收藏isCollect = true;wx.showToast({title: '收藏成功',icon: 'success',mask: true});}// 4.把数组存入缓存中wx.setStorageSync("collect", collect);// 5.修改data中的数据this.setData({isCollect})},
/*** 生命周期函数--监听页面显示*/onLoad: function (options) {console.log(options.goods_id)},/*** 生命周期函数--监听页面显示* * 页面 onShow 的时候：收藏逻辑放在了 this.getGoodsDetail() 函数里面* 1. 加载缓存中的商品收藏的数据* 2. 判断当前商品是不是被收藏*    是  改变页面的图标*  不是  继续执行下面操作*/onShow: function (options) {// 获取页面栈let pages = getCurrentPages();// 获取当前页面let currentPages = pages[pages.length - 1]// 获取url中传递过来的参数const { goods_id } = currentPages.options;// 发请求获取该商品的详情信息this.getGoodsDetail(goods_id)}
})

页面配置文件：goods_detail.json文件

{"usingComponents": {},"navigationBarTitleText": "商品详情"
}

微信小程序功能：商品收藏-图片预览-客服-分享-加入购物车相关推荐

微信小程序之wx.previewImage图片预览(多张图片预览)
wxml部分代码如下: <block wx:for="{{pictures}}" wx:for-item='item' wx:for-index='idx'><i ...
微信小程序现实点击图片预览功能
html部分 <image bindtap="showPic"></image> js部分 showPic: function () {// 预览图片,放大 ...
微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
微信小程序---下载、打开及预览PDF文件的方法
微信小程序的常用功能:打开PDF格式的文档.小程序的官方API是 wx.downloadFile.wx.openDocument(点击可以直接跳转到官方文档的解释) 详细用法请看Demo: //下载P ...
微信小程序在开发者工具和预览下边跳转都好好的真机预览就找不到页面，报错 {“errMsg“:“navigateTo:fail page \“***\“ is not found“}
微信小程序开发有这么一种情况: 在开发者工具里边随便点随便跳转,页面都能找到点击预览,手机扫码来回点来回跳,页面都能找到点击真机预览,来回点来回跳,偶尔页面就找不到了报错:(in promise ...
微信小程序做一个文档预览
文档预览首先展示效果 js页面 wxml页面首先展示效果图片预览: 视频预览 js页面首先在data中定义变量 itemId:null,saveTopList:[],//存储顶层文件列表fol ...
微信小程序开发者工具升级自动预览功能，福利啊
原来的预览方式,每次都得扫码! 现在的预览方式,只要点击预览,选择"自动预览",点击编译并预览,手机端会自动同步,是相当的不错哦.
微信小程序打开pdf文件；uni-app下载打开pdf文件；uni-app微信小程序下载打开pdf文件预览；
1.首先需要在小程序后台-开发设置-服务器域名配置好下载的域名.不配置:会导致下载失败和打开文件失败: 2.pdf文件的url要确保可以浏览器直接打开. <template><vi ...
微信小程序云开发上传图片无法预览显示
这是图片无法预览显示的情况,而且文件格式显示也不显示为图片格式不要忘记要在起完名字后加上你希望的图片格式后缀名加完之后就可以正常显示了

微信小程序功能：商品收藏-图片预览-客服-分享-加入购物车

微信小程序–商品详情页面

结构：goods_detail.wxml

样式：goods_detail.less

逻辑：goods_detail.js文件

页面配置文件：goods_detail.json文件

微信小程序功能：商品收藏-图片预览-客服-分享-加入购物车相关推荐

最新文章

热门文章