微信小程序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