小程序项目--电商优购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<