持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第13天，点击查看活动详情

Vant Weapp引入 GoodsAction 商品导航

• 在我们的商品详情页面我们需要用到客服，收藏等功能，这个vant weapp组件大大方便了我们对商品详情页面的开发，具体的组件详情如下：

组件链接：youzan.github.io/vant-weapp/…

• 在wxml文件中的具体引入代码如下：

<view class="icon">
  <van-goods-action-icon
    text="联系卖家"
  />
  <van-goods-action-button
    text="立即购买"
  />
</van-goods-action>
</view>

这里完全是使用了van-goods-action组件，他提供了我们提交订单以及商品价格总和的展示，非常方便。

• 在js文件中我们需要引入dialog

import Dialog from 'vant-weapp/dialog/dialog';

图片全局预览api

• 微信开发者文档为我们提供了一个api可以使用户点击图片可以查看大图，在手机端点击图片长按树秒之后会出现保存图片等功能，这个api功能的实现就是wx.previewImage,在js文件中的代码如下：

  showImage(){
      wx.previewImage({
        urls: [that.data.detailData.picture]
      })
    }, 

urls中的数据是根据自己的数据库的命名来的，每个人的名称都不同,不需要完全照搬上面的代码。

给客服图标和联系卖家添加函数功能

• 之前wxml文件中图标功能绑定了一个onClickButton和jumpDetail功能，点击后可以弹出对话框，提示用户线下交易，具体的js代码如下：

    onClickButton() {
      Dialog.confirm({
        title: '线下交易',
        message: '请添加微信购买'
      }).then(() => {
         on confirm
      })

这里面的message页面是个对话框，代码的功能还未完善，后续会具体说明

至此，我们的商品详情页面就大致完成了，完成后具体样式如下：