小程序项目--电商优购day04

最新推荐文章于 2022-05-30 21:17:12 发布

不忘初心L

最新推荐文章于 2022-05-30 21:17:12 发布

阅读量806

点赞数

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

本文链接：https://blog.csdn.net/weixin_46379498/article/details/107325871

版权

本文介绍了电商小程序优购项目中商品详情页的开发过程，包括页面效果展示、业务逻辑实现（如商品数据渲染、图片预览、收藏、联系客服和分享功能）以及接口调用。关键技术涉及swiper组件、本地存储、富文本标签和小程序图片预览接口。同时，提供了wxml、less和js代码段作为实现细节。

摘要由CSDN通过智能技术生成

小程序项目--电商优购day04

商品详情⻚⾯

效果
在这里插入图片描述

业务逻辑

1.渲染商品详情数据
2.点击图⽚，调出图⽚画廊，进⾏预览
3.点击收藏
4.联系客服
5.分享功能
6.加⼊购物⻋

接口

获取详情数据接口

https://api-hmugo-web.itheima.net/api/public/v1/goods/detail/?goods_id

关键技术
swiper组件
本地存储实现
收藏功能
联系客服⼩程序管理后台中,直接添加即可
富⽂本标签渲染富⽂本
⼩程序预览图⽚接⼝

1.wxml文件代码

<!-- 搜索框 -->
<search-input></search-input>
<!-- tabs栏 -->
<tabs tabs="{
   {tabs}}" bind:tabsItemChange="handletabsItemChange">
	<block wx:if="{
   {tabs[0].isActive}}">
		<view class="first_tab">
			<navigator
			 class="goods_item"
			 wx:for="{
   {goodsList}}"
			 wx:key="goods_id"
			 url="/pages/goods_detail/index?goods_id={
   {item.goods_id}}"
			>
				<!-- 左侧图片容器 -->
				<view class="goods_img">
					<image mode="widthFix" src="{
   {item.goods_small_logo ?item.goods_small_logo:'http://image1.suning.cn/uimg/b2c/newcatentries/0070134290-000000000149003877_1_400x400.jpg' }}" />
				</view>
				<!-- 右侧商品容器 -->
				<view class="goods_info">
					<view class="goods_name">{
   {
   item.goods_name}}</view>
					<view class="goods_price">¥{
   {
   item.goods_price}}</view>
				</view>
			</navigator<