微信小程序Vant Weapp的案例

本次展示微信小程序中引用Vant Weapp中的业务组件
Card 商品卡片 参考官方说明

在你编写界面的文件夹中index.json引入组件
“usingComponents”: {
“van-card”: “path/to/vant-weapp/dist/card/index”
}

在这里我改为自己的项目路径；

在index.js中编写算法，获取到云数据库中goods集合的所有数据
在data中，定义初始化数组goodslist:[]，用来存储数据

const db = wx.cloud.database({});
const cont = db.collection('goods');
Page({
  data: {  
    goodslist:[]
  },
  getList: function (data){
    var _this = this;
    db.collection('goods').get({
      success: res => {
        this.setData({
          goodslist: res.data,
        })
      }
    })
  },
  onLoad: function (e) {
    this.getList() 
  },
})

在index.wxml前台界面的代码编写，用wx-for是因为有多条数据，需要遍历

<view wx:for="{
   
   {goodslist}}" >
 <van-card
  price="{
   
   {item.goodsprice}}"
  desc="{
   
   {item.goodsdesc}}"
  title="{
   
   {item.goodsname}}"
  thumb="http://a3.att.hudong.com/74/82/31300542575790140126823620438.jpg"
/>

这样就能简单的完成一个图文列表信息的展示界面
更多组件功能可以参考官方文档：https://youzan.github.io/vant-weapp/#/intro