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

查看大图

在我们使用手机上的app或者小程序的时候，我们经常会使用查看大图这个功能，当然在微信小程序开发的过程中，微信开发者文档中也有一个api给用户提供了查看大图的功能，这个api就是 wx.previewImage(Object object)，微信开发者文档链接developers.weixin.qq.com/miniprogram…

在该项目中的代码示例：

//图片的全局预览功能
showImage: function(){
wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: this.data.background // 需要预览的图片http链接列表
})
},

商品的标签组件

1. vant weapp组件库中的 Tag 标签 可以让我们将商品的详细信息进行描述，tag组件链接：youzan.github.io/vant-weapp/…

2. 我们如何使用这个组件呢？首先，我们需要引入vant weapp组件库，官方网址那有具体教程，这里就不介绍了，快速上手链接：youzan.github.io/vant-weapp/… 引入完vant组件库之后，找到tag标签组件，在app.json文件中引入该组件：

"van-tag": "path/to/vant-weapp/dist/tag/index"

完成之后回到wxml文件，将需要描述的商品的信息渲染到该组件的赋值值上去。

 <van-tag round type="success">{{item.SaleMount}}</van-tag>

这个插值表达式中的数值是可以根据自己的需要改变的，因为之前以及加了商品的详细信息并且使用了for循环渲染商品数据，所以这里插值表达式中的内容就是每一个商品的价格，使用了success的tag标签，是蓝色的。